当另一个图像触摸时如何使图像消失？ html / js [英] how to make an image disappear when another image touches it? html/Js
问题描述
好吧，所以我有一个程序，该程序可以绘制3个具有任意位置的幻影并绘制一个包 sac.gif，您可以使用键盘上的箭头键在400 x 400的画布上四处移动。我试图做到这一点，以便每当用户将包图像移到重影图像上时，三个重影图像之一便会消失，而另外两个重影图像会停留在它们的位置并等待，直到包图像悬停在它们上方并使它们消失。那就是问题所在。我不太确定如何实现一个功能，检查袋子和重影是否接触，如果有，请移除重影。
感谢您的所有帮助。
Ok so i have a program that draws 3 ghosts with random positions and draws a bag "sac.gif" that you can move around using the arrow keys on your keyboard on a 400 by 400 canvas. I'm trying to make it so that whenever the user moves the bag image over the ghost image, the one of three ghost images disappear while the other two stay in their positions and await until the bag image hovers over them and makes them disappear aswell. That is where the problem is... i'm not too sure how i would be able to make a function that checks if the bag and the ghost image are touching and removing the ghost image if it is. all help is appreciated.
<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 坐标以及它们的宽度和高度。
这样的事情： function collide（o1，o2）{...} //如果发生碰撞，则返回true，否则返回false 。要编写此功能，您可能会发现它很有用： https：// developer .mozilla.org / en-US / docs / Games / Techniques / 2D_collision_detection
First, you need to implement a function to determine whether two objects collide, providing their x and y coordinates and their width and height.
So something like this: function collide(o1, o2) {...} // returns true if they are colliding, false otherwise. To write this function, you may find this useful: https://developer.mozilla.org/en-US/docs/Games/Techniques/2D_collision_detection
然后，您需要在中调用它对每个应该发生碰撞的对象执行update（）函数（我怀疑不是彼此之间的重影）。每次更新游戏状态（物体位置等）并重绘时，都需要检查物体是否碰撞。
然后，如果检测到碰撞，您需要做一些事情：生命下降，爆炸，游戏结束...
Then, you need to call it in your update() function for each objects which collision is supposed to do something (not your ghosts between each other I suspect). Each time your update the state of the game (objects positions, etc) and redraw, you need to check if objects are colliding.
Then, you need to do something if a collision if detected: life drop, explosion, gameover...
我没有设法使您的jsfiddle工作，因此我使用了上次制作的内容并对其进行了更新： https://jsfiddle.net/ nmerinian / t0c3sh8f / 36 /
I didn't manage to make your jsfiddle work, so I used the one I made last time and updated it: https://jsfiddle.net/nmerinian/t0c3sh8f/36/
编辑：我忘了让幽灵消失。为了简化一切，我创建了 Bag 和 Ghost 对象：> https://jsfiddle.net/nmerinian/t0c3sh8f/56/
EDIT: I forgot to make the ghosts disappear. To make everything easier, I created Bag and Ghost objects: https://jsfiddle.net/nmerinian/t0c3sh8f/56/
这篇关于当另一个图像触摸时如何使图像消失？ html / js的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
