[英]How can I change the position of an element when it is touched by another element in javascript?
我是 JavaScript 的新手，我正在尝试用 javascript 创建一个这样的游戏： http : //www.lostdecadegames.com/how-to-make-a-simple-html5-canvas-game/ 。 除非我不允许使用 canvas 元素，所以我使用的代码似乎不起作用。 我遇到的问题是当蛇/滑行元素与鼠标/食物元素碰撞时，让我的鼠标/食物元素移动到随机的新位置。 我通常也不确定我的 update() 函数是否在工作，如果不是，我不知道为什么。
我尝试了很多不同的方法来让代码正确执行； 将更新函数放置在不同的地方，如窗口加载、每个箭头函数等。我尝试了许多其他代码，但我只能找到使用画布元素来创建他们的游戏的人。
var snake = null; var slither = document.querySelector("#snake > .snake"); var mouse = document.querySelector("#food > .mouse"); var body = document.getElementById("grass"); x = body.width / 2; y = body.height / 2; function init() { snake = document.getElementById("snake"); snake.style.position = 'relative'; snake.style.left = '0px'; snake.style.top = '0px'; } function getKeyAndMove(e) { var key_code = e.which || e.keyCode; switch (key_code) { case 37: //left arrow key moveLeft(); break; case 38: //Up arrow key moveUp(); break; case 39: //right arrow key moveRight(); break; case 40: //down arrow key moveDown(); break; } } function moveLeft() { snake.style.left = parseInt(snake.style.left) - 7 + 'px'; update(); } function moveUp() { snake.style.top = parseInt(snake.style.top) - 7 + 'px'; update(); } function moveRight() { snake.style.left = parseInt(snake.style.left) + 7 + 'px'; update(); } function moveDown() { snake.style.top = parseInt(snake.style.top) + 7 + 'px'; update(); } window.onload = init; var update = () => { if ( mouse.x === slither.x || mouse.y === slither.y || mouse.y === slither.y && mouse.x === slither.x ) { mouse.x = Math.floor((Math.random() * 30) + 1); mouse.y = Math.floor((Math.random() * 30) + 1); } };
<body id="grass" onkeydown='getKeyAndMove(event)'> <div id="snake"> <img class="snake" src="img/snek.png" alt="snake"> </div> <div id="food"> <img class="mouse" src="img/mouse.png" alt="mouse"> </div> <script type="text/javascript" src="myscript.js"></script> </body>
我只需要 JavaScript 的答案，因为我还没有学过 JQuery 等等。 我认为我的 x 和 y 值可能有问题，但我不知道如何像在画布元素示例中那样设置鼠标相对于窗口移动的位置。 我只是一头雾水，请帮忙。
您的碰撞检测需要工作，因为您目前只检查左侧和顶部是否相交，但还有更多组合。
我还更改了选择器，以按照您为蛇定义的方式移动固定鼠标的 div。 我也将它设置为position = 'relative'; 以便它可以四处走动。 我在随机坐标字符串的末尾添加了“px”
var snake = null; var food = null; var slither = document.querySelector("#snake > .snake"); var mouse = document.querySelector("#food > .mouse"); var body = document.getElementById("grass"); x = body.width / 2; y = body.height / 2; function init() { snake = document.getElementById("snake"); snake.style.position = 'relative'; snake.style.left = '0px'; snake.style.top = '0px'; food = document.getElementById("food"); food.style.position = 'relative'; } function getKeyAndMove(e) { var key_code = e.which || e.keyCode; switch (key_code) { case 37: //left arrow key moveLeft(); break; case 38: //Up arrow key moveUp(); break; case 39: //right arrow key moveRight(); break; case 40: //down arrow key moveDown(); break; } } function moveLeft() { snake.style.left = parseInt(snake.style.left) - 7 + 'px'; update(); } function moveUp() { snake.style.top = parseInt(snake.style.top) - 7 + 'px'; update(); } function moveRight() { snake.style.left = parseInt(snake.style.left) + 7 + 'px'; update(); } function moveDown() { snake.style.top = parseInt(snake.style.top) + 7 + 'px'; update(); } window.onload = init; var update = () => { if ( mouse.x === slither.x || mouse.y === slither.y || mouse.y === slither.y && mouse.x === slither.x ) { food.style.left = Math.floor((Math.random() * 30) + 1) + "px"; food.style.right = Math.floor((Math.random() * 30) + 1) + "px"; } };
<body id="grass" onkeydown='getKeyAndMove(event)'> <div id="snake"> <img class="snake" src="img/snek.png" alt="snake"> </div> <div id="food"> <img class="mouse" src="img/mouse.png" alt="mouse"> </div> <script type="text/javascript" src="myscript.js"></script> </body>
此代码未经测试，但可能会让您入门...
function collisionCheck(elem1, elem2) {
var elem1Bounds = elem1.getBoundingClientRect();
var elem2Bounds = elem2.getBoundingClientRect();
var elem1Center = {
x: elem1Bounds.left + (elem1Bounds.width / 2),
y: elem1Bounds.top + (elem1Bounds.height / 2)
}
var elem2Center = {
x: elem2Bounds.left + (elem2Bounds.width / 2),
y: elem2Bounds.top + (elem2Bounds.height / 2)
}
// initialize if element 1 is within the viewport
if (
elem1Bounds.top >= 0 &&
elem1Bounds.left >= 0 &&
elem1Bounds.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
elem1Bounds.right <= (window.innerWidth || document.documentElement.clientWidth)
) {
// see https://stackoverflow.com/a/17628488/2116041
var distance = Math.sqrt(
Math.pow(elem1Bounds.x - elem2Bounds.x, 2) +
Math.pow(elem1Bounds.y - elem2Bounds.y, 2)
);
if (distance > elem1Bounds.width && distance > elem1Bounds.height) {
// no collision
return false;
} else {
// collision detected!
return true;
}
}
};
这是我最终得到的答案。 我仍然在调整一些 css 东西，但是这段代码做了我想要的:)。 元素的定位也是它没有留在窗口中的原因。 我还有其余的代码，这只是重要的部分。 谢谢您的帮助！
function init() {
snake = document.getElementById("snake");
snake.style.position = 'relative';
snake.style.left = '0px';
snake.style.top = '0px';
food = document.getElementById("food");
food.style.position = 'absolute';
}
function collisionCheck(slither, mouse) {
var snakeBounds = slither.getBoundingClientRect();
var mouseBounds = mouse.getBoundingClientRect();
if (!((snakeBounds.top + snakeBounds.height) < mouseBounds.top ||
snakeBounds.top > (mouseBounds.height + mouseBounds.top) ||
(snakeBounds.left + snakeBounds.width) < mouseBounds.left ||
snakeBounds.left > (mouseBounds.width + mouseBounds.left))) {
food.style.left = Math.floor(Math.random() * 800) + 'px';
food.style.top = Math.floor(Math.random() * 500) + 'px';
}
}
JavaScript：单击后如何更改元素的可见性？
[英]JavaScript: How can I change the visibility of an element when clicked?
当classlist.add位于另一个元素上时，如何更改元素的样式？
[英]How can I change the style of an element when the classlist.add is on another element?
如何为一个元素生成一个随机的 position，使其不与 javascript 中不同元素的 position 重叠？
[英]How can I generate a random position for an element so that it does not overlap with the position of a different element in javascript?
如何通过jQuery或Javascript添加具有绝对位置的元素？
[英]How can I add an element with absolute position via jQuery or Javascript?
如何使用 JavaScript 来查找元素是否固定了 position？
[英]How can I use JavaScript to find if an element has position fixed?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.