也发个简单的小游戏,贪吃蛇...
<!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>