Function description: Change a direction randomly every 10 steps. When the keyboard presses the direction keys w, s, a, d, use the keyboard direction to control the movement of the snake. The color of the screen will change every time the snake head hits itself. Come back from the other side when bordering.
Implementation idea: use an array of size 30 to store each node, the snake head node moves according to the current direction, and the values of other nodes in the array are replaced by the value of the previous node in turn.
Show results:
<!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>