Descripción de la función: cambia una dirección aleatoriamente cada 10 pasos. Cuando el teclado presiona las teclas de dirección w, s, a, d, usa la dirección del teclado para controlar el movimiento de la serpiente. El color de la pantalla cambiará cada vez que aparezca la cabeza de la serpiente. se golpea a sí mismo Vuelve por el otro lado al bordear.
Idea de implementación: use una matriz de tamaño 30 para almacenar cada nodo, el nodo de cabeza de serpiente se mueve de acuerdo con la dirección actual y los valores de otros nodos en la matriz se reemplazan por el valor del nodo anterior a su vez.
Mostrar resultados:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
const NORTH = 0;
const SOUTH = 1;
const WEST = 2;
const EAST = 3;
const NODE_LENGTH = 50;
const MAX_LENGTH = 30;
const CURRENT_LENGTH = 30;
const SPEED = 50;
const SCREEN_WIDTH = window.innerWidth;
const SCREEN_HEIGHT = window.innerHeight;
var x=0;
var y=0;
var head = 0;
var tail = MAX_LENGTH - 1;
var body = [];
var direction = 1;
var count = 0;
var touchSelfCnt = 0;
var colorArray = ['red','orange','yellow','green','#025CBD','#05BC67','#6C6783','#766783','#836783','#836776','white'];
var KEY_CONTROL_FLAG = 0;
for (var i = 0; i <MAX_LENGTH ; i++) {
console.log();
var element = document.createElement("span");
element.id = i;
element.style.position = 'absolute';
element.style.left = i*NODE_LENGTH+'px';
element.style.top = 0;
element.style.background ='black';
element.style.border='2px solid red';
element.style.width=NODE_LENGTH+'px';
element.style.height=NODE_LENGTH+'px';
var docBody = document.body;
docBody.appendChild(element);
body[i] = {
x:i*NODE_LENGTH,y:0,element:element};
console.log(element);
}
console.log(SCREEN_WIDTH,SCREEN_HEIGHT);
document.addEventListener("keydown",function (event) {
KEY_CONTROL_FLAG = 1;
switch (event.keyCode) {
case 87:
direction = NORTH;
break;
case 83:
direction = SOUTH;
break;
case 65:
direction = WEST;
break;
case 68:
direction = EAST;
break;
default:break;
}
});
function move(){
if(count%10===0 && KEY_CONTROL_FLAG===0){
direction = Math.floor(Math.random()*4)
}
console.log('direction',direction);
switch (direction) {
case NORTH:
y-=SPEED;
break;
case SOUTH:
y+=SPEED;
break;
case WEST:
x-=SPEED;
break;
case EAST:
x+=SPEED;
break;
default:break;
}
if (x > (SCREEN_WIDTH-NODE_LENGTH)) {
x = 0;
}else if (y > SCREEN_HEIGHT-NODE_LENGTH) {
y = 0;
}else if (x < 0) {
x = SCREEN_WIDTH-NODE_LENGTH;
}else if (y < 0) {
y = SCREEN_HEIGHT-NODE_LENGTH;
}
body[0] = {
x:x,y:y};
// console.log('x,y,direction',x,y,direction)
//判断有没有撞到自己
for (var i = 1; i <body.length ; i++) {
if(body[i].x ===x && body[i].y===y){
document.body.style.background = colorArray[touchSelfCnt%11];
touchSelfCnt++;
document.body.appendChild(div);
}
}
}
function drawSnake(){
for (var i = body.length-1; i >0 ; i--) {
body[i] = body[i-1];
}
for (var i = 0; i <body.length ; i++) {
var element = document.getElementById(i);
element.style.left = body[i].x+"px";
element.style.top = body[i].y+"px";
}
}
setInterval(function () {
move();
drawSnake();
count++;
},100)
</script>
</body>
</html>