<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <title>Document</title> <script type="text/javascript"> var snake; var timer; var food; //创建蛇 function Snake(){ this.width=20; this.height=20; this.position=‘absolute‘; this.direct=‘‘; //3代表x坐标,2代表y坐标,red代表颜色,null代表当前的div为空,表示还没有创建 this.snackbody=[[3,2,‘red‘,null],[2,2,‘blue‘,null],[1,2,‘blue‘,null]]; this.setDirect=function(keycode){ switch(keycode) { case 37: this.direct=‘left‘; break; case 38: this.direct=‘up‘; break; case 39: this.direct=‘right‘; break; case 40: this.direct=‘down‘; break; } } this.show=function(){ for(var i=0;i<this.snackbody.length;i++) { if(this.snackbody[i][3]==null) { this.snackbody[i][3] = document.createElement(‘div‘); this.snackbody[i][3].style.width=this.width+‘px‘; this.snackbody[i][3].style.height=this.height+‘px‘; this.snackbody[i][3].style.position=this.position; this.snackbody[i][3].style.backgroundColor=this.snackbody[i][2]; document.getElementById(‘Map‘).appendChild(this.snackbody[i][3]); } //设置蛇的位置坐标 this.snackbody[i][3].style.left=this.snackbody[i][0]*this.width+‘px‘; this.snackbody[i][3].style.top=this.snackbody[i][1]*this.height+‘px‘; } } //蛇的移动 this.move=function (){ var length=this.snackbody.length-1; //让蛇的前面一个div的位置赋值给后一个的div的位置 for(var i=length;i>0;i--) { //变换x坐标 this.snackbody[i][0]=this.snackbody[i-1][0];//横坐标 this.snackbody[i][1]=this.snackbody[i-1][1];//纵坐标 } switch(this.direct) { case ‘right‘: this.snackbody[0][0]=this.snackbody[0][0]+1; break; case ‘down‘: this.snackbody[0][1]=this.snackbody[0][1]+1; break; case ‘left‘: this.snackbody[0][0]=this.snackbody[0][0]-1; break; case ‘up‘: this.snackbody[0][1]=this.snackbody[0][1]-1; break; default: return; } //判断蛇吃到食物--------------------------------------------------------------- if(this.snackbody[0][0]==food.x&&this.snackbody[0][1]==food.y) { var x=this.snackbody[length][0]; var y=this.snackbody[length][1]; this.snackbody.push([x,y,‘blue‘,null]); food.show(); } //判断是否已经撞墙 if(this.snackbody[0][0]<0 || this.snackbody[0][0]>19 ||this.snackbody[0][1]<0 ||this.snackbody[0][1]>19) { alert(‘撞墙死‘); clearTimeout(timer); return; } // this.show(); } } //创建食物 function Food(){ this.width=20; this.height=20; this.position=‘absolute‘; this.color=‘#00ff00‘; this._food=null; this.x=0; this.y=0; //show函数 this.show=function(){ if(this._food==null) { this._food=document.createElement(‘div‘); this._food.style.width=this.width+‘px‘; this._food.style.height=this.height+‘px‘; this._food.style.position=this.position; this._food.style.backgroundColor=this.color; document.getElementById(‘Map‘).appendChild(this._food); } this.x=Math.floor(Math.random()*20); this.y=Math.floor(Math.random()*20); this._food.style.left=this.x*this.width+‘px‘; this._food.style.top=this.y*this.height+‘px‘; } } function onload(){ snake = new Snake(); //实例化蛇类对象 snake.show(); food=new Food(); food.show(); timer = setInterval(‘snake.move()‘,500); } function onkeyd(event){ if(event.keyCode==38)//上 { snake.setDirect(38); //alert(‘shagn‘); } if(event.keyCode==39)//上 { snake.setDirect(39); } if(event.keyCode==40)//上 { snake.setDirect(40); } if(event.keyCode==37)//上 { snake.setDirect(37); } } </script> <style type="text/css"> #Map{ width:400px; height:400px; position:absolute; background-color:#c8c8c8; } </style> </head> <body onkeydown="onkeyd(event)"> <div id=‘Map‘></div> </body> </html>
写的不是太好,但是基本功能能够实现。大家可以参考一下我的思路。
时间: 2024-11-07 10:53:28