最近在搞自己的网站，维护的时候准备放个贪吃蛇上去，顶一下原有的页面。
这个贪吃蛇有一点毒。原来设定了100级；100级刚开局就挂了。后来改掉了选项菜单，修复了。
还有什么bug,欢迎点击侧边的QQ按钮联系我。
代码部分：
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>网站维护中</title> <script language="javascript"> function snake(money,card){ this.x = money; this.y = card; } function n97(){ var initX = 10; var initY = 10; var SIZE = 20; this.nokia6700 = new Array(); this.nokia5230 = new Array(); this.k209 = 0; this.targetX = 0; this.targetY = 0; this.manager = null; this.setObserver = function(obs){ this.manager = obs; } this.init = function(){ this.nokia5230.length = 0; this.nokia6700.length = 0; for(i = 0;i <= SIZE + 1; i++ ){ this.nokia5230[i] = new Array(); } for (i = 0; i <= SIZE + 1; i++) { this.nokia5230[i][0] = 1; this.nokia5230[SIZE + 1][i] = 1; this.nokia5230[0][i] = 1; this.nokia5230[i][SIZE + 1] = 1; } for (i = 5; i <= initX; i++) { var point = new snake(i, initY); this.addsnake(point); } this.k209 = 3; this.productFood(); } this.move = function(){ var head = this.getHead(); var point = new snake(head.x,head.y); switch (this.k209) { case 1: point.x-- ; break; case 2: point.y--; break; case 3: point.x++; break; case 4: point.y++; break; } this.process(point); } this.turn = function(code){ var head = this.getHead(); var point = new snake(head.x,head.y); switch(code - 36){ case 1: if(this.k209 == 1 || this.k209 == 3) return; point.x--; break; case 2: if(this.k209 == 2 || this.k209 == 4) return; point.y--; break; case 3: if(this.k209 == 1 || this.k209 == 3) return; point.x++; break; case 4: if(this.k209 == 2 || this.k209 == 4) return; point.y++; break; } this.k209 = code - 36; this.process(point); } this.process = function(point){ if (this.ifDie(point)) { alert("你挂了！"); this.manager.stopGame(); return; } if (this.eatable(point)) { this.manager.removesnake(point); this.addsnake(point); this.manager.addScore(); this.productFood(); } else { this.addsnake(point); this.delTailsnake(); } } this.ifDie = function(point){ return this.nokia5230[point.x][point.y] == 1; } this.getHead = function(){ return this.nokia6700[0]; } this.getTail = function(){ return this.nokia6700[this.nokia6700.length - 1]; } this.eatable = function(head){ return (head.x == this.targetX && head.y == this.targetY); } this.addsnake = function(point){ this.nokia5230[point.x][point.y] = 1; this.nokia6700.unshift(point); this.manager.drawsnake(point); } this.delTailsnake = function(){ var point = this.nokia6700.pop(); this.nokia5230[point.x][point.y] = 0; this.manager.removesnake(point); } this.productFood = function(){ do { var x = Math.round(Math.random() * 100 % SIZE); var y = Math.round(Math.random() * 100 % SIZE); } while (this.nokia5230[x][y] == 1) this.targetX = x; this.targetY = y; this.manager.drawFood(x,y); } } function Ga1900(canvasId){ var WIDTH = 20; var canvas = document.getElementById(canvasId); var RED = "#FF0000" var WHITE = "#FFFFFF"; var BLACK = "#000000"; this.cxt = canvas.getContext("2d"); var e398 = new n97(); this.moveHandle = null; this.gamePanel = document.getElementById("gamePanel"); this.scoreLabel = document.getElementById("score"); this.maxScoreLabel = document.getElementById("highestScore"); this.step = 0; this.score = 0; this.maxScore = 0; if(localStorage.maxScore) this.maxScore = localStorage.maxScore; this.maxScoreLabel.innerHTML = this.maxScore; e398.setObserver(this); this.startGame = function(step){ this.clear(); e398.init(); this.score = 0; this.scoreLabel.innerHTML = this.score; this.gamePanel.onkeydown = onKeyDown; this.gamePanel.onkeydown = onKeyDown; this.step = parseInt(step); this.moveHandle = setInterval(move, 500 - 50 * this.step); } var move = function(){ e398.move(); } this.stopGame = function(){ this.pause(); document.getElementById("control").disabled = true; localStorage.maxScore = this.maxScore; } this.pause = function(){ clearInterval(this.moveHandle); this.gamePanel.onkeydown = null; } this.goon = function(){ this.gamePanel.onkeydown = onKeyDown; this.moveHandle = setInterval(move, 500 - 50 * this.step); } this.addScore = function(){ this.score += this.step; this.scoreLabel.innerHTML = this.score; if(this.score > this.maxScore){ this.maxScore = this.score; this.maxScoreLabel.innerHTML = this.score; } } var onKeyDown = function(e){ if (e.which < 37 || e.which > 40) return; e398.turn(e.which); } this.removeFood = function(x,y){ this.cxt.fillStyle = WHITE; this.cxt.fillRect((x - 1)*WIDTH, (y - 1)*WIDTH, WIDTH, WIDTH); } this.drawFood = function(x,y){ this.cxt.fillStyle = RED; this.cxt.fillRect((x - 1)*WIDTH, (y - 1)*WIDTH, WIDTH, WIDTH); } this.drawsnake = function(point){ this.cxt.fillStyle = BLACK; this.cxt.fillRect((point.x-1) * WIDTH, (point.y-1) * WIDTH, WIDTH, WIDTH); } this.removesnake = function(point){ this.cxt.fillStyle = WHITE; this.cxt.fillRect((point.x-1) * WIDTH, (point.y-1) * WIDTH, WIDTH, WIDTH); } this.clear = function(){ this.cxt.fillStyle = WHITE; this.cxt.fillRect(0,0,20*WIDTH,20*WIDTH); } } </script> </head> <body> <div align="center"> <h1>网站正在维护，先玩会贪吃蛇</h1> <div style="width:550px;margin:0 auto;height:400px;"> <div id="gamePanel" tabindex="0" style="width:400px; float:left;clear:left"> <canvas id="myCanvas" width="400" height="400" style="border:1px solid #c3c3c3;" > 您的浏览器不支持canvas，请尝试更换浏览器，建议使用opera浏览本站，你会有更好的体验。 </canvas> </div> <div id="scoreboard" style="float:right;"> 最高分 <div id="highestScore" style="color:red; font-weight:bold;"> 0 </div> <p></p> 得分 <div id="score" style="font-weight:bold;"> 0 </div> </div> </div> <p> 等级: <select id="speed"> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> <option>6</option> <option>7</option> <option>8</option> <option>9</option> <option>9</option> </select> <button id="start" onclick="startGame(this)">开始</button> <button id="control" onclick="control(this)" disabled="true">暂停</button> </p> </div> <script language="JavaScript"> var gameMrg = new Ga1900("myCanvas"); function startGame(startBtn){ var step = document.getElementById("speed").value; gameMrg.startGame(step); document.getElementById("gamePanel").focus(); pause = true; var btn = document.getElementById("control"); btn.innerHTML = "暂停"; btn.disabled = false; } var pause = true; function control(btn){ if (pause) { gameMrg.pause(); btn.innerHTML = "继续"; } else{ gameMrg.goon(); btn.innerHTML = "暂停"; document.getElementById("gamePanel").focus(); } pause = !pause; } </script> </body> </html>
注意：浏览器必须支持canvas才行。