Хорошо, у меня есть программа, которая рисует 3 призрака со случайными позициями и рисует сумку "sac.gif", которую вы можете перемещать с помощью клавиш со стрелками на клавиатуре на холсте 400 на 400. Я пытаюсь сделать так, чтобы всякий раз, когда пользователь перемещал изображение сумки над призрачным изображением, одно из трех изображений-призраков исчезало, в то время как два других остаются на своих местах и ждут, пока изображение сумки не нависает над ними и не заставит их исчезнуть. ,Вот в чем проблема ... я не слишком уверен, как я смогу создать функцию, которая проверяет, касаются ли сумка и призрачное изображение, и удаляет призрачное изображение, если оно есть. вся помощь приветствуется.
<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>