2. 程式人生 > 程式設計 >JavaScript實現貪吃蛇遊戲

JavaScript實現貪吃蛇遊戲

阿新 • • 發佈：2021-06-17

本文例項為大家分享了javascript實現貪吃蛇遊戲的具體程式碼，供大家參考，具體內容如下

通過javaScript，我們可以實現貪吃蛇遊戲，具體功能如下：

（1）通過按上下左右鍵來改變蛇的移動方向

（2）若蛇撞到自己，則遊戲結束

（3）蛇移動出地圖邊緣時，會從地圖的另一邊進來

（4）長按方向鍵，蛇加速移動

（5）蛇吃到食物後，重新生成食物

完整程式碼如下：

<!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>
</head>
 
<body>
    <script>
        //地圖物件
        var Map;
        Map = {
            width: 990,height: 600,backgroundColor: 'rgba(36,30,225,0.25)',map: null,createMap: function () {
                if (this.map == null) {
                    this.map = document.createElement("div");
                }
            },adornMap: function () {
                this.map.style.position = "relative";
                this.map.style.width = this.width + "px";
                this.map.style.height = this.height + "px";
                this.map.style.backgroundColor = this.backgroundColor;
            },initialize: function () {
                this.createMap();
                this.adornMap();
                document.body.appendChild(this.map);
            }
        };
        //蛇物件
        var Snake;
        Snake = {
            snakeWidth: 30,snakeHeight: 30,snake: [[3,1,null,'red'],[2,'black'],[1,'black']],maP: null,direct: "right",timer: null,createSnake: function () {
                for (var i = 0; i < this.snake.length; i++) {
                    if (this.snake[i][2] == null) {
                        this.snake[i][2] = document.createElement("div");
                    }
                    this.snake[i][2].style.width = this.snakeWidth + "px";
                    this.snake[i][2].WyCtWW
 
style.height = this.snakeHeight + "px";
                    this.snake[i][2].style.backgroundColor = this.snake[i][3];
                    this.snake[i][2].style.position = "absolute";
                    this.snake[i][2].style.left = this.snake[i][0] * this.snakeWidth + "px";
                    this.snake[i][2].style.top = this.snake[i][1] * this.snakeHeight + "px";
                    this.maP.appendChild(this.snake[i][2]);
                }
            },move: function () {
                //蛇身移動
                for (var i = this.snake.length - 1; i > 0; i--) {
                    this.snake[i][0] = this.snake[i - 1][0];
                    this.snake[i][1] = this.snake[i - 1][1];
                }
                //蛇頭移動
                switch (this.direct) {
                    case "left":
                        this.snake[0][0] -= 1;
                        break;
                    case "right":
                        this.snake[0][0] +=http://www.cppcns.com
 
 1;
                        break;
                    case "up":
                        this.snake[0][1] -= 1;
                        break;
                    case "down":
                        this.snake[0][1] += 1;
                        break;
                }
                //防止蛇移動至地圖外
                if (this.snake[0][0] > 32) {
                    this.snake[0][0] = 0;
                }
                if (this.snake[0][0] < 0) {
                    this.snake[0][0] = 32;
                }
                if (this.snake[0][1] < 0) {
                    this.snake[0][1] = 19;
                }
                if (this.snake[0][1] > 19) {
                    this.snake[0][1] = 0;
                }
                //若蛇撞到自己，則遊戲結束
                for (var i = 1; i < this.snake.length; i++) {
                    if (this.snake[0][0] == this.snake[i][0] && this.snake[0][1] == this.snake[i][1]) {
                        clearInterval(this.timer);
                        alert("遊戲結束！");
                        return;
                    }
                }
                //蛇吃到食物時，重新生成食物位置，蛇身變長一節
                if (this.snake[0][0] == Food.left && this.snake[0][1] == Food.top) {
                    Food.createFood();
                    this.snake.push(
                        [
                            this.snake[this.snake.length - 1][0],this.snake[this.snake.length - 1][1],"black"
                        ]
                    )
                }
                this.createSnake();
            },initialize: function () {
                var that = this;
                that.createSnake();
                that.timer = setInterval(function () {
                    that.move();
                },500)
            }
        };
        //食物物件
        var Food;
        Food = {
            foodWidth: 30,foodHeight: 30,backgroundColor: "orange",left: null,
 
程式設計客棧    top: null,snakE: null,food: null,//建立食物
            createFood: function () {
                this.randomPosition();
     程式設計客棧           if (this.food == null) {
                    this.food = document.createElement('div');
                    this.food.style.width = this.foodWidth + "px";
                    this.food.style.height = this.foodHeight + "px";
                    this.food.style.backgroundColor = this.backgroundColor;
                    this.food.style.position = "absolute";
                    this.maP.appendChild(this.food);
                }
                this.food.style.left = this.left * this.foodWidth + "px";
                this.food.style.top = this.top * this.foodHeight + "px";
            },//隨機生成食物位置
            randomPosition: function () {
                var repeat;
                do {
                    repeat = false;
                    this.left = Math.floor(Math.random() * 33);
                    this.top = Math.floor(Math.random() * 20);
                    for (var i = 0; i < this.snakE.length; i++) {
                        if (this.left == this.snakE[i][0] && this.top == this.snakE[i][1]) {
                            repeat = true;
                        }
                    }
                } while (repeat)
            }
        };
        window.addEventListener('load',function () {
            Map.initialize();
            Snake.maP = Map.map;
            Snake.initialize();
            Food.maP = Map.map;
            Food.snakE = Snake.snake;
            Food.createFood();
            //按上下左右鍵，蛇改變移動方向
            window.addEventListener('keyup',function (e) {
                var direct = e.keyCode;
                switch (direct) {
                    case 37:
                        if (Snake.direct == "right") {
                            return;
                        }
                        Snake.direct = "left";
                        break;
                    case 38:
                        if (Snake.direct == "down") {
                            return;
                        }
                        Snake.direct = "up";
                        break;
                    case 39:
                        if (Snake.direct == "left") {
                            return;
                        }
                        Snake.direct = "right";
                        break;
                    case 40:
                        if (Snake.direct == "up") {
                            return;
                        }
                        Snake.direct = "down";
                        break;
                }
            })
            //長按方向鍵加速移動
            var lastKey = -1;
            window.addEventListener('keydown',function (e) {
                if (e.keyCode == lastKey) {
                    switch (e.keyCode) {
                        case 37:
                            if (Snake.direct == "right") {
                                return;
                            }
                            Snake.direct = "left";
                            break;
                        case 38:
                            if (Snake.direct == "down") {
                                return;
                            }
                            Snake.direct = "up";
                            break;
                        case 39:
             WyCtWW               if (Snake.direct == "left") {
                                return;
                            }
                            Snake.direct = "right";
                            break;
                        case 40:
                            if (Snake.direct == "up") {
                                return;
                            }
                            Snake.direct = "down";
                            break;
                    }
                    Snake.move();
                }
                lastKey = e.keyCode;
            })
        })
    </script>
