好的，所以我有一个程序可以绘制 3 个随机位置的幽灵，并绘制一个袋子“sac.gif”，您可以使用键盘上的箭头键在 400 x 400 的 Canvas 上四处移动。我试图做到这一点，以便每当用户将包图像移到重影图像上时，三个重影图像中的一个就会消失，而另外两个会留在它们的位置并等待直到包图像悬停在它们上方并使它们也消失.这就是问题所在......我不太确定我如何能够制作一个功能来检查袋子和重影图像是否正在接触并移除重影图像，如果是的话。 感谢所有帮助。
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="Jeu.css">
</head>
<body>
<canvas id="canvas" width="400" height="400"
style="border-color: 'black'; border-width: 3px; border-style: solid">
</canvas>
<br>
<button type="button"onclick="reset()"><img src="start.jpg"></button>
<script type="text/javascript">
window.requestAnimFrame = (function() {
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function(callback) {
window.setTimeout(callback, 1000 / 60);
};
})();
window.onload = function() {
var canvas = document.getElementById("canvas");
var contexte = canvas.getContext("2d");
var T_fleche_gauche = 37;
var T_fleche_droite = 39;
var T_fleche_haut = 38;
var T_fleche_bas = 40;
var player = {
img: new Image();
};
var x = 100;
var y = 100;"
var w = 64;
var h = 64;
var dx = 0;
var dy = 0;
player.img.src = "sac.gif"
document.onkeydown = function(e) {
toucheCourante = e.keyCode;
if (toucheCourante == T_fleche_gauche) {
dx = -1;
dy = 0;
}
if (toucheCourante == T_fleche_droite) {
dx = 1;
dy = 0;
}
if (toucheCourante == T_fleche_haut) {
dy = -1;
dx = 0;
}
if (toucheCourante == T_fleche_bas) {
dy = 1;
dx = 0;
}
}
function dessiner(x, y) {
var random = function() {
return {
x: w + (Math.random() * (400 - (2*w))),
y: h + (Math.random() * (400 - (2*h)))
}
};
var points = [];
for (var i = 0; i < x; i++) {
points.push( random() );
}
return points;
};
var ghost = {
img: new Image(),
};
ghost.img.src = "ghost.png";
function affiche(x,y) {
for (var u of ghost.list) {
contexte.drawImage(ghost.img, u.x, u.y, 50, 60);
}
}
ghost.list = dessiner(3, ghost);
function draw() {
contexte.save();
contexte.clearRect(0, 0, 400, 400);
contexte.translate(10+2*x,10+2*y);
contexte.drawImage(player.img, x,y,70,90);
contexte.restore();
x = x+dx;
y = y+dy;
if (x > 125) x = -25;
if (x < -25) x = 125;
if (y > 125) y = -25;
if (y < -25) y = 125;
affiche();
window.requestAnimFrame(function() {draw(dx,dy)});
};
draw(1,0);
};
function reset(){
location.reload()
}
</script>
</body>
</html>
最佳答案
首先，您需要实现一个函数来确定两个对象是否发生碰撞，提供它们的 x 和 y 坐标以及它们的 width 和 高度。
所以像这样:function collide(o1, o2) {...}//如果它们发生碰撞则返回 true，否则返回 false。要编写此函数，您可能会发现它很有用:https://developer.mozilla.org/en-US/docs/Games/Techniques/2D_collision_detection
然后，您需要在您的 update() 函数中为碰撞应该做某事的每个对象调用它(我怀疑不是彼此之间的幽灵)。每次更新游戏状态(对象位置等)并重绘时，您都需要检查对象是否发生碰撞。
然后，如果检测到碰撞，您需要做一些事情:生命下降、爆炸、游戏结束......
我没能使你的 jsfiddle 工作，所以我使用了我上次制作的那个并更新了它:https://jsfiddle.net/nmerinian/t0c3sh8f/36/
编辑:我忘了让幽灵消失。为了简化一切，我创建了 Bag 和 Ghost 对象:https://jsfiddle.net/nmerinian/t0c3sh8f/56/
关于javascript - 当另一个图像触摸它时如何使图像消失？网页/JS，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58422692/