<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
#box{
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
width: 400px;
height: 400px;
margin: auto;
border: 1px solid #EEEEEE;
background-color: #F4F4F4;
}
span{
border: 1px solid #EEEEEE;
display: block;
float: left;
box-sizing: border-box;
}
.snake{
position: absolute;
background-color: palegreen;
}
.food{
position: absolute;
background-color: orange;
border-radius: 10px;
}
</style>
</head>
<body>
<div id="box">
</div>
<script>
var box=document.getElementById(‘box‘);
var cell={
width:20,
height:20
};
var snakeArr=[];
var pos={
right:0,
left:1,
top:2,
bottom:3
};
var dir=pos.right;
//初始化地图
function map(){
var cols=Math.floor(box.offsetWidth / cell.width);
var rows=Math.floor(box.offsetHeight / cell.height);
var num=cols*rows;
for(var i=0;i<num;i++)
{
span=document.createElement(‘span‘);
span.style.width=cell.width+‘px‘;
span.style.height=cell.height+‘px‘;
box.appendChild(span);
}
}
map();
//创建蛇
function Snake(){
for(var i=0;i<3;i++)
{
snake=document.createElement(‘span‘);
snake.style.width=cell.width+‘px‘;
snake.style.height=cell.height+‘px‘;
snake.style.left=i*cell.width+‘px‘;
box.appendChild(snake);
snake.className=‘snake‘;
snakeArr.push(snake);
}
}
Snake();
//创建食物
function Food(){
food=document.createElement(‘span‘);
food.style.width=cell.width+‘px‘;
food.style.height=cell.height+‘px‘;
var top=null;
do{
left=Math.floor((box.offsetWidth-2)/cell.width*Math.random())*cell.width;
top=Math.floor((box.offsetHeight-2)/cell.height*Math.random())*cell.height;
}while(isSnakeBody(left,top));
food.style.left=left+‘px‘;
food.style.top=top+‘px‘;
food.className=‘food‘;
box.appendChild(food);
}
function isSnakeBody(left,top){
for(var i=0;i<snakeArr.length;i++)
{
if(snakeArr[i].offsetLeft==left&&snakeArr[i].offsetTop==top)
{
return true;
}
}
}
Food();
//蛇的移动
function snakeMove(){
var head=snakeArr[snakeArr.length-1];
var newtop=head.offsetTop;
newleft=head.offsetLeft;
switch(dir){
case pos.left:
newleft-=cell.width;
break;
case pos.right:
newleft+=cell.width;
break;
case pos.bottom:
newtop+=cell.height;
break;
case pos.top:
newtop-=cell.height;
break;
default:
break;
}
for(var i=0;i<snakeArr.length-1;i++)
{
snakeArr[i].style.left=snakeArr[i+1].offsetLeft+‘px‘;
snakeArr[i].style.top=snakeArr[i+1].offsetTop+‘px‘;
}
//吃食物
if(newleft==food.offsetLeft&&newtop==food.offsetTop)
{
food.className=‘snake‘;
snakeArr.push(food);
Food();
return ;
}
//蛇是否碰到自己的身体
for(var i=0;i<snakeArr.length-1;i++)
{
if(snakeArr[i].offsetLeft==newleft&&snakeArr[i].offsetTop==newtop)
{
alert(‘游戏结束!‘);
window.location.href=window.location.href;
}
head.style.left=newleft+‘px‘;
head.style.top=newtop+‘px‘;
}
//超出边界
if(newleft>box.offsetWidth-2-1||newtop>box.offsetHeight-2-1||newleft<0||newtop<0)
{
alert(‘游戏结束!‘);
window.location.href=window.location.href;
}
}
//键盘控制蛇的移动
document.onkeyup=function(e){
switch(e.keyCode){
case 37:
dir=pos.left;
break;
case 38:
dir=pos.top;
break;
case 39:
dir=pos.right;
break;
case 40:
dir=pos.bottom;
break;
}
}
setInterval(snakeMove,500);
</script>
</body>
</html>
来源: http://www.bubuko.com/infodetail-2273777.html