Question

我创造了一个像大多数人一样的弹跳球游戏，我想在点击球时改变颜色。我看到了很多关于如何制作我所做的内容的教程，但没有告诉我如何做我想做的事情。有没有人有任何想法可以帮助我。这是我的jsfiddle

＆＃13;

var ball;
var x = 100;
var y = 200;
var dx = 3;
var dy = 3.5;

function init() {
    ball = myCanvas.getContext('2d');
    setInterval(draw, 12);
    canvas.addEventListener('mousemove', ev_mousemove, false);
}

function draw() {
    ball.clearRect(0, 0, 600, 500);
    ball.beginPath();
    ball.fillStyle = " #F7742C";
    // Draws a circle of radius 20 at the coordinates 100,100 on the canvas
    ball.arc(x, y, 10, 0, Math.PI * 2, true);
    ball.closePath();
    ball.fill();
    // Boundary Logic
    if (x < 10 || x > 590) dx = -dx;
    if (y < 10 || y > 490) dy = -dy;
    x += dx;
    y += dy;
}

＆＃13;

<body onLoad="init();">
    <canvas id="myCanvas" width="600" height="500" style="border:10px solid"></canvas>
</body>

＆＃13;

Answer 1

我分叉你的JSFiddle并且它似乎工作到目前为止但如果该点位于圆圈内，则测试出现问题。

<script>
    var ball;
    var x = 100;
    var y = 200;
    var dx = 3;
    var dy = 3.5;
    var color = " #F7742C";

    function init() {
        ball = myCanvas.getContext('2d');
        setInterval(draw, 12);
        myCanvas.addEventListener('click', ev_click, false);
    }

    function draw() {
        ball.clearRect(0, 0, 600, 500);
        ball.beginPath();
        ball.fillStyle = color;
        // Draws a circle of radius 20 at the coordinates 100,100 on the canvas
        ball.arc(x, y, 10, 0, Math.PI * 2, true);
        ball.closePath();
        ball.fill();
        // Boundary Logic
        if (x < 10 || x > 590) dx = -dx;
        if (y < 10 || y > 490) dy = -dy;
        x += dx;
        y += dy;
    }

    function ev_click(e) {
        console.log(e.clientX+ " : " + e.clientY);
        console.log(x+  " : " + y);
        var inCircle= (e.clientX - x)*(e.clientX - x) + (e.clientY - y)*(e.clientY - y);
        console.log(inCircle);
        if ( inCircle< 2000) {
            color = " #000000";
        }
    }

</script>
<body onLoad="init();">
    <canvas id="myCanvas" width="600" height="500" style="border:10px solid"></canvas>

从here获得算法。

在画布中弹跳球 - 需要它来改变颜色

1 个答案: