使用 Javascript 在蛇游戏中旋转

Question

I am learning javascript and making a snake game.我正在学习 javascript 并制作贪吃蛇游戏。 I am stuck with rotation.我坚持旋转。 The rotation happens on the whole snake element which is the exact thing I am doing and it looks very bad and I am lost of ideas that makes the animation look good.旋转发生在整个蛇元素上，这正是我正在做的事情，它看起来很糟糕，我失去了让 animation 看起来不错的想法。

code:代码：

 let direction = 'right'; let snakearray = [1,2,3]; window.addEventListener("keydown", function (event) { if (event.defaultPrevented) { return; } switch (event.key) { case "ArrowDown": if(direction === 'up') { return; } direction = 'down' rotateSnake(direction); break; case "ArrowUp": if(direction === 'down') { return; } direction = 'up' rotateSnake(direction); break; case "ArrowLeft": if(direction === 'right') { return; } direction = 'left'; rotateSnake(direction); break; case "ArrowRight": if(direction === 'left') { return; } direction = 'right' rotateSnake(direction); break; default: return; } event.preventDefault(); }, true); move = function (direction, distance) { let topOrleft = direction == 'left' || direction == 'right'? 'left': 'top'; let snake = document.getElementById('snake'); if (direction == 'left' || direction == 'up') { distance *= -1; } let snakeBoundingRect = snake.getBoundingClientRect(); let snakeCurrentCoordinates = direction === 'left' || direction === 'right'? snakeBoundingRect.left: snakeBoundingRect.top; snake.style[topOrleft] = (snakeCurrentCoordinates + distance) + 'px'; } drawSnake = function() { for (let index = 0; index < snakearray.length; index++) { let span = document.createElement('span'); let snake = document.getElementById('snake'); span.style.left = 0 + (index * -16) + 'px'; span.style.top = '0px'; span.classList.add('square'); span.id = 'id-' + (index + 1); snake.appendChild(span); snake.style.position = 'absolute'; } } rotateSnake = function(direction) { let snake = document.getElementById('snake'); let snakenodes = document.getElementById('snake').childNodes; console.log(snakenodes); let rotation = null; switch(direction) { case 'down': rotation = 'rotate(90deg)'; break; case 'up': rotation = 'rotate(270deg)'; break; case 'left': rotation = 'rotate(180deg)'; break; case 'right': rotation = 'rotate(0deg)'; break; } snake.style.transform = rotation; } drawSnake(); let moveInterval = setInterval(() => move(direction, 5), 1000 / 5);

 <.DOCTYPE html> <html> <head> <title>Snake Movements</title> <style>:square { position; absolute: height; 15px: width; 15px: background-color; blue; } </style> </head> <body> <span id="snake"></span> </body> </html>

help me with the rotation of the snake with code explanation, thank you.用代码解释帮助我旋转蛇，谢谢。

Answer 1

you are trying to rotate whole snake, i think that is a bad idea, you need to rotate each of pieces.你试图旋转整条蛇，我认为这是个坏主意，你需要旋转每一块。

function dibujar() {
        let apple = new Apple(Math.random(),Math.random());
        console.log('Aples '+apple.position.x);

        if (contador === snake.size) {
            snake.body.splice(0, 1);
            contador = snake.size - 1;
        }
        if (contador < snake.size) {
            contador++;

            if (direccion === 0) {
                y += -10;
                snake.move(x, y);
            }
            if (direccion === 1) {
                x += 10;
                snake.move(x, y);
            }
            if (direccion === 2) {
                y += 10;
                snake.move(x, y);
            }
            if (direccion === 3) {
                x += -10;
                snake.move(x, y);
            }
        }

        ctx.fillStyle = pat;
        ctx.fillRect(area.x1, area.y1, area.x2, area.y2);
        ctx.fillStyle = "rgb(255,100,0)";
        ctx.beginPath();

        area.paintTerrain(ctx, area.x2, area.y2, "rgb(36,23,23)");
        ctx.fillRect(apple.position.x,apple.position.y,10,10);
        for (let i = 0; i < snake.body.length; i++) {
            ctx.fillRect(snake.body[i].x, snake.body[i].y, x2/50, y2/50);
        }

    }




    move(stepX, stepY) {
            let paso = {};
            paso.x = stepX;
            paso.y = stepY;
            this.body.push(paso);
        }

使用 Javascript 在蛇游戏中旋转

问题描述

1 个解决方案

解决方案1
0 2022-03-14 04:26:06

使用 Javascript 在蛇游戏中旋转

问题描述

1 个解决方案

解决方案1 0 2022-03-14 04:26:06

解决方案1
0 2022-03-14 04:26:06