</body>
 
</html>

效果圖：

JavaScript實現貪吃蛇遊戲

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。

相關推薦

如何基於javascript實現貪吃蛇遊戲

這篇文章主要介紹瞭如何基於javascript實現貪吃蛇遊戲,文中通過示例程式碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下

基於JavaScript實現貪吃蛇遊戲

本文例項為大家分享了JavaScript實現貪吃蛇遊戲的具體程式碼，供大家參考，具體內容如下

javascript實現貪吃蛇遊戲（娛樂版）

本文例項為大家分享了javascript實現貪吃蛇遊戲的具體程式碼，供大家參考，具體內容如下

使用JavaScript實現貪吃蛇遊戲

本文例項為大家分享了JavaScript實現貪吃蛇遊戲的具體程式碼，供大家參考，具體內容如下

用JavaScript實現貪吃蛇遊戲

本文例項為大家分享了JavaScript實現貪吃蛇遊戲的具體程式碼，供大家參考，具體內容如下

原生JavaScript實現貪吃蛇遊戲

本文例項為大家分享了JavaScript實現貪吃蛇遊戲的具體程式碼，供大家參考，具體內容如下

JavaScript實現貪吃蛇遊戲

本文例項為大家分享了javascript實現貪吃蛇遊戲的具體程式碼，供大家參考，具體內容如下

javascript實現貪吃蛇經典遊戲

js面向物件程式設計之貪吃蛇，供大家參考，具體內容如下 首先：面向物件程式設計，我們要找到專案中具體的物件，此處為（食物（food），蛇（snake），遊戲本身（game））也可不把遊戲本身作為物件，邏輯體現出來即可

javascript實現貪吃蛇小遊戲

本文例項為大家分享了js實現貪吃蛇小遊戲的具體程式碼，供大家參考，具體內容如下

javascript開發實現貪吃蛇遊戲

貪吃蛇的例子： 在此例子中，利用snake陣列的第0個元素和direction物件中的x值和y值做加法，算出蛇的下一個位置。利用間隔函式，不停的修改類名來進行渲染操作，感覺是一個很靈活的例子。

Javascript實現貪吃蛇小遊戲（含詳細註釋）

本文例項為大家分享了Javascript實現貪吃蛇小遊戲的具體程式碼，供大家參考，具體內容如下

javascript實現貪吃蛇小遊戲思路

小遊戲貪吃蛇實現思路講解(完整程式碼實現)，供大家參考，具體內容如下 效果流程

python 使用pygame工具包實現貪吃蛇遊戲(多彩版)

今天我們用python和python的工具包pygame來編寫一個貪吃蛇的小遊戲 貪吃蛇遊戲功能介紹

pygame實現貪吃蛇遊戲（上）

本文例項為大家分享了pygame貪吃蛇遊戲的具體程式碼，供大家參考，具體內容如下

pygame實現貪吃蛇遊戲（下）

接著上篇pygame實現貪吃蛇遊戲（上）繼續介紹 1.豆子的吃掉效果 只需在程式碼最後移動蛇頭的程式碼後增加一個蛇頭和豆子座標的判斷即可

python實現貪吃蛇遊戲原始碼

本文例項為大家分享了python實現貪吃蛇的具體程式碼，供大家參考，具體內容如下

unity使用連結串列實現貪吃蛇遊戲

今天介紹一下如何利用連結串列結構來建立一條貪吃蛇。 要實現的功能很簡單，按下空格鍵使蛇加長一節，每次按下空格就在蛇尾加一個cube。按下左方向鍵，控制蛇的移動。如圖所示：

unity實現貪吃蛇遊戲

unity貪吃蛇基本原理實現，供大家參考，具體內容如下 原理： 1、每個身體跟著前面的身體移動；

150行python程式碼實現貪吃蛇遊戲

上篇博文我們實現了兩百行程式碼實現貪吃蛇遊戲，這次我們來實現一個程式碼量更加少，功能卻更加完整的

C++控制檯實現貪吃蛇遊戲

本文例項為大家分享了C++實現貪吃蛇遊戲的具體程式碼，供大家參考，具體內容如下