貪吃蛇 javascript（附帶百度網盤鏈接）-有解無憂

這里貪吃蛇游戲是通過javascript面向物件編程的方法撰寫，代碼結構分為游戲類（Game.js），

蛇行為類（Snake.js），食物類(Food.js)，話不多說，直接原始碼了，(粘貼原始碼，引入正確路徑即可運行)

貪吃蛇：鏈接：https://pan.baidu.com/s/1_gfxQOWZ5ktZXLARzcn6fA
提取碼：672a
其他游戲原始碼：俄羅斯方塊https://blog.csdn.net/weixin_45851686/article/details/120242677https://blog.csdn.net/weixin_45851686/article/details/120242677

游戲頁面：

1.html&css頁面搭建：

index.html:

2.游戲類 Game.js：

3.蛇類 Snake.js

4.食物類 food.js

1.html&css頁面搭建：

index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #app {
            position: relative;
        }
        table {
            border-collapse: collapse;
         
            margin: auto;
        }

        td {
            width: 25px;
            height: 25px;
            border: 1px solid #aaa;
        }
        .fen {
            position: relative;
            width: 300px;
            height: 100px;
            margin: 0 auto 10px;
            background-color: #ccc;
            font-size: 14px;

        }
        p {
            display: block;
            width: 100%;

            line-height: 35px;
            text-align: center;
        }

        .fen span {
            display: block;
            float: left;
            margin-left: 15px;
            line-height: 25px;
        }

        .fen span:nth-of-type(3) {
            margin-left: 15px;
        }

        #btn {
            display: block;
            margin: 12px auto;

            clear: both;
        }
    </style>
</head>
<body>
    <div class="fen">
        <p>
            鍵盤控制方向：
            ↑上
            ↓下
            ←左
            →右
        </p>
        <span>分數：</span>
        <span id="score">0</span>
        <span>請選擇游戲難度：</span>
        <select name="" id="hard">請選擇游戲難度
            <option value="1">簡單</option>
            <option value="2">一般</option>
            <option value="3">困難</option>
        </select>
        <button id="btn">開始游戲</button>
    </div>

    <div id="app">
    </div>
</body>
</html>
<script src="./js/Game.js"></script>
<script src="./js/Snake.js"></script>
<script src="js/Food.js"></script>
<script>
    var game = new Game();
</script>

2.游戲類 Game.js：

實作功能：繪出游戲表格，控制蛇運動方向，游戲分數，設定游戲難度：

function Game() {
    /*創建行列，難度，游戲頁面初始化*/
    this.row = 20;//行
    this.col = 20;//列
    this.hard = document.getElementById("hard");//獲取難度選項卡
    this.score = parseInt(document.getElementById("score").innerHTML);//獲取分數
    this.init();//初始化
    this.snake = new Snake();
    this.food = new Food(this);
    this.btn = document.getElementById("btn");//獲取開始按鈕
    this.start();//開始游戲
    this.bindEvent();//系結鍵盤事件
}
//初始化地圖，創建表格，生成20行，20列
Game.prototype.init = function () {
    this.table = document.createElement("table");
    var tr, td;
    for (var i = 0; i < this.row; i++) {
        tr = document.createElement("tr");
        for (var j = 0; j < this.col; j++) {
            td = document.createElement("td");
            tr.appendChild(td);
        }
        this.table.appendChild(tr);
    }
    document.getElementById("app").appendChild(this.table);

}
//設定顏色
Game.prototype.setColor = function (row, col, color) {
    this.table.getElementsByTagName("tr")[row].getElementsByTagName('td')[col].style.backgroundColor = color;
}
//清除畫布
Game.prototype.clean = function () {
    for (var i = 0; i < this.row; i++) {
        for (var j = 0; j < this.col; j++) {
            this.table.getElementsByTagName("tr")[i].getElementsByTagName('td')[j].style.backgroundColor = "white";
            this.table.getElementsByTagName("tr")[i].getElementsByTagName('td')[j].innerHTML = "";
        }
    }
}
//系結事件，控制蛇運動方向
Game.prototype.bindEvent = function () {
    var self = this;
    document.addEventListener("keydown", function (e) {
        switch (e.keyCode) {
            case 37:
                if (self.snake.dir != "R") {
                    self.snake.dir = "L";
                }
                break;
            case 38:
                if (self.snake.dir != "D") {
                    self.snake.dir = "U";
                }
                break;
            case 39:
                if (self.snake.dir != "L") {
                    self.snake.dir = "R";
                }
                break;
            case 40:
                if (self.snake.dir != "U") {
                    self.snake.dir = "D";
                }
                break;
        }
    })
}
//設定食物
Game.prototype.setHtml = function (row, col, html) {
    this.table.getElementsByTagName("tr")[row].getElementsByTagName('td')[col].innerHTML = html;
}
//開始游戲
Game.prototype.start = function () {

    //定時器每秒更新畫面，按幀運動
    this.btn.onclick = function () {

        this.speed = 600 - game.hard.value * 150;//根據難度設定蛇運動速度
        console.log("dfyhu");
        game.timer = setInterval(function () {
            // 每秒開始清屏
            game.clean();
            //更新蛇狀態
            game.snake.upDate();
            //把蛇渲染到表格中
            game.snake.render();
            //渲染食物到頁面
            game.food.render();

        }, this.speed);
    }

}

