我正在学习javascript并制作一个蛇游戏。我被旋转卡住了。旋转发生在整个蛇元素上，这正是我正在做的事情，它看起来很糟糕，我失去了让动画看起来好看的想法。
代码：
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>帮助我用代码解释蛇的旋转，谢谢。
你试图旋转整条蛇，我认为这是个坏主意，你需要旋转每一块。
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);
}