最近在搞自己的网站，维护的时候准备放个贪吃蛇上去，顶一下原有的页面。
这个贪吃蛇有一点毒。原来设定了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才行。