Question

我是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值可能存在问题，但是我不知道如何像设置canvas元素示例中那样设置鼠标相对于窗口的位置。我只是感到困惑，请帮忙。

Answer 1

您的碰撞检测需求有效，因为您当前仅检查左侧和顶部是否相交，但是还有更多的组合。

查看this answer和this

我还更改了选择器，以移动为鼠标定义的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>

Answer 2

此代码未经测试，但可能会让您入门...

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

Answer 3

这是我最终得到的答案。我仍然在调整一些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中的另一个元素触摸时，如何更改其位置？

3 个答案: