<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
var direction=0;//0 上 1右 2下 3左
var snake=new Array(); //记录蛇的数组
var array=new Array(); //记录地图的数组
var food=null;//记录食物
var isChange=true;//记录是否可以改变方向
window.οnlοad=function(){
var headX,headY;//记录头的横纵坐标
//获取地图,初始化地图数组
var tr=document.getElementsByTagName("tr");
for(var i=0;i<tr.length;i++){
array[i]=tr[i].getElementsByTagName("td");
}
createFood();//初始化食物位置
//初始化蛇
var headY=Math.round(array.length/2)-1;
var headX=Math.round(array[Math.round(array.length/2)-1].length/2)-1;
snake[0]=array[headY][headX];
snake[1]=array[headY+1][headX];
snake[0].className="snake";
snake[1].className="snake";
//开始移动蛇
var intervalid= setInterval(function(){
isChange=true;
//根据方向改变头坐标
if(direction==1){
headX++;
}else if(direction==0){
headY--;
}else if(direction==2){
headY++;
}else if(direction==3){
headX--;
}
//出界游戏结束
if(headX>19 || headY>19 || headX<0 || headY<0){
alert("game over");
clearInterval(intervalid);
return;
}
var oldfoot=snake[snake.length-1];
// 吃到食物
if(array[headY][headX]===food){
createFood();
//将蛇尾不去掉,所有位往后移动一位
for(var i=snake.length;i>0;i--){
snake[i]=snake[i-1];
}
}else{
oldfoot.className="";
//将蛇尾去掉,其他往后移动一位
for(var i=snake.length-1;i>0;i--){
snake[i]=snake[i-1];
}
}
//添加上新蛇头
snake[0]=array[headY][headX];
//撞到自身游戏结束
for(var i=1 ;i<snake.length;i++){
if(snake[0]===snake[i]){
alert("game over");
clearInterval(intervalid);
return;
}
}
snake[0].className="snake";
},500)
}
//监听按钮改变方向
function key(e){
var event=window.event||e;
if(!isChange){ //防止一次移动,改变了2次方向
return;
}
if(event.keyCode==38 && direction!=2){
direction=0;
}else if(event.keyCode==37 && direction!=1){
direction=3;
}else if(event.keyCode==39 && direction!=3){
direction=1;
}else if(event.keyCode==40 && direction!=0){
direction=2;
}else{
return;
}
isChange=false;
}
function createFood(){
while(true) {
food = array[Math.floor(Math.random() * 15)][Math.floor(Math.random() * 15)];
var flag=true;
for(var i=0;i<snake.length;i++){
if(food===snake[i]){
flag=false;
}
}
if(flag){
break
}
}
food.className="food";
}
</script>
<style type="text/css">
tr td{
width: 30px;
height: 30px;
border: 1px dotted #939393;
}
.snake{
background-color: red;
}
.food{
background-color: #e89500;
}
</style>
</head>
<body οnkeydοwn="key(event)">
<table cellspacing="0" cellpadding="0" style="border: 5px solid black" >
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
</table>
<input type="button" style="background-color: #999999" value="暂停" οnclick="alert('点击确定继续游戏')" />
<input type="button" style="background-color: #999999" value="重新开始" οnclick="window.location.reload()" />
</body>
</html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
var direction=0;//0 上 1右 2下 3左
var snake=new Array(); //记录蛇的数组
var array=new Array(); //记录地图的数组
var food=null;//记录食物
var isChange=true;//记录是否可以改变方向
window.οnlοad=function(){
var headX,headY;//记录头的横纵坐标
//获取地图,初始化地图数组
var tr=document.getElementsByTagName("tr");
for(var i=0;i<tr.length;i++){
array[i]=tr[i].getElementsByTagName("td");
}
createFood();//初始化食物位置
//初始化蛇
var headY=Math.round(array.length/2)-1;
var headX=Math.round(array[Math.round(array.length/2)-1].length/2)-1;
snake[0]=array[headY][headX];
snake[1]=array[headY+1][headX];
snake[0].className="snake";
snake[1].className="snake";
//开始移动蛇
var intervalid= setInterval(function(){
isChange=true;
//根据方向改变头坐标
if(direction==1){
headX++;
}else if(direction==0){
headY--;
}else if(direction==2){
headY++;
}else if(direction==3){
headX--;
}
//出界游戏结束
if(headX>19 || headY>19 || headX<0 || headY<0){
alert("game over");
clearInterval(intervalid);
return;
}
var oldfoot=snake[snake.length-1];
// 吃到食物
if(array[headY][headX]===food){
createFood();
//将蛇尾不去掉,所有位往后移动一位
for(var i=snake.length;i>0;i--){
snake[i]=snake[i-1];
}
}else{
oldfoot.className="";
//将蛇尾去掉,其他往后移动一位
for(var i=snake.length-1;i>0;i--){
snake[i]=snake[i-1];
}
}
//添加上新蛇头
snake[0]=array[headY][headX];
//撞到自身游戏结束
for(var i=1 ;i<snake.length;i++){
if(snake[0]===snake[i]){
alert("game over");
clearInterval(intervalid);
return;
}
}
snake[0].className="snake";
},500)
}
//监听按钮改变方向
function key(e){
var event=window.event||e;
if(!isChange){ //防止一次移动,改变了2次方向
return;
}
if(event.keyCode==38 && direction!=2){
direction=0;
}else if(event.keyCode==37 && direction!=1){
direction=3;
}else if(event.keyCode==39 && direction!=3){
direction=1;
}else if(event.keyCode==40 && direction!=0){
direction=2;
}else{
return;
}
isChange=false;
}
function createFood(){
while(true) {
food = array[Math.floor(Math.random() * 15)][Math.floor(Math.random() * 15)];
var flag=true;
for(var i=0;i<snake.length;i++){
if(food===snake[i]){
flag=false;
}
}
if(flag){
break
}
}
food.className="food";
}
</script>
<style type="text/css">
tr td{
width: 30px;
height: 30px;
border: 1px dotted #939393;
}
.snake{
background-color: red;
}
.food{
background-color: #e89500;
}
</style>
</head>
<body οnkeydοwn="key(event)">
<table cellspacing="0" cellpadding="0" style="border: 5px solid black" >
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
</table>
<input type="button" style="background-color: #999999" value="暂停" οnclick="alert('点击确定继续游戏')" />
<input type="button" style="background-color: #999999" value="重新开始" οnclick="window.location.reload()" />
</body>
</html>