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程序设计有所帮助。