JavaScript面向?qū)ο髮?shí)現(xiàn)貪吃蛇游戲

更新時(shí)間：2022年04月15日 17:15:14 作者：ljs_coding

這篇文章主要為大家詳細(xì)介紹了JavaScript面向?qū)ο髮?shí)現(xiàn)貪吃蛇游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了面向?qū)ο蟮呢澇陨邔?shí)現(xiàn)代碼，供大家參考，具體內(nèi)容如下

1 工具對(duì)象(Tools.js)

因?yàn)橐S機(jī)生成食物，所以先將生成min-max范圍內(nèi)隨機(jī)整數(shù)的方法提取出來(lái)。randomNum屬性就是生成的隨機(jī)數(shù)。

function Tools(min,max){
? ? min = Math.ceil(min);
? ? max = Math.floor(max);
? ? this.randomNum=Math.floor(Math.random() * (max - min + 1)) + min; //含最大值，含最小值

}

2 食物對(duì)象(Food.js)

//為避免命名沖突，使用自調(diào)用函數(shù)
(function(){
? ? var foodDivs=[];
? //1 定義食物對(duì)象
? function Food(options){
? ? ? options=options||{};//封裝屬性的對(duì)象
? ? ? this.backgroundColor=options.backgroundColor||'green';
? ? ? this.width=options.width||20;
? ? ? this.height=options.height||20;
? ? ? this.x=options.x||0;
? ? ? this.y=options.y||0;
? }
? //2 渲染到map上
? Food.prototype.render=function(map){

? ? ? removeFood();
? ? ? var div=document.createElement('div');
? ? ? this.x=new Tools(0,map.offsetWidth/this.width-1).randomNum;
? ? ? this.y=new Tools(0,map.offsetHeight/this.height-1).randomNum;
? ? ? div.style.width=this.width+'px';
? ? ? div.style.height=this.height+'px';
? ? ? div.style.backgroundColor=this.backgroundColor;
? ? ? div.style.left=this.x*this.width+'px';
? ? ? div.style.top=this.y*this.height+'px';
? ? ? div.style.position = 'absolute';
? ? ? map.appendChild(div);
? ? ? foodDivs.push(div);
? }
? function removeFood(){
? ? for(var i=foodDivs.length-1;i>=0;i--){
? ? ? ? foodDivs[i].parentNode.removeChild(foodDivs[i]);//先從頁(yè)面刪除
? ? ? ? foodDivs.splice(i,1);//刪除指定位置元素 ?//再?gòu)臄?shù)組實(shí)際刪除
? ? }
? }
? window.Food=Food;//暴露Food，外部才能訪問(wèn)
})();

3 蛇對(duì)象(Snake.js)

(function(){
? ? var snakeDivs=[];
? ? //1 蛇構(gòu)造函數(shù)
? ? function Snake(options){
? ? ? ? options=options||{};
? ? ? ? this.body=[
? ? ? ? ? ? {x:3,y:2,bgc:'red'},
? ? ? ? ? ? {x:2,y:2,bgc:'blue'},
? ? ? ? ? ? {x:1,y:2,bgc:'blue'}
? ? ? ? ];
? ? ? ? this.width=options.width||20;
? ? ? ? this.height=options.height||20; ? ? ?
? ? ? ? this.direction=options.direction||'right'; ? ? ?
? ? }
? ? //2 渲染到map上
? ? Snake.prototype.render=function(map){
? ? ? ? removeSnake();
? ? ? ? for(var i=0;i<this.body.length;i++){
? ? ? ? ? ? var block=this.body[i];
? ? ? ? ? ? var div=document.createElement('div');
? ? ? ? ? ? div.style.width=this.width+'px';
? ? ? ? ? ? div.style.height=this.height+'px';
? ? ? ? ? ? div.style.backgroundColor=block.bgc;
? ? ? ? ? ? div.style.left=block.x*this.width+'px';
? ? ? ? ? ? div.style.top=block.y*this.height+'px';
? ? ? ? ? ? div.style.position = 'absolute';
? ? ? ? ? ? map.appendChild(div);
? ? ? ? ? ? snakeDivs.push(div);//添加蛇divs
? ? ? ? }
? ? }
? ? //3 蛇的移動(dòng)
? ? Snake.prototype.move=function(food,map){
? ? ? ? //邏輯上從后往前 先蛇身再蛇頭
? ? ? ? //蛇身每一節(jié)替換上次的位置
? ? ? ? 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;
? ? ? ? }
? ? ? ? //蛇頭移動(dòng)
? ? ? ? var head=this.body[0];
? ? ? ? switch(this.direction){
? ? ? ? ? ? ? case 'left':
? ? ? ? ? ? ? head.x-=1;
? ? ? ? ? ? ? break;
? ? ? ? ? ? ? case 'up':
? ? ? ? ? ? ? head.y-=1;
? ? ? ? ? ? ? break;
? ? ? ? ? ? ? case 'right':
? ? ? ? ? ? ? head.x+=1;
? ? ? ? ? ? ? break;
? ? ? ? ? ? ? case 'down':
? ? ? ? ? ? ? head.y+=1;
? ? ? ? ? ? ? break;
? ? ? ? }
? ? ? ? if(head.x===food.x&&head.y===food.y){//蛇頭與食物重合
? ? ? ? ? ? var last=this.body[this.body.length-1];
? ? ? ? ? ? this.body.push({
? ? ? ? ? ? ? ? x:last.x,
? ? ? ? ? ? ? ? y:last.y,
? ? ? ? ? ? ? ? bgc:last.bgc
? ? ? ? ? ? }); ?
? ? ? ? ? ? food.render(map);//這里就包括移除前面的食物這一操作 ? ? ? ? ??
? ? ? ? } ? ? ? ?
? ? }
? ? function removeSnake(){
? ? ? ?for(var i=snakeDivs.length-1;i>=0;i--){
? ? ? ? ? ?snakeDivs[i].parentNode.removeChild(snakeDivs[i]);//先從頁(yè)面刪除
? ? ? ? ? ?snakeDivs.splice(i,1);//刪除指定位置元素 ?//再?gòu)臄?shù)組實(shí)際刪除
? ? ? ?}
? ? }
? ? window.Snake=Snake;
})();

