javascript實現遊戲貪吃蛇

阿新 • • 發佈：2018-11-14

return display val ase document 清除 char 代碼 keycode

1、設計蛇：屬性有寬、高、方向、狀態（有多少節），方法：顯示，跑

2、設計食物：屬性寬、高

3、顯示蛇：根據狀態向地圖裏加元素

4、蛇跑起來：下一節到前一節的位置，蛇頭根據方向變，刪除原來的蛇，新建蛇；當出界時，死亡，初始化；當蛇頭吃到自己的時候，死亡，初始化

5、食物被吃掉，蛇加一節，去掉原來的食物，生成新的食物

6、添加定時器，綁定按鍵

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content 
="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style type="text/css">
        body {
            margin: 0;
            padding: 0;
        }
        .main {
            width: 800px;
            height: 400px;
            margin: 50px auto;
        }
        .btn {
            width: 100px;
            height: 40px;
        }
        .map {
            position: relative;
            width: 800px;
            height: 400px;
            background: #ccc;
        }
     
</style>
</head>
<body>
<div class="main">
    <button class="btn" id="begin">開始遊戲</button>
    <div class="map" id="map"></div>
 
    <script type="text/javascript">
        var map = document.getElementById(‘map‘);
        // 使用構造方法創建蛇，
        function 
 Snake()
        {
            // 設置蛇的寬、高、默認走的方向
            this.width = 10;
            this.height = 10;
            this.direction = ‘right‘;
 
            // 記住蛇的狀態，當吃完食物的時候，就要加一個，初始為3個小點為一個蛇，
            this.body = [
                {x:2, y:0},   // 蛇頭，第一個點
                {x:1, y:0},   // 蛇脖子，第二個點
                {x:0, y:0}    // 蛇尾，第三個點
            ];
 
            // 顯示蛇
            this.display = function() {
                // 創建蛇
                for (var i=0; i<this.body.length; i++) {
                    if (this.body[i].x != null) {   // 當吃到食物時，x==null，不能新建，不然會在0，0處新建一個
                        var s = document.createElement(‘div‘);
                        // 將節點保存到狀態中，以便於後面刪除
                        this.body[i].flag = s;
                        // 設置寬高
                        s.style.width = this.width + ‘px‘;
                        s.style.height = this.height + ‘px‘;
                        s.style.borderRadius =  "50%";
                        s.style.background = "rgb(" + Math.floor(Math.random()*256) + "," + Math.floor(Math.random()*256) + "," + Math.floor(Math.random()*256) + ")";
                        // 設置位置
                        s.style.position = ‘absolute‘;
                        s.style.left = this.body[i].x * this.width + ‘px‘;
                        s.style.top = this.body[i].y * this.height + ‘px‘;
                        // 添加進去
                        map.appendChild(s);
                    }
                }
            };
 
            // 讓蛇跑起來,後一個元素到前一個元素的位置
            // 蛇頭根據方向處理，所以i不能等於0
            this.run = function() {
                // 後一個元素到前一個元素的位置
                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;
                }
 
                // 根據方向處理蛇頭
                switch(this.direction)
                {
                    case "left":
                        this.body[0].x -= 1;
                        break;
                    case "right":
                        this.body[0].x += 1;
                        break;
                    case "up":
                        this.body[0].y -= 1;
                        break;
                    case "down":
                        this.body[0].y += 1;
                        break;
                }
 
                // 判斷是否出界,一蛇頭判斷,出界的話，
                if (this.body[0].x < 0 || this.body[0].x > 79 || this.body[0].y < 0 || this.body[0].y > 39) {
                    clearInterval(timer);   // 清除定時器，
                    alert("你瞎嗎？撞死了！");
                    // 刪除舊的
                    for (var i=0; i<this.body.length; i++) {
                        if (this.body[i].flag != null) {   // 如果剛吃完就死掉，會加一個值為null的
                            map.removeChild(this.body[i].flag);
                        }
                    }
                    this.body = [   // 回到初始狀態，
                        {x:2, y:0},
                        {x:1, y:0},
                        {x:0, y:0}
                    ];
                    this.direction = ‘right‘;
                    this.display();   // 顯示初始狀態
                    return false;   // 結束
                }
 
                // 判斷蛇頭吃到食物，xy坐標重合，
                if (this.body[0].x == food.x && this.body[0].y == food.y) {
                    // 蛇加一節，因為根據最後節點定，下面display時，會自動賦值的
                    this.body.push({x:null, y:null, flag: null});
 
                    // 清除食物,重新生成食物
                    map.removeChild(food.flag);
                    food.display();
                }
 
                // 吃到自己死亡，從第五個開始與頭判斷，因為前四個永遠撞不到
                for (var i=4; i<this.body.length; i++) {
                    if (this.body[0].x == this.body[i].x && this.body[0].y == this.body[i].y) {
                        clearInterval(timer);   // 清除定時器，
                        alert("傻子！你怎麽能吃自己呢？");
                        // 刪除舊的
                        for (var i=0; i<this.body.length; i++) {
                            if (this.body[i].flag != null) {   // 如果剛吃完就死掉，會加一個值為null的
                                map.removeChild(this.body[i].flag);
                            }
                        }
                        this.body = [   // 回到初始狀態，
                            {x:2, y:0},
                            {x:1, y:0},
                            {x:0, y:0}
                        ];
                        this.direction = ‘right‘;
                        this.display();   // 顯示初始狀態
                        return false;   // 結束
                    }
                }
 
                // 先刪掉初始的蛇，在顯示新蛇
                for (var i=0; i<this.body.length; i++) {
                    if (this.body[i].flag != null) {   // 當吃到食物時，flag是等於null，且不能刪除
                        map.removeChild(this.body[i].flag);
                    }
                }
 
                // 重新顯示蛇
                this.display();
 
            }
        }
 
        // 構造食物
        function Food()
        {
            this.width = 10;
            this.height = 10;
 
            this.display = function() {
                var f = document.createElement(‘div‘);
                this.flag = f;
                f.style.width = this.width + ‘px‘;
                f.style.height = this.height + ‘px‘;
                f.style.background = ‘red‘;
                f.style.borderRadius = ‘50%‘;
                f.style.position = ‘absolute‘;
                this.x = Math.floor(Math.random()*80);
                this.y = Math.floor(Math.random()*40);
                f.style.left = this.x * this.width + ‘px‘;
                f.style.top = this.y * this.height + ‘px‘;
                map.appendChild(f);
            }
        }
 
        var snake = new Snake();
        var food = new Food();
        snake.display();   // 初始化顯示
        food.display();
 
        // 給body加按鍵事件，上下左右
        document.body.onkeydown = function(e) {
            // 有事件對象就用事件對象，沒有就自己創建一個，兼容低版本瀏覽器
            var ev = e || window.event;
 
            switch(ev.keyCode)
            {
                case 38:
                    if (snake.direction != ‘down‘) {   // 不允許返回，向上的時候不能向下
                        snake.direction = "up";
                    }
                    break;
                case 40:
                    if (snake.direction != "up") {
                        snake.direction = "down";
                    }
                    break;
                case 37:
                    if (snake.direction != "right") {
                        snake.direction = "left";
                    }
                    break;
                case 39:
                    if (snake.direction != "left") {
                        snake.direction = "right";
                    }
                    break;
            }
        };
 
        // 點擊開始時，動起來
        var begin = document.getElementById(‘begin‘);
        var timer;
        begin.onclick = function() {
            clearInterval(timer);
            // timer = setInterval(snake.run(), 500);   // 先執行run函數，把執行得到的結果，每500毫秒執行一次，不會在執行內部代碼
            timer = setInterval("snake.run()", 500);  // 小技巧，每500毫秒執行字符串，字符串執行內部代碼
        };
 
 
    </script>
