弹跳球游戏，鼠标检测事件，JavaScript
[英]Bouncing Ball Game, Mouse Detect Event, JavaScript
问题描述
I've already created a bouncing ball which bounces off the walls of the HTML5 Canvas that I have specified. 
我已经创建了一个弹跳球，该弹跳球从我指定的HTML5画布的壁上弹起。
My goal is to make a "Game Over" screen appear when the pointer (mouse) hovers over the ball. 我的目标是在指针（鼠标）悬停在球上方时显示“游戏结束”屏幕。
I have already searched and found some tutorials on mouse events in Javascript, but I'm not really sure how to implement them into my code =/. 我已经搜索并找到了一些有关Java鼠标事件的教程，但是我不确定如何将它们实现到我的代码= /中。
Any help would be amazing. 任何帮助都将是惊人的。
<script>
var x = Math.floor((Math.random() * 600) + 1);
var y = Math.floor((Math.random() * 300) + 1);
var dx = 2;
var dy = 4;
function begin()
{
gameCanvas = document.getElementById('gameCanvas');
context = gameCanvas.getContext('2d');
return setInterval (draw, 20);
}
begin();
function draw()
{
context.clearRect(0,0,600,300);
context.fillStyle = "#0000FF";
context.beginPath();
context.arc(x,y,80,0,Math.PI*2,true);
context.closePath();
context.fill();
if (x < 0 || x > 600) dx=-dx
if (y < 0 || y > 300) dy=-dy;
x += dx;
y += dy;
}
gameCanvas.onmousemove = function (e)
{
var gameCanvas = e.target;
var context = gameCanvas.getContext('2d');
var coords = RGraph.getMouseXY(e);
}
2 个解决方案
解决方案1
1 2012-11-14 20:50:41
You need to check if the mouse is hovering over the ball (hit test) by checking the distance of the ball to the cursor. 您需要通过检查球到光标的距离来检查鼠标是否悬停在球上（命中测试）。 If the distance is smaller than radius of the ball, it means that the mouse is over the ball. 如果距离小于球的半径，则表示鼠标在球上。
Note, that you need to adjust the code below to your needs Example: 注意，您需要根据需要调整以下代码。示例：
var mouse_x = 10, mouse_y = 10, ball_x = 10, ball_y = 10, ball_radius = 70, is_game_over = false
if( Math.sqrt( Math.pow( mouse_x - ball_x, 2 ) + Math.pow( mouse_x - ball_x, 2 )) < ball_radius && !is_game_over ) {
console.log('Cursor is over the mouse, game over')
is_game_over = true
}
Do it for every frame update. 每次更新帧时都要这样做。
解决方案2
1 2012-11-14 20:59:51
you can add onmousemove=SetValues() to your body element like so: 您可以像这样将onmousemove = SetValues（）添加到您的body元素：
<body onmousemove=SetValues()>
and change your code to this: 并将您的代码更改为此：
<script>
var x = Math.floor((Math.random() * 600) + 1);
var y = Math.floor((Math.random() * 300) + 1);
var dx = 2;
var dy = 4;
var mouseX;
var mouseY;
function setValues(e)
{
mouseX = e.pageX; //get mouse x
mouseY = e.pageY; //get mouse y
}
function begin()
{
gameCanvas = document.getElementById('gameCanvas');
context = gameCanvas.getContext('2d');
return setInterval (draw, 20);
}
begin();
function draw()
{
context.clearRect(0,0,600,300);
context.fillStyle = "#0000FF";
context.beginPath();
context.arc(x,y,80,0,Math.PI*2,true);
context.closePath();
context.fill();
if (x < 0 || x > 600) dx=-dx
if (y < 0 || y > 300) dy=-dy;
x += dx;
y += dy;
//check if the mouse is on the ball
var centerX = x + 80; //center of ball
var centerY = y; //center of ball
if(Math.pow((mouseX - centerX), 2) + Math.pow((mouseY - centerY), 2) <= 6400){
//do whatever to end game
}
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.