工具猫变态版贪吃蛇

来源：互联网发布：hl哈里软件编辑：程序博客网时间：2024/04/28 19:06

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html;charset=gb2312"> <title>变态贪食蛇</title> <style type="text/css"> .tag{color:#ff0000} .leveltag{color:#0000ff} .s{border:0px none #fff;width:35px;height:16px;background:#fff;} </style> <script type="text/javascript" src="./js/snakemap.js"></script> </head> <body> <div id="tips" style="width:500px;border:1px solid #000;height:20px;line-height:20px;left:10px;font-size:12px;position:absolute;">工具猫变态版贪吃蛇 by gainover |<span class="tag">♥</span><input id="life" class="s"value="0" /> | <span id="snaketag">■</span><input id="bodylen" class="s"value="3" /> | <span class="leveltag">★</span><input id="level" class="s"value="0" /> | <span class="leveltag">▲</span><input id="score" class="s"value="0" /></div> <div id="snakeMap" style="position:absolute;top:40px;left:10px;width:0px;height:0px;border:1px solid #000;"> </div> <div id="snakeTip" style="display:none;background:#fff;position:absolute;top:40px;left:10px;width:0px;height:0px;border:1px solid #000;"> </div> <script type="text/javascript"> //用 $ 代替 document.getElementById function $(id){return document.getElementById(id);} function remove(id){$(id).parentNode.removeChild($(id));} var config={ //定义一个config对象，来存储游戏设置 "mapw":500, //定义地图宽 "maph":300, //定义地图高 "mapColor":"#fff", //定义地图背景颜色 "cellw":10, //定义游戏里每一格的宽度 "cellh":10, //定义游戏里每一格的高度 "snake":3, //每一关初始的时候蛇的长度为 3格 "win":20, // 每一关蛇长度达到多少格为过关 "speed":100, // 每1000毫秒，即1秒移动一格 "blockColor":"#000", //砖块的颜色 "snakeColor":"#33ff66", //蛇的颜色 "fruitColor":"#ff0000", //果实的颜色 "fruitNum":2, //最初出现的fruit数目 "map":[], "fruit":[] }; function getCoord(x,y){ //这个函数用来获得第y行，第x列那个格子的左上角坐标 return { "x":config.cellw*x, "y":config.cellh*y } } function drawBlock(x,y,type){ //这个函数用来在地图上绘制一个方块 var coord=getCoord(x,y); //获得第x行，第y列这个格子的坐标 var s=document.createElement("div"); //创建一个 <div> </div> s.id="b"+getId(); s.style.position="absolute"; //设置该DIV为绝对定位 s.style.width=(config.cellw-2)+"px"; //设置这个 div 的宽 s.style.height=(config.cellh-2)+"px"; //设置这个 div 的高 s.style.top=coord.y+"px"; //设置这个 div 的纵坐标 s.style.left=coord.x+"px"; //设置这个 div 的横坐标 s.style.border="1px solid #000"; var bgcolor=config.blockColor; switch(type){ case 1: //蛇身体 bgcolor=config.snakeColor; break; case 2: //果实 bgcolor=config.fruitColor; break; } s.style.background=bgcolor; $("snakeMap").appendChild(s); return s.id; //上面代码里的减2，是减去边框的厚度，保证格子占的面积是 10×10 } function drawMap(mapArr){ config.map=mapArr; //开始绘制地图 //首先设置地图总大小 $("snakeMap").innerHTML=""; $("snakeMap").style.width=config.mapw+"px"; $("snakeMap").style.height=config.maph+"px"; $("snakeTip").style.width=config.mapw+"px"; $("snakeTip").style.height=config.maph+"px"; $("snakeMap").style.background=config.mapColor; // i 从第一行到最后一行 for(var i=0;i<mapArr.length;i++){ // j 从第一列到最后一列 for(var j=0;j<mapArr[i].length;j++){ if(mapArr[i][j]==1){ //如果mapArr[i][j]==1，说明这里需要画一个方块 drawBlock(j,i); // 绘制第 i 行，第j 列的方块 } if(mapArr[i][j]==2){ if(!config.fruit[i]){config.fruit[i]=[]} config.fruit[i][j]={ "id":drawBlock(j,i,2), "x":j, "y":i }; } } } } function getId(){ if(!this.blockNum){this.blockNum=1} else{this.blockNum++} return this.blockNum; } function keyControl(e,obj){ e=e||window.event; var odirection=obj.direction; switch(e.keyCode){ case 37: if(obj.direction=="UP"||obj.direction=="DOWN"){ obj.direction="LEFT"; } break; case 38: if(obj.direction=="LEFT"||obj.direction=="RIGHT"){ obj.direction="UP"; } break; case 39: if(obj.direction=="UP"||obj.direction=="DOWN"){ obj.direction="RIGHT"; } break; case 40: if(obj.direction=="LEFT"||obj.direction=="RIGHT"){ obj.direction="DOWN"; } break; case 65: config.speed-=10; break; case 83: config.speed+=10; break; case 80: obj.stoped=!obj.stoped; break; } if(odirection!=obj.direction){ //如果方向被改变了，则立即移动 obj.move(); } } function snake(){ var that=this; this.score=0; //蛇的总得分 this.life=10; //蛇的生命数 this.level=1; //当前等级 this.direction="DOWN"; //蛇运动的方向 this.body=[]; //存储蛇身体的每个方格的ID this.stoped=false; this.maps=[]; this.update=function(){ $("level").value=this.level; $("life").value=this.life; $("score").value=this.score; $("bodylen").value=this.body.length; } this.loadMap=function(maps){ this.maps=maps; drawMap(this.maps[this.level-1]); } this.init=function(){ if(this.moveHandle){clearTimeout(this.moveHandle);} this.stoped=false; for(var i=0;i<config.snake;i++){ this.body.push({ "id":drawBlock(0,i,1), "x":0, "y":i }); config.map[i][0]=1; } this.giveFruit(config.fruitNum-1); $("snaketag").style.color=config.snakeColor; this.update(); //使按键可以使用 document.onkeydown=function(e){ keyControl(e,that); }; } this.clear=function(){ //清除当前的蛇 for(var i=0;i<this.body.length;i++){ config.map[this.body[i].y][this.body[i].x]=0; remove(this.body[i].id); } this.body=[]; } this.flash=function(callback){ this.stoped=true; var tmpinterval=setInterval(function(){ for(var i=0;i<that.body.length;i++){ (function(i){ $(that.body[i].id).style.display=$(that.body[i].id).style.display?"":"none"; })(i); } },300); setTimeout(function(){ clearInterval(tmpinterval); if(callback){callback();} },2500); } this.gameover=function(str){ this.flash(function(){ that.life--; that.clear(); that.direction="DOWN"; that.update(); if(that.life>0){ that.init(); that.move(); }else{ alert("命都死光了！..."); } }); } this.win=function(){ this.clear(); drawMap(winMap); } this.show=function(str,callback){ $("snakeTip").innerHTML="<div style='position:absolute;top:"+(config.maph/2)+"px;left:10px;text-align:center;width:"+config.mapw+"px;height:20px;'>"+str+"</div>"; $("snakeTip").style.display=""; setTimeout(function(){ $("snakeTip").style.display="none"; if(callback){ callback(); } },1500); } this.nextLevel=function(){ this.level++; config.speed-=10; that.life++; if(this.level-1<this.maps.length){ this.flash(function(){ that.show(("恭喜你过关了!<br/><br/>关数:"+that.level+" | 生命: "+that.life+" | 速度: "+(100-config.speed)),function(){ that.clear(); that.direction="DOWN"; that.update(); //绘制下一级地图 drawMap(that.maps[that.level-1]); //清空果实 that.hasFruit=false; //初始化 that.init(); that.move(); }); }); }else{ this.flash(function(){ that.win(); }); } } this.hasFruit=false; this.giveFruit=function(n){ //产生一个蛇吃的果子 if(!this.hasFruit){ var rx=Math.floor(Math.random()*config.mapw/config.cellw); var ry=Math.floor(Math.random()*config.maph/config.cellh); //产生一个随机的坐标 if((rx!=0||ry!=0)&&config.map[ry][rx]==0){ if(!config.fruit[ry]){config.fruit[ry]=[]} config.fruit[ry][rx]={ "id":drawBlock(rx,ry,2), "x":rx, "y":ry }; config.map[ry][rx]=2; this.hasFruit=true; if(n&&n>0){this.hasFruit=false;this.giveFruit(n-1)} }else{ //如果产生的位置有蛇或者砖块，则继续产生下一个 this.giveFruit(); } } } this.moveHandle=null; this.move=function(){ if(!this.stoped){ var nx=0; var ny=0; var head=this.body[this.body.length-1]; var tail=this.body[0]; switch(this.direction){ case "UP": nx=head.x; ny=head.y-1; break; case "DOWN": nx=head.x; ny=head.y+1; break; case "LEFT": nx=head.x-1; ny=head.y; break; case "RIGHT": nx=head.x+1; ny=head.y; break; } if(nx<0||nx>=config.mapw/config.cellw||ny<0||ny>=config.maph/config.cellh){ this.gameover("天呀，想不开也不要撞墙啊!"); } //判断是吃，还是撞墙 var nv=config.map[ny][nx]; switch(nv){ case 2: //如果是吃了一个果子 this.score+=10; remove(config.fruit[ny][nx].id); //将果子变成body的一部分 this.body.push({ "id":drawBlock(nx,ny,1), "x":nx, "y":ny }); this.hasFruit=false; this.giveFruit(); $("score").value=this.score; $("bodylen").value=this.body.length; break; case 0: //正常移动 //在头部加一个方块 this.body.push({ "id":drawBlock(nx,ny,1), "x":nx, "y":ny }); //去掉尾部的方块 config.map[tail.y][tail.x]=0; remove(tail.id); this.body.shift(); break; case 1: this.gameover(); break; } if(this.body.length>=config.win){ this.nextLevel(); }else{ if(nv!=1){ config.map[ny][nx]=1; if(this.moveHandle){clearTimeout(this.moveHandle);} this.moveHandle=setTimeout(function(){ that.move(); },config.speed); } } }else{ if(this.moveHandle){clearTimeout(this.moveHandle);} this.moveHandle=setTimeout(function(){ that.move(); },config.speed); } } } //函数定义完毕，以下开始执行 //开始绘制地图 var mysnake=new snake(); mysnake.loadMap(gameMaps); mysnake.init(); mysnake.move(); </script> <script type="text/javascript"> window.onload=function(){ document.documentElement.style.overflow="hidden"; } </script> <div style="display:none"> <script language="javascript" type="text/javascript"src="http://js.users.51.la/2021973.js"></script> <noscript><a href="http://www.toolmao.com/2021973" target="_blank"><img alt="我要啦免费统计" src="http://img.users.51.la/2021973.asp" style="border:none" /></a></noscript> </div> </body> </html>