工具猫易做图版贪吃蛇

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>易做图贪食蛇</title>

.tag{color:#ff0000}

.leveltag{color:#0000ff}

.s{border:0px none #fff;width:35px;height:16px;background:#fff;}

</style>

</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>

</div>

//用 $ 代替 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

补充：web前端 , JavaScript ,

上一个：利用js实现如果不符合规则的输入则阻止表单的提交
下一个：你真的已经搞懂JavaScript了吗？

更多图片编程知识:

更多JAVA疑问解答：: java怎么在线读取ftp服务器上的文件内容; 关于程序员的职业规划; HTML和JSP矛盾吗？; java小程序如何打包？; java怎么split路径文件名？; jsp+javaBean中Column 'ordersPrice' specified twice的错误; Java TCP/IP Socket网络编程系列; 大家来讨论一下我到底该用什么好?Swing 还是 JavaFX; 关于Hibernate实体自身多对一的抓取问题; 关于apache2+tomcat群集出现的问题; spring 获取上下文问题; SSH 导入导出excel 谁有这块的资料吗?; Ext TreePanel 刷新问题; springmvc 加载一个jsp页面执行多个方法报404; checkbox数组action怎么向页面传值