当球员悬停在HTML-5画布上时，如何正确地从画布上移除球？
当球员悬停在HTML-5画布上时，如何正确地从画布上移除球？
提问于 2018-07-16 04:00:58
我已经开发了一个小游戏，它要求玩家只“吃”HTML5-canvas中的绿色球才能成功。
我已经到了当你在球上悬停的时候，它会被吃掉的部分。但是出现了一些非常奇怪的行为。不是只有一个球被吃掉，而是一大堆球突然消失了。
下面是我的代码：
body {
overflow: hidden;
background: rgba(82, 80, 78, 0.75)
}
#gameCanvas {
border: 0.25em solid black;
background-color: rgba(255,235,205,0.5);
margin-top: 1.25vh;
}
* {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
#flexContainer {
margin-top: 0.5em;
font-family: Verdana;
font-size: 2.5em;
display: flex;
justify-content: space-around;
}
#flexContainer span{
background: rgba(255, 180, 0, 0.50);
transition-duration: 0.5s;
padding: 0.1em;
border-radius:0.25em;
}
#flexContainer span:hover {
background: rgba(255, 180, 0, 0.8);
transition-duration: 0.5s;
border-radius: 1em;
cursor:pointer;
}<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<link type="text/css" rel="stylesheet" href="EatTheBall.css" />
<meta charset="utf-8" />
<title>EatTheBall!</title>
</head>
<body>
<div id="flexContainer">
<span id="49" onclick="changeNumBalls();">Level 1</span>
<span id="30" onclick="changeNumBalls();">Level 2</span>
<span id="20" onclick="changeNumBalls();">Level 3</span>
<span id="10" onclick="changeNumBalls();">Level 4</span>
<span id="0" onclick="changeNumBalls();">Level 5</span>
</div>
<canvas id="gameCanvas"></canvas>
<!--Start of JavaScript code-->
<script>
var XPos = 0;
var YPos = 0;
var n = 40;
var gameCanvas = document.body.querySelector("#gameCanvas");
var ctx = gameCanvas.getContext("2d");
var colorArray = ["red", "orange", "yellow", "green", "blue", "indigo", "violet"];
var balls = [];
window.onload = function initial() {
gameCanvas.height = 0.9 * window.innerHeight;
gameCanvas.width = 0.995 * window.innerWidth;
window.addEventListener("resize", function (evt) {
gameCanvas.height = 0.9 * window.innerHeight;
gameCanvas.width = 0.995 * window.innerWidth;
gameCanvas.style.marginTop = (1.25 * window*innerHeight) +"vh";
})
movePlayer();
MainLoop();
addBalls();
}
function MainLoop() {
ctx.clearRect(0, 0, gameCanvas.width, gameCanvas.height);
drawBalls(balls);
animateBalls(balls);
requestAnimationFrame(MainLoop);
}
function addBalls() {
while (n < 50) {
n++;
var b = {
x: window.innerWidth / 2,
y: window.innerHeight / 2,
radius: Math.random() * 30 + 15,
speedX: -7.5 + Math.random() * 15,
speedY: -7.5 + Math.random() * 15,
color : colorArray[Math.round(Math.random() * 6)]
}
balls.push(b);
}
}
function drawBalls(ballArray) {
ballArray.forEach(function (b) {
drawOneBall(b);
});
drawPlayer();
}
function animateBalls(ballArray) {
ballArray.forEach(function (b) {
b.x += b.speedX;
b.y += b.speedY;
testCollisionBallWithWalls(b);
});
}
function drawOneBall(b) {
ctx.save();
ctx.beginPath();
ctx.arc(b.x, b.y, b.radius, 0, Math.PI * 2);
ctx.fillStyle = b.color;
ctx.fill();
ctx.restore();
}
function testCollisionBallWithWalls(b) {
if ((b.x + b.radius > gameCanvas.width) || (b.x - b.radius < 0)) {
b.speedX = -b.speedX;
};
if ((b.y + b.radius > gameCanvas.height) || (b.y - b.radius < 0)) {
b.speedY = -b.speedY;
};
if (XPos > b.x - b.radius && XPos < b.x + b.radius && YPos > b.y - b.radius && YPos < b.y + b.radius) {
balls.splice(b, 1);
}
if (XPos < b.x - b.radius && XPos > b.x + b.radius && YPos < b.y - b.radius && YPos > b.y + b.radius) {
balls.splice(b, 1);
}
}
function changeNumBalls() {
n = event.currentTarget.id;
balls = [];
addBalls();
drawBalls(balls);
animateBalls(balls);
}
function drawPlayer() {
ctx.save();
ctx.fillStyle = "red";
ctx.fillRect(XPos, YPos, 30, 30);
ctx.restore();
}
function movePlayer() {
gameCanvas.addEventListener("mousemove", function (evt) {
XPos = evt.clientX - 15;
YPos = evt.clientY - 100;
})
}
</script>
</body>
</html>
代码解释时间！
我的想法是在开始时声明一个名为“ball”的变量，并将一个空数组的值赋给它。然后使用while循环创建球。while循环不断添加新的对象文字，这些文字描述了球的属性(也称为。球中心的位置、半径的长度等)转换为空数组。接下来，我调用两个函数，其中一个使用已添加到数组中的每个对象文字中的属性实际绘制球。另一个用于设置球的动画。我在这两个函数中都使用了forEach()方法。
至于播放器，我在画布中创建了一个fillRect()。我使用鼠标悬停(‘canvas.addEventListener’，...)将x1和y1属性*设置为光标的位置。
*fillRect(x1，y1，x2，y2)
接下来是棘手的部分..。
碰撞检测！
只要球员移动到其中一个球中，球就应该使用array.splice()方法自动消失。然而，这并没有发生。如前所述，不是只有一个球消失了，而是多个球消失了。
实际上，我已经深入了解了问题是如何产生的。当球与球员碰撞时，如果你不使用array.splice()，而是在控制台中显示一条随机消息(console.log(随机狗屎))，则该消息不会只显示一次，它将显示多次。
如果我的解释不够清楚，那么请自己检查代码并尝试理解它。我会非常感谢，提前谢谢。
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-07-16 05:11:52
splice()方法需要index作为开始更改数组的第一个参数。在这种情况下，balls.indexOf(b)可以给出球在数组球中的位置。所以只要稍微修改一下testCollisionBallWithWalls函数，它就能正常工作：
function testCollisionBallWithWalls(b) {
if ((b.x + b.radius > gameCanvas.width) || (b.x - b.radius < 0)) {
b.speedX = -b.speedX;
};
if ((b.y + b.radius > gameCanvas.height) || (b.y - b.radius < 0)) {
b.speedY = -b.speedY;
};
if (XPos > b.x - b.radius && XPos < b.x + b.radius && YPos > b.y -
b.radius && YPos < b.y + b.radius) {
balls.splice(balls.indexOf(b), 1);
}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51351792
复制相关文章
相似问题