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 += 1
score = 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)