JavaScript实现贪蛇吃小游戏
2013-11-19 22:20
691 查看
借助jquery实现的贪蛇吃小游戏,先看效果图:
实现思路:
1.将蛇看作一个对象,蛇是有多个小方块组成,只要定位最开头(蛇头)的坐标,让后面的方块的坐标依次设置为相邻前面方块的坐标就可以实现连续运动。
2.设置一个target,牵引蛇走,在这个过程中,设置一个变量,用来记录最后一块(蛇尾)的坐标,以便于向后面添加方块。
3.做好各种检测碰撞。
注意:只在IE10和chrome版本中测试通过,其中有很多bug,但这是通往大师之路必须通过的。
界面代码:
js代码:
实现思路:
1.将蛇看作一个对象,蛇是有多个小方块组成,只要定位最开头(蛇头)的坐标,让后面的方块的坐标依次设置为相邻前面方块的坐标就可以实现连续运动。
2.设置一个target,牵引蛇走,在这个过程中,设置一个变量,用来记录最后一块(蛇尾)的坐标,以便于向后面添加方块。
3.做好各种检测碰撞。
注意:只在IE10和chrome版本中测试通过,其中有很多bug,但这是通往大师之路必须通过的。
界面代码:
<!DOCTYPE html> <html> <head> <title></title> <script type="application/javascript" src="jquery.js"></script> <script type="application/javascript" src="greedy.js"></script> <script type="application/javascript"> $(function(){ var greedy=new Greedy(); greedy.start(); }); </script> </head> <body> <div id="control"> Big:<input type="radio" checked="checked" name="stage" value="30"/> Small:<input type="radio" checked="checked" name="stage" value="20"/><br> High:<input type="radio" name="speed" value="200"/> Middle:<input type="radio" name="speed" value="400"/> Low:<input type="radio" checked="checked" name="speed" value="800"/><br> <button id="ok">OK</button> <button id="stop" disabled="disabled">Stop</button> <button id="start" disabled="disabled">Start</button> <div id="canvas" > </div> </div> </body> </html>
js代码:
var Greedy=function(){ this.config={ delay:800, box:20, x:10, y:10 }; this.direction=40;//方向变量 this.target=null;//牵引坐标 this.timer=null; this.snake={ target:{_x:this.config.x,_y:this.config.y},//牵引蛇移动的坐标 node:[{_x:this.config.x,_y:this.config.y},{_x:this.config.x,_y:this.config.y-1},{_x:this.config.x,_y:this.config.y-2},{_x:this.config.x,_y:this.config.y-3}], fp:{_x:this.config.x,_y:this.config.y}, //用于记录左后一块盒子的坐标 assemble:function(){ //重新组长设置蛇每个部位的坐标 this.copy(this.fp, this.node[this.node.length - 1]); for(var i=this.node.length-1;i>0;i--){ this.copy(this.node[i], this.node[i - 1]); } this.copy(this.node[0], this.target); }, addNode:function(){ //添加节点 var n={_x:0,_y:0}; this.copy(n,this.fp); this.node.push(n); }, copy:function(s,t){ s._x= t._x; s._y= t._y; } } }; //铺好舞台 Greedy.prototype.init=function(){ var that=this; $('#canvas').attr('style',"position:relative;width:"+(that.config.box*20)+"px;height:"+(that.config.box*20)+"px;margin:auto;padding:0px;border:1px solid #95B3D7;"); for(var i=0;i<20;i++){ for(var j=0;j<20;j++){ var box=$('<div></div>'); box.attr('id',j+'-'+i).css('width',that.config.box+'px').css('height',that.config.box+'px').css('border','1px solid #95B3D7').css('position','absolute').css('top',i*that.config.box+'px').css('left',j*that.config.box+'px'); $('#canvas').append(box); } } } Greedy.prototype.registEvent=function(){ var that=this; var keys=new Array(37,38,39,40); document.onkeydown=function(event){ if($.inArray(event.keyCode,keys)!=-1){ if(Math.abs(that.direction-event.keyCode)!=2){ that.direction=event.keyCode; } } } } Greedy.prototype.setCss=function(node,cssObj){ for(var i=0;i<node.length;i++){ var p=$('#'+node[i]._x+'-'+node[i]._y); for(var name in cssObj){ p.css(name,cssObj[name]); } } } Greedy.prototype.move=function(){ this.setCss(this.snake.node, {'background-color': ''}); switch (this.direction){ case 37: this.snake.target._x-=1; break; case 38: this.snake.target._y-=1; break; case 39: this.snake.target._x+=1; break; case 40: this.snake.target._y+=1; break; } this.snake.assemble(); this.setCss(this.snake.node, {'background-color': 'red'}); if(this.boundaryCheck(this.snake.node[0])){ clearInterval(this.timer); alert('game over!'); } if(this.meetCheck()){ this.snake.addNode(); this.setTarget(); } } Greedy.prototype.start=function(){ var that=this; $('#ok').click(function(){ if(that.timer>0){ clearInterval(that.timer); } $('#canvas').empty(); $('#start').text('start'); that.snake.target._x=10; that.snake.target._y=10; that.snake.assemble(); that.config.box=$("input[name='stage']:checked").val(); that.config.delay=$("input[name='speed']:checked").val(); that.init(); $('#start')[0].disabled=""; $('#stop')[0].disabled=""; }); $('#stop').click(function(){ clearInterval(that.timer); $('#start')[0].disabled=""; $('#start').text('continue'); }); $('#start').click(function(){ this.disabled="disabled"; if(this.innerHTML=='continue'){ that.timer=setInterval(function(){ that.move(); },that.config.delay); }else{ that.registEvent(); that.setTarget(); that.timer=setInterval(function(){ that.move(); },that.config.delay); } }); } Greedy.prototype.setTarget=function(){ var x,y; do{ x=Math.floor(Math.random()*20); y=Math.floor(Math.random()*20); }while(this.areaCheck(x,y)) $('#'+x+'-'+y).css('background-color','blue'); this.target={_x:x,_y:y}; } //区域检查,目标盒子不能出现在蛇所覆盖的坐标范围 Greedy.prototype.areaCheck=function(x,y){ for(var i=0;i<this.snake.node.length;i++){ if(this.snake.node[i]._x==x&&this.snake.node[i]._y==y){ return true; } } return false; } //边界检查,蛇不能超出舞台或者蛇头撞到自身 Greedy.prototype.boundaryCheck=function(head){ var obj=$('#'+head._x+'-'+head._y); var left = parseInt(obj.css('left')); var top = parseInt(obj.css('top')); if(isNaN(left)||isNaN(top)){ return true; } for(var i=1;i<this.snake.node.length;i++){ if(this.snake.node[i]._x==head._x&&this.snake.node[i]._y==head._y){ console.log(head._x,head._y); return true; } } return false; } //检测蛇头是否碰触到目标盒子 Greedy.prototype.meetCheck=function(){ for(var i=0;i<this.snake.node.length;i++){ if(this.snake.node[i]._x==this.target._x&&this.snake.node[i]._y==this.target._y){ return true; } } return false; }
相关文章推荐
- 主要由javascript实现的网页打字小游戏
- 用javascript实现2048的小游戏
- 基于javascript实现句子翻牌网页版小游戏
- 纯javascript实现的小游戏《Flappy Pig》实例
- 用javascript实现猜数字的小游戏
- 原创javascript小游戏实现代码
- javascript实现2048小游戏
- 基于javascript实现泡泡大冒险网页版小游戏
- JavaScript实现Fly Bird小游戏
- Javascript实现贪吃蛇小游戏
- JavaScript, 实现贪吃蛇小游戏
- JavaScript 实现flappy bird小游戏
- JAVASCRIPT实现FLY BIRD小游戏
- JavaScript实现Fly Bird小游戏
- javascript+canvas实现Go To The Moon小游戏
- 【JavaScript】canvas实现一个小游戏
- 纯JavaScript 实现flappy bird小游戏实例代码
- JavaScript+HTML5 实现打地鼠小游戏
- Javascript实现飞机大战小游戏