</div>
</body>
</html>

---------------------
作者：snow_small
來源：CSDN
原文：https://blog.csdn.net/snow_small/article/details/79108630

javascript實現遊戲貪吃蛇

return display val ase document 清除 char 代碼 keycode 1、設計蛇：屬性有寬、高、方向、狀態（有多少節），方法：顯示，跑 2、設計食物：屬性寬、高 3、顯示蛇：根據狀態向地圖裏加元素 4、蛇跑起來：下一節到前一節的位置，蛇頭根據

用JS實現的貪吃蛇遊戲

JavaScript 小遊戲需要用到html、css、javascript 和 DOM 這些知識點就可以了。主要是js，其他只是一些基本的知識。js貌似也不是很難。但是問題就在這裏，即使知識點都會了，但是還是無法綜合運用把東西做出來遊戲界面先把整個遊戲界面做出來： <!DOCTYPE ht

C語言實現經典小遊戲貪吃蛇

純c語言寫的小遊戲，本人才疏學淺，程式碼有很多不足，僅供給初學者參考。實現功能： ↑ ↓ ← →分別用來控制上下左右四個方向空格暫停 esc退出遊戲 f1加速， f2 減速蛇的長度越長，速度越快（速度有上限）食物顏色隨機

[原始碼和文件分享]基於WIN32 API介面程式設計實現的貪吃蛇遊戲

1 設計目的和任務本次期末大作業採用課程設計的形式進行，作為《Windows程式設計》課程的期末考核。要求綜合運用Windows程式設計的相關知識，完成大作業的相關內容，並撰寫設計報告。其目的和任務是：鞏固和加深學生對本課程基本知識的理解和掌握熟悉使用Windows環

經典遊戲---貪吃蛇從C++程式碼實現

1. 題目描述小時候都玩過貪吃蛇這個經典的小遊戲，在我們的普通手機裡似乎都是必備的。它伴隨著我們的童年，經歷了好多好多時光。它帶給我們了許多的樂趣。學習了c++這門程式語言後，我就想著能不能把它做出來，在我查看了相關知識後，明白了其中的道理，就嘗試著自己寫出這個小遊

go語言程式設計小遊戲--貪吃蛇

