<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>贪吃蛇</title>
<style>
*{margin: 0; padding: 0;}
.canvas{width: 400px; height: 400px; position: absolute;}
</style>
</head>
<body>
<div class="canvas"></div>
<script>
var zbxArr = [];
var frag = document.createDocumentFragment();
for(var i=0; i<20; i++){
var oneArr = [];
for(var j=0; j<20; j++){
var div = document.createElement('div');
div.style.position = 'absolute';
div.style.left = j*20+'px';
div.style.top = i*20+'px';
div.style.width = '20px';
div.style.height = '20px';
div.style.background = 'black';
frag.appendChild(div);
oneArr.push(div);
}
zbxArr.push(oneArr);
}
document.querySelector('.canvas').appendChild(frag);
var snakeBodyArr=[42,41];
var foodNum=43;
var fangXiang=1;
var nextLocation;
var timer = null;
function drawOneSquare(location,color)
{
for(var i=0; i<zbxArr.length; i++) {
for(var j=0; j<zbxArr[i].length; j++) {
var left = zbxArr[i][j].style.left;
var top = zbxArr[i][j].style.top;
if((parseInt(left.substring(0,left.length-2))==(location%20*20)) && (parseInt(top.substring(0,top.length-2))==(Math.floor(location/20)*20))){
zbxArr[i][j].style.background = color;
}
}
}
}
document.onkeydown=function(e){
var keyCode = (e||event).keyCode;
var chaValue = keyCode-37;
var touchArr = [-1,-20,1,20];
nextLocation = touchArr[chaValue]||fangXiang;
if(snakeBodyArr[1]-snakeBodyArr[0] == nextLocation){
fangXiang = fangXiang;
}else{
fangXiang = nextLocation;
}
};
timer = setInterval(function (eve) {
snakeBodyArr.unshift(nextLocation=snakeBodyArr[0]+fangXiang);
if(snakeBodyArr.indexOf(nextLocation,1)>0 || nextLocation<0||nextLocation>400||fangXiang==1&&nextLocation%20==0||fangXiang==-1&&nextLocation%20==19) {
clearInterval(timer);
return alert("GAME OVER");
}
drawOneSquare(nextLocation,"cyan");
if(nextLocation==foodNum){
do{
foodNum=Math.floor(Math.random()*400);
}
while(snakeBodyArr.indexOf(foodNum)>=0);
drawOneSquare(foodNum,"Yellow");
}else {
drawOneSquare(snakeBodyArr.pop(), "Black");
}
},200);
</script>
</body>
</html>
之前写的贪吃蛇逻辑出现了错误,现在已经进行了更正。
现在可以完美运行和控制
备注:键盘 上下左右方向键可以控制。