index.html
#maptools.js
//自呼叫函式傳入window的目的，是讓變數可以被壓縮
//防止undefined重新命名，也可以被壓縮
;(function(window,undefined)
}//暴露tools給window
window.tools = tools;
})(window,undefined)//實參
//_____________________parent.js_____//這裡不建議使用繼承
;(function(window);
this.width = options.width || 20;
this.height = options.height || 20;
}parent.prototype.test = function()
window.parent = parent;
})(window,undefined)
food.js
/*所有js檔案書寫**，都是全域性作用域。
為了避免命名衝突，可以使用建構函式，但是不同js檔案也可能出現相同的函式名
function fn(){}
fn();
所以就要有另外解決命名衝突,自呼叫函式,開啟乙個新的作用域，避免命名衝突
（(function())()
*///優化方法，remove別人訪問不到，如果是food物件的方法，別人是可以訪問到的
;(function(window,undefined);
this.x = options.x || 0;
this.y = options.y || 0;
// this.width = options.width || 20;
= options.height || 20;
//————————————————————————借用建構函式,此時this就是food物件
parent.call(this,options);
this.color = options.color || "green";
}//——————————————原型繼承——————————————
food.prototype = new parent();
food.prototype.constructor = food;
//渲染
food.prototype.render = function(map)
function remove()
}//把food建構函式，讓外部可以訪問
window.food = food;
})(window,undefined)
//測試
/*var map = document.getelementbyid('map');
var food = new food();
food.render(map);*/
//自呼叫函式，會開啟乙個新的作用域，防止命名衝突
;(function(window,undefined);
// this.width = options.width || 20;
// this.height = options.height || 20;
//_________________借用建構函式
parent.call(this,options);
this.direction = options.direction || "right";
this.body = [,,
];}
snake.prototype = new parent();
snake.prototype.constructor = snake;
snake.prototype.render = function(map)
}//私有成員
function remove()
}//控制蛇移動的方法
snake.prototype.move = function (food,map)
//控制蛇頭的方向
var head = this.body[0];
switch(this.direction)
// 2.3.1 判斷蛇是否和食物的座標重合
var headx = head.x * this.width;//蛇節的寬度this.width,move方法是蛇物件的方法，this就指向蛇物件
var heady = head.y * this.height;
if(headx === food.x && heady === food.y));
*/var obj = {};
//物件拷貝
extend(last,obj);
this.body.push(obj);
//隨機在地圖上重新生成食物
food.render(map);
//render方法需要傳入map，由於蛇物件無地圖，snake.prototype.render方法中有地圖但獲取不到，
//所以需要在snake.prototype.move = function(food,map)在多傳入乙個引數
//move方法中增加乙個引數，呼叫的位置也需要引數，game.js中要新增that.map至that.snake.move(that.food,that.map)
//做以上工作主要是為了在food.render()需要渲染到指定位置}}
function extend(parent,child)
child[key] = parent[key];}}
window.snake = snake;
})(window,undefined)
/*測試以上函式是否有問題
var map = document.getelementbyid("map");
var snake = new snake();
snake.render(map);
*////使用自呼叫函式，建立新的區域性作用域，防止命名衝突
;(function(window,undefined)
game.prototype.start = function ()
//通過鍵盤控制蛇移動的方向
function bindkey()
document.addeventlistener("keydown",function(e)事件處理函式，this指觸發事件的物件，指的是document
/* console.log(e.keycode); //用於檢視按鍵的編碼資料
//left - 37; top - 38; right - 39; bottom - 40 */
switch(e.keycode)
}.bind(that),false); //第三個引數為false是事件冒泡階段,加上bind裡第乙個引數that就改變了function中的this物件
}//私有函式，讓蛇移動
function runsnake()
}.bind(that),150); //bind(that)裡存放當前遊戲物件
}//暴露建構函式給外部
window.game = game;
})(window,undefined);
//測試
/*var map = document.getelementbyid("map");
var game = new game(map);
game.start();*/
/main.js
;(function(window,undefined))()
貪吃蛇小遊戲
1 doctype html 2 html 3 head 4 title snake title 5head 6 body style text align center margih 100px background color aaaaaa 7 canvas id canv width 400 ...
java swing 實現貪吃蛇小遊戲
if i 1 radomg jpanel.getgraphics radomg.setcolor color.red 建立乙個蛇執行緒 drawsnak snakt new drawsnak snakt.start snakg jpanel.getgraphics snakg.setcolor co...
react實現貪吃蛇小遊戲
之前看別人寫小遊戲覺得很厲害，正好最近閒來無聊，就寫了個入門級的小遊戲，貪吃蛇。當你開始實現的時候，會發現其實並沒有你想的那麼難。下面進入正題。專案原始碼見 1.首先畫出背景 2.然後初始化初始蛇的位置，蛇為黑色，食物為紅色 renderbackground let trs for let i 0 ...