html+css部分
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>body {background: #000;}#board {margin: 0 auto;width: 300px;text-align: center;}#container {width: 1000px;height: 540px;border: 1px solid #777;margin: 0 auto;background: lightblue;position: relative}.snake {position: absolute;width: 20px;height: 20px;background: greenyellow;}.egg {position: absolute;width: 20px;height: 20px;background: rgba(224, 29, 29, 0.726);}h3 {color: #ccc}</style>
</head><body onload="gameRun()"><div id="board"><h3 id="score">SCRAT: 0</h3></div><div id="container"></div>
</body></html>
<script src="index.js"></script>
js部分
var isAlive = true;
var snakes = [];
var egg = null;
var isFirst = true;
var panel = document.getElementById('container')
var scoreBoard = document.getElementById('score')
var score = 0;
var timer = 0;var DIR = {L: 1,R: 2,U: 3,D: 4
}function snake(top, left, dir) {this.top = top;this.left = left;this.dir = dir
}function newEgg(top, left) {this.top = top;this.left = left;
}function gameRun() {if (isFirst) {snakes.push(new snake(40, 40, DIR.D))createEgg();isFirst = false}sankeRun()display()
}function createEgg() {egg = new newEgg(Math.floor(Math.random() * 27) * 20,Math.floor(Math.random() * 45) * 20)
}document.onkeydown = function(e) {var header = snakes[snakes.length - 1];switch (e.keyCode) {case 37:if (header.dir != DIR.R) {header.dir = DIR.L}break;case 38:if (header.dir != DIR.D) {header.dir = DIR.U}break;case 39:if (header.dir != DIR.L) {header.dir = DIR.R}break;case 40:if (header.dir != DIR.U) {header.dir = DIR.D}break;default:break;}
}function sankeRun() {var header = snakes[snakes.length - 1];var newHeader = null;switch (header.dir) {case DIR.L:newHeader = new snake(header.top, header.left - 20, header.dir)break;case DIR.R:newHeader = new snake(header.top, header.left + 20, header.dir)break;case DIR.U:newHeader = new snake(header.top - 20, header.left, header.dir)break;case DIR.D:newHeader = new snake(header.top + 20, header.left, header.dir)break;}deathCheck(newHeader)if (isAlive) {snakes.push(newHeader);if (newHeader.top == egg.top && newHeader.left == egg.left) {createEgg();} else {snakes.shift()}} else {clearInterval(timer)}
}function deathCheck(header) {// var header = snakes[snakes.length - 1];if (header.top < -10 || header.top > 535 || header.left < -10 || header.top > 990) {isAlive = false;return;}for (let i = 0; i < snakes.length; i++) {if (header.top == snakes[i].top && header.left == snakes[i].left) {isAlive = false;return;}}
}function display() {var arrColors = ["red", "yellow", "blue", 'blueviolet', 'chartreuse','chocolate', 'crimson', 'darkgoldenrod', 'darkslateblue']var numColors = parseInt(Math.random() * arrColors.length)if (isAlive) {if (score != snakes.length) {score += 1score = snakes.length + 1;scoreBoard.innerHTML = 'Score: ' + score;}} else {scoreBoard.style.color = "red";scoreBoard.innerHTML = "游戏结束, 你太弱了，才 : " + score;}var fragment = document.createDocumentFragment();for (let i = 0; i < snakes.length; i++) {var div = document.createElement('div')div.className = 'snake';div.style.top = snakes[i].top + 'px'div.style.left = snakes[i].left + 'px'div.style.backgroundColor = arrColors[numColors]fragment.appendChild(div)}var ediv = document.createElement('div')ediv.className = 'egg'ediv.style.backgroundColor = arrColors[numColors]ediv.style.top = egg.top + 'px';ediv.style.left = egg.left + 'px'fragment.appendChild(ediv)panel.innerHTML = ''panel.appendChild(fragment)
}// gameRun()
timer = setInterval(gameRun, 100)
