从入行以来,应用过N中编程语言,不过只要你开发系统是B/S架构,你就离不开Javascript!如果你不熟悉Javascript你一定做不好web应用!
从今日起,我会从以前的代码中,抽出一些可以重用的函数,希望给大家带来方便!
今天是第一个,一个简单的游戏!
[贪食蛇]
<!--
anson lao_an@126.com 16328244 珠海
2005.6.18 大雨
怀念8250 。。。
怀念贪食蛇 。。。
-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title> 贪食蛇 </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<style type="text/css">
*{font-size:12px}
table{width:300px;height:300px;border:1px #000 solid}
.fruit{
background-color:green;
}
.dragon{
background-color:red;
}
.normal{
background-color:#fff;
}
</style>
</head>
<body>
本局得分:<span id="divScore" style="margin-right:155px">0</span> 你的最高分:<span style="color:Red" id="hightScore">0</span>
<table cellspacing="1" cellpadding="1" >
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
</table>
游戏速度 : <select id="selLevel" >
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select>
<input type="button" value="重新开始" οnclick="Init()"/>
</body>
</html>
<script language="JScript">
var divScore = document.getElementById("divScore");
var hightScore = document.getElementById("hightScore");
var level ;
var table = document.getElementsByTagName("table")[0];
var timer = null;
var timer_space = 500;
var point;
var time1;
//定义龙对象
var dragon = new Object();
dragon.runed = false;
//定义龙身体
dragon.body = new Array();
//定义龙行进方向
dragon.dire = "";
//设置龙身颜色
dragon.setColor = function()
{
for(var i=0;i<dragon.body.length;i++)
{
dragon.body[i].className = "dragon";
}
}
//龙移动
dragon.move = function(pos)
{
divScore.innerText = point * level;
if(!((pos == "left" && dragon.dire == "right") ||
(pos == "right" && dragon.dire == "left") ||
(pos == "top" && dragon.dire == "bottom") ||
(pos == "bottom" && dragon.dire == "top")))
{
dragon.dire = pos;
}
else pos = dragon.dire;
var bw = dragon.bumpWall(pos);
if(bw)
{
if(timer != null) window.clearInterval(timer);
alert("最后得分 : " + (point * level) + "/n运行时间 : "+ (new Date() - time1)/1000 +"秒");
dragon.runed = false;
if(parseInt(hightScore.innerText) < (point * level))
hightScore.innerText = (point * level);
reset();
return ;
}
var _len = dragon.body.length;
var _rIndex = dragon.body[0].parentNode.rowIndex;
var _cIndex = dragon.body[0].cellIndex;
//判断方向
switch(pos)
{
case "top" :
dragon.body.unshift(table.rows[_rIndex-1].cells[_cIndex]);
var cell = dragon.body[0];
if(cell.className != "fruit")
dragon.body.pop().className = "normal";
else fruit.setNew();
break;
case "right" :
dragon.body.unshift(table.rows[_rIndex].cells[_cIndex+1]);
var cell = dragon.body[0];
if(cell.className != "fruit")
dragon.body.pop().className = "normal";
else fruit.setNew();
break;
case "bottom" :
dragon.body.unshift(table.rows[_rIndex+1].cells[_cIndex]);
var cell = dragon.body[0];
if(cell.className != "fruit")
dragon.body.pop().className = "normal";
else fruit.setNew();
break;
case "left" :
dragon.body.unshift(table.rows[_rIndex].cells[_cIndex-1]);
var cell = dragon.body[0];
if(cell.className != "fruit")
dragon.body.pop().className = "normal";
else fruit.setNew();
break;
}
dragon.setColor();
window.clearInterval(timer);
timer = window.setInterval("dragon.move('"+pos+"')",parseInt(timer_space/level));
}
dragon.bumpWall = function(pos)
{
var head = dragon.body[0];
var result = false;
var _rIndex = dragon.body[0].parentNode.rowIndex;
var _cIndex = dragon.body[0].cellIndex;
switch(pos)
{
case "top" :
result = ((head.parentNode.rowIndex == 0) || dragon.isDragonBody(table.rows[_rIndex-1].cells[_cIndex]));
break;
case "bottom" :
result = ((head.parentNode.rowIndex == 19) || dragon.isDragonBody(table.rows[_rIndex+1].cells[_cIndex]));
break;
case "left" :
result = ((head.cellIndex == 0) || dragon.isDragonBody(table.rows[_rIndex].cells[_cIndex-1]));
break;
case "right" :
result = ((head.cellIndex == 19) || dragon.isDragonBody(table.rows[_rIndex].cells[_cIndex+1]));
break;
}
return result
}
dragon.isDragonBody = function(obj)
{
for(var i=0;i<dragon.body.length;i++)
{
if(dragon.body[i] == obj) return true;
}
return false;
}
var fruit = new Object();
fruit.body = null;
fruit.setNew = function()
{
var n = getRandom(0,400);
var rIndex;
var cIndex;
if(n > 19)
{
rIndex = parseInt(n/19)-1;
cIndex = (parseInt(n%19) == 0) ? 0 : parseInt(n%19);
}
else
{
rIndex = 0;
cIndex = (n == 0) ? 0 : n;
}
fruit.body = table.rows[rIndex].cells[cIndex];
var b = false;
for(var i=0;i<dragon.body.length;i++)
{
if(fruit.body == dragon.body[i])
{
b = true;
}
}
if(b)
{
fruit.setNew();
}
else
{
point++;
fruit.body.className = "fruit";
return;
}
}
getRandom = function(l,u)
{
var n = (u - l + 1)*Math.random() + l;
return Math.floor(n);
}
//初始化
Init = function()
{
time1 = new Date();
reset();
dragon.runed = true;
level = parseInt(document.getElementById("selLevel").selectedIndex + 1);
point = -1;
dragon.body = [table.rows[19].cells[5],table.rows[19].cells[4],table.rows[19].cells[3],table.rows[19].cells[2],table.rows[19].cells[1],table.rows[19].cells[0]]
dragon.setColor();
timer = window.setInterval("dragon.move('right')",parseInt(timer_space/level));
fruit.setNew();
}
document.onkeydown = function()
{
if(!dragon.runed) return;
switch(event.keyCode)
{
case 37 :
dragon.move("left");
break;
case 38 :
dragon.move("top");
break;
case 39 :
dragon.move("right");
break;
case 40 :
dragon.move("bottom");
break;
}
}
reset = function()
{
if(fruit.body)
{
fruit.body.className = "";
}
for(var i=0;i<dragon.body.length;i++)
{
dragon.body[i].className = "";
}
if(timer != null) window.clearInterval(timer);
divScore.innerText = "0";
}
</script>