js编写贪吃蛇的小游戏
贪吃蛇儿时的回忆,今天刚好学习到这了,就刚好做了一个,也是学习了吧,需要掌握的知识:
1、JS函数的熟练掌握,
2、JS数组的应用,
3、JS小部分AJAX的学习
4、JS中的splice、shift等一些函数的应用,
基本上就这些吧,下面提重点部分:
前端的页面,这里可自行布局,我这边提供一个我自己的布局:
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <htmlxmlns="http://www.w3.org/1999/xhtml"xml:lang="en"> <head> <metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"> <title>贪吃蛇</title> <linkrel="stylesheet"type="text/css"href="./css.css"> <scripttype="text/javascript"src="./jquery-1.7.2.min.js"></script> <scripttype="text/javascript"src="./js.js"></script> </head> <body> <divid="info"> <divid="score">0</div> <formaction=""id="form"name="form"> <inputtype="radio"name='time'value="500"checked='checked'/>简单 <inputtype="radio"name='time'value="300"/>中等 <inputtype="radio"name='time'value="150"/>高级 <inputtype="radio"name='time'value="50"/>神速 <inputtype="button"value="开始"class="button"id="start"/> <inputtype="button"value="重玩"class="button"id="res"/> </form> </div> <divid="main"> <divid="home"> <!--<divstyle="background:url(./images/snake0.png)no-repeat;"></div> <divstyle="background:url(./images/snake1.png)no-repeat;left:20px;"></div> <divstyle="background:url(./images/snake2.png)no-repeat;left:40px;"></div> <divstyle="background:url(./images/snake3.png)no-repeat;left:60px;"></div>--> </div> <divclass="wallleft"></div> <divclass="wallright"></div> <divclass="walltop"></div> <divclass="wallbottom"></div> </div> </body> </html>
这里是css代码:
*{padding:0px;margin:0px;font-size:12px} body{background:#ccc} input.button{ width:60px; cursor:pointer; } #info{ width:540px; height:30px; margin:30pxauto5px; line-height:30px; } #score{ width:73px; height:28px; padding-left:64px; background:url(./images/score.png)no-repeat; float:left; font-size:14px; font-weight:700; font-style:italic; font-family:'微软雅黑'; } #form{ float:right; } #forminput{ vertical-align:middle; margin-right:5px; } #main{ width:540px; height:500px; margin:0auto; position:relative; /*background:#71a000*/ } #maindiv{ width:20px; height:20px; position:absolute; } #main#home{ width:500px; height:460px; left:20px; top:20px; position:relative; background:url(./images/background.jpg)no-repeat; } #main#homediv{ position:absolute; } #maindiv.wall{ width:540px; height:20px; background:url("./images/div.jpg")repeat-x; position:absolute; } #maindiv.top{ left:0px; top:0px; } #maindiv.bottom{ left:0px; top:480px; } #maindiv.left{ width:20px; height:500px; background:url(./images/div.jpg)repeat-y; left:0px; top:0px; } #maindiv.right{ width:20px; height:500px; background:url(./images/div.jpg)repeat-y; left:520px; top:0px; } .l{ -moz-transform:rotate(0deg); -o-transform:rotate(0deg); -webkit-transform:rotate(0deg); transform:rotate(0deg); /*IE8+-mustbeononeline,unfortunately*/ -ms-filter:"progid:DXImageTransform.Microsoft.Matrix(M11=1,M12=0,M21=0,M22=1,SizingMethod='autoexpand')"; /*IE6and7*/ filter:progid:DXImageTransform.Microsoft.Matrix(M11=1,M12=0,M21=0,M22=1,SizingMethod='autoexpand'); } .t{ -moz-transform:rotate(90deg);-o-transform:rotate(90deg);-webkit-transform:rotate(90deg);transform:rotate(90deg); /*IE8+-mustbeononeline,unfortunately*/-ms-filter:"progid:DXImageTransform.Microsoft.Matrix(M11=-1.8369701987210297e-16,M12=-1,M21=1,M22=-1.8369701987210297e-16,SizingMethod='autoexpand')";/*IE6and7*/filter:progid:DXImageTransform.Microsoft.Matrix(M11=-1.8369701987210297e-16,M12=-1,M21=1,M22=-1.8369701987210297e-16,SizingMethod='autoexpand'); } .r{ -moz-transform:rotate(180deg);-o-transform:rotate(180deg);-webkit-transform:rotate(180deg);transform:rotate(180deg); /*IE8+-mustbeononeline,unfortunately*/-ms-filter:"progid:DXImageTransform.Microsoft.Matrix(M11=-1,M12=1.2246467991473532e-16,M21=-1.2246467991473532e-16,M22=-1,SizingMethod='autoexpand')";/*IE6and7*/filter:progid:DXImageTransform.Microsoft.Matrix(M11=-1,M12=1.2246467991473532e-16,M21=-1.2246467991473532e-16,M22=-1,SizingMethod='autoexpand'); } .b{ -moz-transform:rotate(270deg);-o-transform:rotate(270deg);-webkit-transform:rotate(270deg);transform:rotate(270deg); /*IE8+-mustbeononeline,unfortunately*/-ms-filter:"progid:DXImageTransform.Microsoft.Matrix(M11=6.123233995736766e-17,M12=1,M21=-1,M22=6.123233995736766e-17,SizingMethod='autoexpand')";/*IE6and7*/filter:progid:DXImageTransform.Microsoft.Matrix(M11=6.123233995736766e-17,M12=1,M21=-1,M22=6.123233995736766e-17,SizingMethod='autoexpand'); }
JS公共文件
varhome=$('#home'); varsnakeArr=[]; vardirecation='l'; varspeed=0; vartimer=''; //460/20 varrows=23; varcols=25; vardie=false;//用于判断是否gameover varfood=[]; varsorce=0;//得分的显示
首先要想有snake就必须创造snake
for(vari=0;i<4;i++){ //varsnakeDiv=document.createElement("div"); //snakeDiv.style='background:url(./images/snake'+i+'.png)no-repeat;'; varsnakeDiv=$('<divstyle="background:url(./images/snake'+i+'.png)no-repeat;z-index:999"></div>'); home.append(snakeDiv); snakeArr[i]={r:10,c:10+i,div:snakeDiv,d:direcation}; setPosition(snakeArr[i]); }
有snake之后,自然就是移动了(move):
functionmove(){ vartimer=setInterval(function(){ for(vari=snakeArr.length-1;i>0;i--){ snakeArr[i].c=snakeArr[i-1].c; snakeArr[i].r=snakeArr[i-1].r; snakeArr[i].d=snakeArr[i-1].d; } switch(direcation){ case'l': snakeArr[0].c--; snakeArr[0].d='l'; break; case'r': snakeArr[0].c++; snakeArr[0].d='r'; break; case't': snakeArr[0].r--; snakeArr[0].d='t'; break; case'b': snakeArr[0].r++; snakeArr[0].d='b'; break; } //snake的方向控制 $(window).keydown(function(event){ switch(event.keyCode){ case37: direcation='l'; break; case38: direcation='t'; break; case39: direcation='r'; break; case40: direcation='b'; break; } }); //snake事故 //1.snake撞墙 if(snakeArr[0].c<0||snakeArr[0].r<0||snakeArr[0].c>=cols||snakeArr[0].r>=rows){ clearInterval(timer); die=true; alert('GAMEOVER'); } //2.snake撞到自己 for(vari=1;i<snakeArr.length;i++){ if(snakeArr[0].c==snakeArr[i].c&&snakeArr[0].r==snakeArr[i].r){ clearInterval(timer); die=true; alert('GAMEOVER'); } } //snake吃水果 if(snakeArr[0].c==food[0].c&&snakeArr[0].r==food[0].r){ food[0].div.css({background:'url(./images/snake2.png)no-repeat'}); snakeArr.splice(snakeArr.length-1,0,food[0]); food.shift(); sorce+=10; $('#score').html(sorce); } //snake产生水果 if(food.length==0){ createFood(); } for(vari=0;i<snakeArr.length;i++){ setPosition(snakeArr[i]); } },speed); }
食物的产生:
functioncreateFood(){ varr=parseInt(rows*Math.random()); varc=parseInt(cols*Math.random()); varcasrsh=false; //2个水果出现的位置不能一样 while(food.length==0){ //判断snake的位置,不能与snake相撞 for(vari=0;i<snakeArr.length;i++){ if(r==snakeArr[i].r&&c==snakeArr[i].c){ casrsh=true; } } //当位置不重叠的时候,产生水果 if(!casrsh){ vari=parseInt(4*Math.random()); varfoodDiv=$('<divstyle="background:url(./images/fruit'+i+'.png);"></div>'); home.append(foodDiv); food.push({r:r,c:c,div:foodDiv}); setPosition(food[0]); } } }
还有一个重要的功能就是重新设置定位:
functionsetPosition(obj){ obj.div.css({left:obj.c*20,top:obj.r*20}); obj.div.removeClass().addClass(obj.d); } createFood();//那页面一被加载出来就显示出食物!
小编还为大家准备了精彩的专题:javascript经典小游戏汇总
希望本文所述对大家学习javascript程序设计有所帮助。