前提準備條件:安裝gcc環境，可以百度也可以安裝這個連結：https://pan.baidu.com/s/1BbXFcBZywK-k-eIkWqY3Ug 提取碼：04wp 複製這段內容後開啟百度網盤手機App，操作更方便哦，直接解壓，然後放到環境變數中。程式碼：主檔案： package mai

C語言程式設計小遊戲——貪吃蛇，覺得不錯請關注點贊加轉發！

C/C++企業實戰級課程資源（素材+原始碼+視訊）、編譯大禮包免費分享，需要的加學習群892643663。 #define N 200 #include <graphics.h> #include <stdlib.h> #include <dos.h>

python小遊戲——貪吃蛇

# -*- coding: utf-8 -*- """ Created on Sat Jan 13 21:45:32 2018 @author: 樂亦亦樂 """ #!/usr/bin/env python import pygame,sys,time,ra

c++小遊戲——貪吃蛇

#include #include #include #include #include <conio.h> #include #include <windows.h>

Day02 騷年，玩蛇嗎？（製作小遊戲貪吃蛇）

花了兩天時間，終於讓我的蛇跑起來了，第一次自己獨立做成功一個小遊戲，感覺很有成就感。嘻嘻嘻嘻嘻嘻~~~ 附上實現後的圖，可以玩，但還有些細節需要改進，比如記分，暫停，重玩等功能暫時還沒實現，以後會改進的我說一下思路和步驟第一步：JFrame畫出視窗第二步：重寫p

動手用JAVA做個小遊戲--貪吃蛇

轉眼在大學蹲了快三個春秋，在這幾年裡我可謂是經歷過了大學的“風風雨雨”，逃課、泡女、通宵打機......種種的種種！還有一年就畢業了，回首過去，說實在的還真有點後悔，畢竟看到別人被大公司提前錄用而自己還在碌碌無為在此我想給那些剛進大學的朋友一個忠告：大學真的真的不是給你來玩

在 Linux 下實現智慧貪吃蛇

本週的任務是在 Linux 環境下編寫程式碼，實現一隻智慧的貪吃蛇，使其能通過演算法具有 “感知 - 決策 - 行動” 的能力。熟悉 Linux 環境對於 Linux ，我之前早有耳聞，卻沒有真正的使用過。大家都說計算機從業者應該學會使用 Lin

C#winform 經典小遊戲貪吃蛇V1.0（一）

關於V1.0 為什麼我給這個版本定義為V1.0嘞，因為在這個版本中僅僅實現了蛇的自動行進，按鍵對蛇的行進方向的操作和吃掉食物蛇身的增長等操作。但是任何事情都必須一步一步來，當我們完成這個乞丐版的貪吃蛇，就為我們版本的更新打下了基礎。思路首先我們

最簡單的HTML5遊戲——貪吃蛇

<html> <head> <meta charset="UTF-8"/> <title>貪吃蛇</title> </head> <body> <canvas id="canvas" width="1000" h

【20171210】用java實現簡易貪吃蛇

一、各個類之間的關係之前學軟體工程不努力，現在徒傷悲啊，不會用visio畫類圖…大致的類、方法之間的關係就是這樣。二、遊戲介面三、具體實現： 1.遊戲視窗要考慮的問題有

字元遊戲-貪吃蛇的設計

現在我們可以寫一個簡單的字元遊戲–貪吃蛇，以下大體講一下它的設計。貪吃蛇分為幾個部分：蛇的移動食物的生成蛇的伸長蛇的控制死亡的判斷地圖的輸出首先是設計地圖：然後是食物的生成：關於蛇的伸長：想法是當蛇將要

C語言小遊戲————貪吃蛇.c

1.主函式框架的搭建 int main (void) { starup();//資料初始化 while(1) { show();//列印畫面 updateWithoutInput();//與使用者輸入無關的更新 updateWithInput();//與

手把手教學h5小遊戲 - 貪吃蛇

簡單的小遊戲製作，程式碼量只有兩三百行。遊戲可自行擴充套件延申。原始碼已釋出至github，喜歡的點個小星星，原始碼入口：game-snake 遊戲已釋出，遊戲入口：http://snake.game.yanjd.top 第一步 - 製作想法遊戲如何實現是首要想的，這裡我的想法如下：利用canva

Android-貪吃蛇小遊戲-分析與實現-Kotlin語言描述

otl bject vid oid 小遊戲同時們的 http 畫布 Android-貪吃蛇小遊戲-分析與實現-Kotlin語言描述 Overview 本章的主要的內容是貪吃蛇小遊戲的分析和實現，關於實現的具體代碼可以在，文章底部的github的鏈接中找到。整個遊戲通過

Java實現貪吃蛇小遊戲（附完整原始碼）

今天我就從零開始來完成這個小遊戲，完成的方式也是一步一步的新增功能這樣的方式來實現。第一步完成的功能：寫一個介面大家見到的貪吃蛇小遊戲，介面肯定是少不了的。因此，第一步就是寫一個小介面。實現程式碼如下：第二步完成的功能：在介面上畫成一格一格的我們見過的貪吃蛇遊戲

javascript實現遊戲貪吃蛇

相關推薦