3.蛇類 Snake.js

功能實作:初始化蛇的身體，顏色等，蛇運動狀態的判斷，判斷死亡條件，吃到食物判斷，以及根據不同游戲難度蛇的加分：

function Snake() {
    /*初始化蛇的身體*/
    this.sbody = [
        { "row": 3, "col": 5 },
        { "row": 3, "col": 4 },
        { "row": 3, "col": 3 },
        { "row": 3, "col": 2 }
    ];
    this.dir = "R";
}
//更新蛇的狀態(即蛇的運動)，蛇吃食物，蛇的死亡
Snake.prototype.upDate = function () {
    // console.log(game);
    //添加頭,根據運動方向
    switch (this.dir) {
        case "R":
            this.sbody.unshift({ "row": this.sbody[0].row, "col": this.sbody[0].col + 1 });
            break;
        case "L":
            this.sbody.unshift({ "row": this.sbody[0].row, "col": this.sbody[0].col - 1 });
            break;
        case "U":
            this.sbody.unshift({ "row": this.sbody[0].row - 1, "col": this.sbody[0].col });
            break;
        case "D":
            this.sbody.unshift({ "row": this.sbody[0].row + 1, "col": this.sbody[0].col });
            break;
    }
    // 撞到墻
if(this.sbody[0].col>game.col-1||this.sbody[0].row>game.row-1||this.sbody[0].col<0||this.sbody[0].row<0){
   clearInterval(game.timer);
   this.sbody.shift();
    alert("撞到墻了，游戲結束，您的得分是"+game.score);
}
// 撞到自己
for(var i=1;i<this.sbody.length;i++){
    if(this.sbody[0].row==this.sbody[i].row&&this.sbody[0].col==this.sbody[i].col){
       alert("撞到自己了，游戲結束,您的得分是"+game.score);
        clearInterval(game.timer);
        this.sbody.shift();
    }   
}
//吃到食物
if(this.sbody[0].row==game.food.row&&this.sbody[0].col==game.food.col){
    game.food=new Food(game);//新增食物
   //根據游戲難度加分
    if(game.hard.value==1){
        game.score+=1;//簡單
    }
    else if(game.hard.value==2){
        game.score+=3;//一般
    }
    else if(game.hard.value==3){
        game.score+=5;//困難
    }
    document.getElementById("score").innerHTML=game.score;//獲得的分數
}else{
       // 洗掉尾
       this.sbody.pop();
}
}

//渲染蛇頭部和身體顏色
Snake.prototype.render = function () {
    // console.log(game);
    game.setColor(this.sbody[0].row, this.sbody[0].col, "#cc0");
    for (var i = 1; i < this.sbody.length; i++) {
        game.setColor(this.sbody[i].row, this.sbody[i].col, "#996");
    }
}

4.食物類 food.js

實作功能:食物的隨機產生，食物的更新等

function Food(para){
    var self=this;
    /*隨機生成食物*/ 
    do{
        this.row=parseInt(Math.random()*para.row);
        this.col=parseInt(Math.random()*para.col);
        console.log(this.row,this.col);
    }while((function(){
        //判斷生成的食物是否與身體重合
        for(var i=0;i<para.snake.sbody.length;i++){
            if(para.snake.sbody[i].row==self.row&&para.snake.sbody[i].col==self.col){
                return true;//如果重合回傳true，重新執行do陳述句
            }
        }
        return false;
    })());
}
//設定事務出現的行列和內容🍎
Food.prototype.render=function(){
game.setHtml(this.row,this.col,"🍎")
}

轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/299760.html

標籤：其他

上一篇：Unity筆記-04

下一篇：技術美術知識學習4200：SSAO演算法