4 游戲?qū)ο?Game.js)

主要是控制游戲的開(kāi)始，以及按鍵對(duì)應(yīng)的行為在游戲中的含義，將蛇和食物這兩個(gè)對(duì)象組織在一起。

?(function(){
var that;
?function Game(){
? ? ?this.food=new Food();
? ? ?this.snake=new Snake();
? ? ?that=this;
?}
?Game.prototype.start=function(map){
? ? this.snake.render(map);
? ? this.food.render(map);
? ? var head=this.snake.body[0];
? ? var span=document.getElementById('tag');
? ? var timerId=setInterval(function(){
? ? ? ?that.snake.move(that.food,map);
? ? ? ?that.snake.render(map);

? ? ? ?if((head.x>map.offsetWidth/that.snake.width-2)||head.x<=0){
? ? ? ? ?clearInterval(timerId);
? ? ? ? ?span.style.display='block';//提示Game Over
? ? ? ?}
? ? ? ?if((head.y>map.offsetHeight/that.snake.height-2)||head.y<=0){
? ? ? ? clearInterval(timerId);
? ? ? ? span.style.display='block';//提示Game Over
? ? ? }
? ? },150);
??
? ? console.log(map.offsetWidth/this.snake.width-1);
? ? bindKey();
}
function bindKey(){
? ? document.addEventListener('keydown',function(e){
? ? ? ? switch(e.keyCode){//left 37 up 38 right 39 down 40
? ? ? ? ? ? case 37:
? ? ? ? ? ? that.snake.direction='left';
? ? ? ? ? ? break;
? ? ? ? ? ? case 38:
? ? ? ? ? ? that.snake.direction='up';
? ? ? ? ? ? break;
? ? ? ? ? ? case 39:
? ? ? ? ? ? that.snake.direction='right';
? ? ? ? ? ? break;
? ? ? ? ? ? case 40:
? ? ? ? ? ? that.snake.direction='down';
? ? ? ? ? ? break;
? ? ? ? }
? ? });
}
window.Game=Game;
})()
var Game=new Game();
var map=document.getElementById('map');
Game.start(map);

5 index.html

顯示的html頁(yè)面

<!DOCTYPE html>
<html>
<head>
? ? <meta charset="utf-8" />
? ? <meta http-equiv="X-UA-Compatible" content="IE=edge">
? ? <title>Page Title</title>
? ? <meta name="viewport" content="width=device-width, initial-scale=1">
? ? <style>
? ? #map{
? ? ? ? background-color: lightgray;
? ? ? ? width: 800px;
? ? ? ? height: 500px;
? ? ? ? margin: 0 auto;
? ? ? ? position: relative;
? ? }
? ? #tag{
? ? width: 200px;
? ? height: 100px;
? ? background-color: gray;
? ? position: absolute;
? ? left:300px;
? ? top:200px;
? ? line-height: 100px;
? ? text-align: center;
? ? display: none;
? ? }
? ? </style>
</head>
<body>
? ? <div id='map'>
? ? ? ? <span id='tag'>Game Over</span>
? ? </div>
? ? <script src="js/Tools.js"></script>
? ? <script src="js/Food.js"></script>
? ? <script src="js/Snake.js"></script>
? ? <script src="js/Game.js"></script>
</body>
</html>

6 運(yùn)行界面