懂视1
懂视101
懂视201
懂视301
懂视401
懂视501
懂视601
懂视701
懂视801
懂视901
懂视1001
懂视1101
懂视1201
懂视1301
懂视1401
懂视1501
懂视1601
懂视1701
懂视1801
懂视1901
文库1
文库101
文库201
文库301
文库401
文库501
文库601
文库701
文库801
文库901
文库1001
文库1101
文库1201
文库1301
文库1401
文库1501
文库1601
文库1701
文库1801
文库1901
比熊情感
全部频道
首页
科技
教育
生活
旅游
时尚
美容
美食
健康
体育
游戏
汽车
家电
您的当前位置:
首页
javascript贪吃蛇(详细注释版)_javascript技巧
javascript贪吃蛇(详细注释版)_javascript技巧
来源:比熊情感
贪吃蛇 Snake v1.0
function $(id){return document.getElementById(id);} /** * javascript贪吃蛇 v1.0 * author: sunxing007 * 05/14/2009 * 转载请保留 author: sunxing007 谢谢 **/ //贪吃蛇类 var Snake = { tbl: null, /** * body: 蛇身,数组放蛇的每一节, * 数据结构{x:x0, y:y0, color:color0}, * x,y表示坐标,color表示颜色 **/ body: [], //当前移动的方向,取值0,1,2,3, 分别表示向上,右,下,左, 按键盘方向键可以改变它 direction: 0, //定时器 timer: null, //速度 speed: 200, //初始化 init: function(){ var colors = ['red','orange','yellow','green','blue','purple','#ccc']; this.tbl = $("main"); var x = 0; var y = 0; var colorIndex = 0; //产生初始移动方向 this.direction = Math.floor(Math.random()*4); //产生20个松散节点 for(var i=0; i<20; i++){ x = Math.floor(Math.random()*50); y = Math.floor(Math.random()*50); colorIndex = Math.floor(Math.random()*7); if(!this.isCellFilled(x,y)){ this.tbl.rows[y].cells[x].style.backgroundColor = colors[colorIndex]; } } //产生蛇头 while(true){ x = Math.floor(Math.random()*50); y = Math.floor(Math.random()*50); if(!this.isCellFilled(x,y)){ this.tbl.rows[y].cells[x].style.backgroundColor = "black"; this.body.push({x:x,y:y,color:'black'}); break; } } //alert(this.body[0].x); //添加键盘事件 document.onkeydown= function(){ var code = event.keyCode; switch(code){ case 37:{//left //阻止蛇倒退走 if(Snake.direction==1){ break; } Snake.direction = 3; break; } case 38:{//up if(Snake.direction==2){ break; } Snake.direction = 0; break; } case 39:{//right if(Snake.direction==3){ break; } Snake.direction = 1; break; } case 40:{//down if(Snake.direction==0){ break; } Snake.direction = 2; break; } } } }, //移动 move: function(){ this.timer = setInterval(function(){ Snake.erase(); Snake.moveOneStep(); Snake.paint(); }, this.speed); }, //移动一节身体 moveOneStep: function(){ if(this.checkNextStep()==-1){ clearInterval(this.timer); alert("Game over!\nPress F5 to Restart."); /** $('btn').disabled = false; $('btn').onclick = function(){ Snake.restart(); }; **/ return; } if(this.checkNextStep()==1){ var _point = this.getNextPos(); var _x = _point.x; var _y = _point.y; var _color = this.getColor(_x,_y); this.body.unshift({x:_x,y:_y,color:_color}); return; } //window.status = this.toString(); var point = this.getNextPos(); var color = this.body[0].color; this.body.pop(); this.body.unshift({x:point.x,y:point.y,color:color}); //调试 //window.status = this.toString(); }, //探寻下一步将走到什么地方 getNextPos: function(){ var x = this.body[0].x; var y = this.body[0].y; var color = this.body[0].color; //向上 if(this.direction==0){ y--; } //向右 else if(this.direction==1){ x++; } //向下 else if(this.direction==2){ y++; } //向左 else{ x--; } //返回一个坐标 return {x:x,y:y}; }, //检查将要移动到的下一步是什么 checkNextStep: function(){ var point = this.getNextPos(); var x = point.x; var y = point.y; if(x<0||x>=50||y<0||y>=50){ return -1;//触边界,游戏结束 } for(var i=0; i
/******************************************* * javascript贪吃蛇 v1.0 * author: sunxing007 * 05/14/2009 * 转载请保留 author: sunxing007 字样,谢谢 *******************************************/
Begin
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
显示全文