也发个简单的小游戏,贪吃蛇...
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>贪吃蛇 by freewind</title>
<style type="text/css">
html, body{margin:0px; padding:0px; font-size:12px; font-family:"Courier New";}
#snake{ width:550px; height:400px; margin:50px auto; overflow:hidden;}
#game{ float:left; width:402px; height:302px; border:1px solid #004578;}
#game table{ width:401px; height:301px; border-collapse:collapse; }
#game table td{width:9px; height:9px; line-height:9px; font-size:2px; overflow:hidden; border:1px solid #fff;}
#game .bg{ background:#0a0;}
#game .food{ background:#c00;}
#info{ float:right; width:128px; line-height:35px;}
#info input{ margin-top:10px; margin-bottom:10px;}
</style>
<script type="text/javascript">
var $ = function(id){
return typeof id == "string" ? document.getElementById(id) : id;
}
var Snake = {
init : function(){
var self = this;
$("start").onclick = function(){
self.start();
this.blur();
};
$("pause").onclick = function(){
self.pause();
this.blur();
};
document.onkeydown = function(event){
self.control(event)
};
this.maxRow = 30;
this.maxCol = 40;
},
initHtml : function(){
$("game").innerHTML = "<table cellpadding='0' cellspacing='0' border='0'>" + new Array(31).join("<tr>"+new Array(41).join("<td> </td>")+"</tr>") + "</table>";
this.table = $("game").getElementsByTagName("table")[0];
$("score").innerHTML = 0;
$("pause").value = "暂停";
},
start : function(){
var self = this;
this.initHtml();
this.food = [];
this.dir = 39;
this.data = [[15,21],[15,20],[15,19],[15,18]];
this.status = 1;
this.speed = 200;
this.score = 0;
this.stop();
this.timerID = setInterval(function(){self.timer();}, this.speed);
this.next();
this.draw();
},
pause : function(){
var self = this;
if(this.status == 1){
this.stop();
this.status = 2;
$("pause").value = "继续";
}else if(this.status == 2){
this.timerID = setInterval(function(){self.timer();}, this.speed);
this.status = 1;
$("pause").value = "暂停";
}
},
stop : function(){
clearInterval(this.timerID);
},
setCss : function(row, col, css){
this.table.rows[row].cells[col].className = css;
},
getCss : function(row, col){
return this.table.rows[row].cells[col].className;
},
timer : function(){
var d = this.data, self = this;
var first = [d[0][0], d[0][1]];
switch(this.dir){
case 37: //left
first[1] = first[1] - 1 < 0 ? this.maxCol-1 : first[1] - 1; break;
case 39: //right
first[1] = first[1] + 1 >= this.maxCol ? 0 : first[1] + 1; break;
case 38: //up
first[0] = first[0] - 1 < 0 ? this.maxRow-1 : first[0] - 1; break;
case 40: //down
first[0] = first[0] + 1 >= this.maxRow ? 0 : first[0] + 1; break;
}
var css = this.getCss(first[0], first[1]);
if(css == "bg"){
this.gameOver();
return;
}
if(css == "food"){
this.next();
this.score += 100;
this.speed = this.speed > 50 ? this.speed - 10 : 50;
clearInterval(this.timerID);
this.timerID = setInterval(function(){self.timer();}, this.speed);
$("score").innerHTML = this.score;
}else{
var last = d.pop();
this.setCss(last[0], last[1], "");
}
this.setCss(first[0], first[1], "bg");
d.unshift(first);
},
control : function(event){
var keyCode = event ? event.keyCode : window.event.keyCode;
if(this.status == 1 && keyCode >= 37 && keyCode <= 40){
if(Math.abs(keyCode - this.dir) == 2){
this.data = this.data.reverse();
}
this.dir = keyCode;
}
},
next : function(){
var d = this.data;
while(true){
var row = parseInt(Math.random() * this.maxRow),
col = parseInt(Math.random() * this.maxCol),
isFound = false;
for(var i = 0; i < d.length; i++){
if(d[i][0] == row && d[i][1] == col){
isFound = true;
break;
}
}
if(!isFound){
break;
}
}
this.food = [row, col];
this.setCss(row, col, "food");
},
draw : function(){
for(var i = 0, d = this.data; i < d.length; i++){
this.setCss(d[i][0], d[i][1], "bg");;
}
},
gameOver : function(){
this.stop();
this.status = 0;
alert("game over");
},
dispose : function(){
this.stop();
document.onkeydown = $("start").onclick = $("pause").onclick = null;
}
};
window.onload = function(){
Snake.init();
};
window.onunload = function(){
Snake.dispose();
};
</script>
</head>
<body>
<div id="snake">
<div id="game"></div>
<div id="info">
<div>分数:<span id="score">0</span></div>
<div><input type="button" value="开始" id="start" /></div>
<div><input type="button" value="暂停" id="pause" /></div>
</div>
</div>
</body>
</html>
写个联机的。
