javascript 贪吃蛇（二）
在javascript 贪吃蛇（一） 中，我们创建了Canvas、Snake及Food对象，本部分将继续进行余下的部分。
在开始进行余下部分的介绍前先将Utils.js公布出来，该js文件中设置了一些常用的方法。源码如下： Array.prototype.indexOf = function(vItem) { for ( var i = 0; i < this.length; i++) { if (vItem == this[i]) { return i; } } return -1; }; Array.prototype.sameItem = function(vItem) {// 判断元素在数组中出现的次数 var __iNum = 0;// 应用python的私有变量申明方式 for ( var i = 0; i < this.length; i++) { (this[i] == vItem) ? __iNum++ : __iNum; } return __iNum; }; function createElement(sTagName, sTagId, sText) { var oElement = document.createElement(sTagName); if (sTagId != null) { oElement.setAttribute("id", sTagId); } if (sText != null) { oElement.appendChild(document.createTextNode(sText)); } return oElement; } function RandomEventUtils() { } RandomEventUtils.getIntRandomNumFromOneToN = function(iN) { var iR = Math.random() * iN; return Math.ceil(iR); }; RandomEventUtils.instanceRandomSnakeForCanvas = function(oCanvas) { var __head = this.getIntRandomNumFromOneToN(20 * 20); if (!oCanvas.whichWallForBrick(__head)) {// 不属于墙 return new Snake(__head, __head - 1, "down"); } else { return new Snake(34, 35, "right"); } };
Scoreboard对象：
该对象定义的相对比较简单，仅仅是操作DOM生成显示游戏分数跟登记的相关位置。具体实现如下：//Scoreboard.js function Scoreboard() { } /* * 生成如下HTML代码： *
SnakeGame对象：
这个为游戏对象。属性有：iScore（分数）、iLevel（登记）、timeOut（计时）、canvas（画布）、scoreboard（记分牌）、snake（蛇）、food（食物）
方法有：keyboardEventsListeners（键盘监听事件）、scoreAndSpeed（游戏分数及等级计算）、start（游戏开始）、stop（游戏暂停）等方法。具体实现如下：// SnakeGame.js function SnakeGame(oCanvas, oScoreboard, oSnake, oFood) { this.iScore = 0; this.iLevel = 0; this.timeOut; this.canvas = oCanvas; this.scoreboard = oScoreboard; this.snake = oSnake; this.food = oFood; } // 键盘监听事件 SnakeGame.prototype.keyboardEventsListeners = function(oEvent) { if (window.event) {// ie // var direc = arguments[0].keyCode; var direc = window.event.keyCode; } else if (oEvent.which) {// ff var direc = oEvent.which; // var direc = arguments[0].which; } if (direc == 37 && this.snake.direction != "right") {// 37-->left this.snake.direction = "left"; } if (direc == 39 && this.snake.direction != "left") {// 39-->right this.snake.direction = "right"; } if (direc == 38 && this.snake.direction != "down") {// 38-->up this.snake.direction = "up"; } if (direc == 40 && this.snake.direction != "up") {// 40-->down this.snake.direction = "down"; } }; SnakeGame.prototype.__delay = function(obj, fn, time) { fnGameDelay = function() { fn.call(obj);// call方法会把fn方法中的this关键字替换成obj对象 // apply方法同call，但参数要用数组形式。IE中参数为空时不能用apply(obj,null),但FF中是可以的 // fn.apply(obj, new Array()); }; return setTimeout('fnGameDelay()', time); }; // 记分及游戏级别控制 SnakeGame.prototype.scoreAndSpeed = function() { this.iScore += Math.pow(2, this.food.iRank) * Math.ceil(Math.sqrt(Math.pow(5, this.iLevel))) - 2; var level = this.snake.body.length - 2; if (level > 0 && level % 7 == 0 && this.iLevel != 10) { this.iLevel += 1; } this.scoreboard.showScoreAndLevel(this.iScore, this.iLevel); }; // 开始游戏 SnakeGame.prototype.start = function() { // 当使用typeof param时，param可以声明也可以不用声明。 if (this.snake == undefined) {// null == undefined 为真，但null与undefied是不同的 this.snake = RandomEventUtils.instanceRandomSnakeForCanvas(this.canvas); } // 当使用声明变量但没有初始值时才可以使用 param == undefined 否则的话会报错 if (this.food == undefined) { this.food = new Food(); } if (this.food.bEat) { this.scoreAndSpeed(); this.food.productionFoodForSnake(this.snake); } this.snake.draw(); this.snake.moveAndFindFood(this.food); if (this.snake.isHitWall(this.canvas)) { var sPlayer = prompt("Game Over!/nPlease input your name!", "Anonymous"); this.saveHistory(sPlayer); this.onceAgain(); return; } this.snake.draw(); this.timeOut = this.__delay(this, this.start, 1000 - this.iLevel * 100); }; // 游戏暂停 SnakeGame.prototype.stop = function() { clearTimeout(this.timeOut); }; // 游戏结束后的重新初始化 SnakeGame.prototype.onceAgain = function() { this.scoreboard.cleanScoreAndLevel(); this.scoreboard.showHistory(); this.snake.cleanUpSnakeBody(); this.food.cleanUpLeftovers(); this.snake = null; this.food = null; this.iScore = 0; this.iLevel = 0; this.timeOut = null; }; // 保存玩家游戏记录 SnakeGame.prototype.saveHistory = function(sPlayer) { if (sPlayer != null && sPlayer != "") { var oDate = new Date(); var sDate = oDate.getFullYear() + "-" + (oDate.getMonth() + 1) + "-" + oDate.getDate() + " " + oDate.getHours() + ":" + oDate.getMinutes() + ":" + oDate.getSeconds(); document.cookie = sPlayer + "=" + this.iScore + ":" + sDate; } }; // 预加载 SnakeGame.prototype.preload = function() { // 添加控制按钮 var oDiv = createElement("div", "ctlbtn", null); var btn_start = createElement("button", "start", "Start");// 开始 var btn_stop = createElement("button", "stop", "Stop");// 暂停 var btn_help = createElement("button", "help", "Help");// 帮助 oDiv.appendChild(btn_start); oDiv.appendChild(btn_stop); oDiv.appendChild(btn_help); document.body.appendChild(oDiv); this.canvas.draw();// 显示画布 this.scoreboard.draw();// 显示记分牌 this.scoreboard.showHistory();// 显示当前游戏历史排行记录 }; window.onload = function() { var oCanvas = new Canvas();// 创建canvas对象 var oScoreboard = new Scoreboard();// 创建scoreboard对象 var oSnake;// 声明snake var oFood;// 声明snake's food var oSnakeGame = new SnakeGame(oCanvas, oScoreboard, oSnake, oFood);// 创建SnakeGame oSnakeGame.preload();// SnakeGame预加载 // 为游戏按钮添加监听事件 document.body.onkeydown = function(oEvent) { oSnakeGame.keyboardEventsListeners.call(oSnakeGame, oEvent); }; document.getElementById("start").onclick = function() { oSnakeGame.start.call(oSnakeGame); }; document.getElementById("stop").onclick = function() { oSnakeGame.stop.call(oSnakeGame); }; document.getElementById("help").onclick = function() { alert("键盘方向键控制蛇的移动！/n" + "点击“Start”开始游戏、“Stop”暂停游戏/n" + "游戏共有十个等级，从零开始难度依次增大/n" + "共有四种不同颜色的食物。分别是黄、蓝、红、黑/n" + "食物随机产生并且每种食物的分值随等级变化/n" + "级别越高则相同颜色的食物分值越高"); }; };
最后我们看戏该如何使用。相应的html页面snake.html及CSS样式snake.css为：
现在可以体验下js版的snake了。最终效果如下：