1 面向?qū)ο缶幊趟枷朐诔绦蝽?xiàng)目中有著非常明顯的優(yōu)勢:
1- 1 代碼可讀性高.由于繼承的存在，即使改變需求，那么維護(hù)也只是在局部模塊
1-2 維護(hù)非常方便并且成本較低。
?2 這個(gè)demo是采用了面向?qū)ο蟮木幊趟枷? 用JavaScript 語言編寫的游戲小程序--貪吃蛇.
? 代碼注釋詳細(xì),邏輯清晰 . 非常適合新手前端開發(fā)者, 鍛煉JavaScript語言的面向?qū)ο蟮木幊趟枷?
該小Demo已上傳GitHub,歡迎下載! 覺得好的話,隨手給個(gè)star, 您的star是我最大的動(dòng)力!
https://github.com/XingJYGo/snakePlay#javascript-經(jīng)典面向?qū)ο骴emo-貪吃蛇
代碼展示:
代碼結(jié)構(gòu):
--index.html 地圖頁面,展示蛇和食物,進(jìn)行游戲
--food.js 構(gòu)造食物對(duì)象
--game.js 構(gòu)造游戲?qū)ο?br /> --snake.js 構(gòu)造蛇對(duì)象
--tool.js 常用數(shù)據(jù)工具封裝
--index.html 地圖頁面
<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <title>Title</title> <style> #map{ width: 500px; height: 500px; background-color: lightblue; position: relative; } </style></head><body><div id="map"> </div><button id="btn">模擬蛇吃到食物</button><script src="tool.js"></script><script src="food.js"></script><script src="snake.js"></script><script src="game.js"></script><script> ////==========前后方向設(shè)定后 ==================var game = new Game();game.start(); </script> </body></html>--food.js 構(gòu)造食物對(duì)象
// 封裝一個(gè)食物對(duì)象//沙箱模式(function(){ var container; //用于存儲(chǔ)之前的食物 function Food(option) { //防止用戶不傳參數(shù)會(huì)報(bào)錯(cuò) option = option || {}; this.width = option.width || 20; this.height = option.height || 20; this.bgc = option.bgc || 'orange'; this.x = option.x || 0; this.y = option.y || 0; this.borderRadius = option.borderRadius |10; } Food.prototype.render = function () { //每一次渲染新的之前就把原來的移除掉 if(container){ map.removeChild(container); } // 創(chuàng)建食物對(duì)象 var food = document.createElement('div'); //存到全局變量里 container = food; food.style.width = this.width + 'px'; food.style.height = this.height + 'px'; food.style.backgroundColor = this.bgc; food.style.position = 'absolute'; //獲得隨機(jī)位置 //由于要讓食物的位置在每一個(gè)格子里面,所有獲取隨機(jī)數(shù)的算法要重新計(jì)算 this.x = Tool.getRandom(0, (map.offsetWidth/ this.width-1)) * this.width; this.y = Tool.getRandom(0, (map.offsetHeight/ this.height-1)) * this.height; food.style.left = this.x + 'px'; food.style.top = this.y + 'px'; food.style.borderRadius = this.borderRadius + 'px'; //渲染上食物 map.appendChild(food); } //因?yàn)橐谌质褂肍ood,需要把Food拿到全局中 window.Food = Food;})();--game.js 構(gòu)造游戲?qū)ο?/p>
(function () {// 1 由于游戲?qū)ο笠刂粕吆褪澄?// 所以游戲?qū)ο髴?yīng)該擁有蛇的實(shí)例和食物的實(shí)例 //存儲(chǔ)定時(shí)器的id var timeid; function Game() { this.snake = new Snake(); this.food = new Food(); } //2 開始游戲 Game.prototype.start = function () { this.snake.render(); this.food.render(); // 2-1 游戲一開始,蛇和食物就渲染出來 timeid = setInterval(function () { //2-2 -1 蛇的數(shù)據(jù)改變 this.snake.move(); // 2-3 判斷蛇是否到達(dá)邊界 var snakeHead = this.snake.body[0]; //2-3-1 求蛇頭可以移動(dòng)的水平/垂直坐標(biāo)的最大位置 var maxX = map.offsetWidth/this.snake.width -1; var maxY = map.offsetHeight/this.snake.height -1; if (snakeHead.x <0 ||snakeHead.x > maxX ||snakeHead.y <0 ||snakeHead.y > maxY){ clearInterval(timeid); alert("gave over"); //注:當(dāng)X超出范圍,代碼應(yīng)立即終止, // 防止2-2-2 渲染出下一個(gè)盒子.展示出來 return; } //2-4 蛇吃食物 //依據(jù): 蛇頭的坐標(biāo) 和 食物的坐標(biāo)重合 var snakeX = snakeHead.x * this.snake.width; var snakeY = snakeHead.y * this.snake.height; var foodX = this.food.x; var foodY = this.food.y; //如果符合條件, 證明吃到了食物 if (snakeX === foodX && snakeY === foodY){ // 2-4-1 食物消失, 渲染新食物 this.food.render(); // 2-4-2 蛇,變長 // 其實(shí)就是往snake.body.push個(gè)新對(duì)象 // bug: 為了解決新添加蛇節(jié)閃下的問題, 把蛇的最后一節(jié)對(duì)象,作為新的對(duì)象. var last = this.snake.body[this.snake.body.length -1]; this.snake.body.push({ x:last.x, y:last.y, col:last.col }) // this.snake.body.push(last); // 注:last本身已經(jīng)在數(shù)組中了, } //2-2 -2渲染到頁面上,真正看到的蛇動(dòng)起來 this.snake.render(); }.bind(this), 150) // 3 給頁面注冊鍵盤按下的事件 // 3-1 監(jiān)聽用戶是否按下了上,下,左,右的按鍵 document.onkeydown = function(e){ // console.log(this); e = e || window.event; console.log(e.keyCode); // 左37 上38 右39 下40 switch(e.keyCode){ case 37: //3-11 需要找到蛇,修改蛇的direction屬性 //防止原地掉頭 if(this.snake.direction === 'right'){ return; } this.snake.direction = 'left'; break; case 38: if(this.snake.direction === 'bottom'){ return; } this.snake.direction = 'top'; break; case 39: if(this.snake.direction === 'left'){ return; } this.snake.direction = 'right'; break; case 40: if(this.snake.direction === 'top') return; //如果if中只有一行代碼就可以不寫花括號(hào),然后這一行代碼要緊跟在if后面記得加分號(hào) this.snake.direction = 'bottom'; break; } }.bind(this); }; //2-2 蛇變量賦予全局 window.Game = Game; })();--snake.js 構(gòu)造蛇對(duì)象
(function () { var arr = []; //用于存儲(chǔ)蛇的每一節(jié)數(shù)據(jù) // 1 創(chuàng)建蛇對(duì)象 function Snake(option) { option = option || {}; this.width = option.width || 20; this.height = option.height || 20; this.body = [ {x: 3, y: 2, col: 'green'},//蛇頭的位置和顏色 {x: 2, y: 2, col: 'orange'},//蛇頭身體的位置和顏色 {x: 1, y: 2, col: 'orange'}]; this.direction = option.direction || 'right'; } //2 渲染蛇的方法 Snake.prototype.render = function () { // 2-3 為了防止多個(gè)sanke渲染到頁面上,一渲染之前先清除掉原來的 for (var i = 0; i < arr.length; i++) { map.removeChild(arr[i]);//移除頁面上的蛇節(jié) } arr.splice(0,arr.length);//蛇節(jié)都被移除掉了,那么數(shù)組中也應(yīng)該都移除. //2-1 根據(jù)body中的個(gè)數(shù),動(dòng)態(tài)的創(chuàng)建蛇節(jié) this.body.forEach(function (item, index) { //2-0 動(dòng)態(tài)的創(chuàng)建蛇節(jié) var snakeNode = document.createElement('div'); //2-4 遍歷添加蛇節(jié)新數(shù)據(jù) arr.push(snakeNode); snakeNode.style.width = this.width + 'px'; snakeNode.style.height = this.height + 'px'; snakeNode.style.position = 'absolute'; snakeNode.style.left = item.x * this.width + 'px'; snakeNode.style.top = item.y * this.height + 'px'; snakeNode.style.backgroundColor = item.col; map.appendChild(snakeNode); }.bind(this)) // 2-2 上面的this是在snake里面,指向snake.` // 否則,默認(rèn)指向window }; //3 蛇移動(dòng)的方法:body 頭數(shù)組賦值給身體. Snake.prototype.move = function () { //3-1 蛇后面的數(shù)據(jù)給前面 for (var i = this.body.length -1; i >0; i--) { this.body[i].x = this.body[i - 1].x; this.body[i].y = this.body[i - 1].y; } // 3-2暫時(shí)蛇頭往右走 // this.body[0].x +=1; // //3-2蛇頭一定的位置,要根據(jù)蛇的方向來決定 switch(this.direction){ case 'left': this.body[0].x -= 1; break; case 'right': this.body[0].x += 1; break; case 'top': this.body[0].y -= 1; break; case 'bottom': this.body[0].y += 1; break; } }; //賦予全局變量 window.Snake = Snake;})();--tool.js 常用數(shù)據(jù)工具封裝
//用于存放一些常用的功能性的函數(shù) // function getRandom(){//// }var Tool = { //獲取min - max之間的隨機(jī)整數(shù) getRandom: function(min, max){ return Math.floor(Math.random() * (max - min + 1)) + min; }} // Tool.getRandom()以上所述是小編給大家介紹的JavaScript貪吃蛇的實(shí)現(xiàn)詳解整合，希望對(duì)大家有所幫助，如果大家有任何疑問請給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)VeVb武林網(wǎng)網(wǎng)站的支持！
新聞熱點(diǎn)
疑難解答
