Javascript 帆布中的反弹球-需要它改变颜色吗_Javascript_Html_Html5 Canvas

Javascript 帆布中的反弹球-需要它改变颜色吗

javascript html html5-canvas

Javascript 帆布中的反弹球-需要它改变颜色吗,javascript,html,html5-canvas,Javascript,Html,Html5 Canvas,我创建了一个弹跳球游戏，就像大多数人一样，我想在点击球时改变颜色。我看到了很多关于如何制作我所制作的东西的教程，但没有告诉我如何做我想做的事情。有人有什么想法可以帮我吗。这是我的 var球； var x=100；变量y=200； var-dx=3； var-dy=3.5；函数init（）{ ball=myCanvas.getContext（'2d'）；设定间隔（抽签，12）； canvas.addEventListener（'mousemove'，ev_mousemove，false）；

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

var球；
var x=100；
变量y=200；
var-dx=3；
var-dy=3.5；
函数init（）{
ball=myCanvas.getContext（'2d'）；
设定间隔（抽签，12）；
canvas.addEventListener（'mousemove'，ev_mousemove，false）；
}
函数绘图（）{
clearRect（0,060500）；
ball.beginPath（）；
ball.fillStyle=“#F7742C”；
//在画布上的坐标100100处绘制半径为20的圆
弧度（x，y，10，0，Math.PI*2，真）；
ball.closePath（）；
ball.fill（）；
//边界逻辑
如果（x<10 | | x>590）dx=-dx；
如果（y<10 | | y>490）dy=-dy；
x+=dx；
y+=dy；
}

我用叉子叉了你的，到目前为止似乎有效，但如果点在圆内，测试就有问题

<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>


var球；
var x=100；
变量y=200；
var-dx=3；
var-dy=3.5；
var color=“#F7742C”；
函数init（）{
ball=myCanvas.getContext（'2d'）；
设定间隔（抽签，12）；
myCanvas.addEventListener（'click'，ev_click，false）；
}
函数绘图（）{
clearRect（0,060500）；
ball.beginPath（）；
ball.fillStyle=颜色；
//在画布上的坐标100100处绘制半径为20的圆
弧度（x，y，10，0，Math.PI*2，真）；
ball.closePath（）；
ball.fill（）；
//边界逻辑
如果（x<10 | | x>590）dx=-dx；
如果（y<10 | | y>490）dy=-dy；
x+=dx；
y+=dy；
}
功能ev_点击（e）{
log（e.clientX+：“+e.clientY）；
console.log（x+“：”+y）；
var inCircle=（e.clientX-x）*（e.clientX-x）+（e.clientY-y）*（e.clientY-y）；
控制台日志（inCircle）；
如果（内圆<2000）{
color=“#000000”；
}
}

从中获得算法。

也许您可以对此有所帮助，它在JSFIDLE中非常有效，但在本地不起作用。颜色不变。有什么想法吗？我更新了JSFIDLE btw