当一个元素被 javascript 中的另一个元素触摸时，如何更改它的位置?

我是JavaScript的新手，我正在尝试在javascript中创建这样的游戏：http://www.lostdecadegames.com/how-to-make-a-simple-html5-canvas-game/。除了我不允许使用 canvas 元素，所以我使用的代码似乎不起作用。我遇到的问题是，当蛇/滑行元素与鼠标/食物元素碰撞时，让我的鼠标/食物元素移动到随机的新位置。我也通常不确定我的 update() 函数是否有效，如果不是，我不知道为什么。

我已经尝试了很多不同的方法来让代码正确执行;将更新函数放置在不同的地方，如窗口加载，每个箭头函数等。我尝试采购许多其他代码，但我能找到的只是使用 canvas 元素创建游戏的人。

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';
}
}

相关内容

最新更新

热门标签：