2. 程式人生 > >最簡單的HTML5遊戲——貪吃蛇

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

阿新 • • 發佈：2019-01-10
<html>
<head>
<meta charset="UTF-8"/>
<title>貪吃蛇</title>
</head>

<body>
    <canvas id="canvas" width="1000" height="700"></canvas>
    <div>
        <input id="switch" type="button" value="開始" onclick="clickSwitch()"></input><br/>
        <input id="content" type="text" value="0"></input>
    </div>
</body>

<script type="text/javascript">
    const WIDTH = 1000;
    const HEIGHT = 700;
    const SNACK_WIDTH = 20;
    const SNACK_HEIGHT = 20;
    //移動時間間隔
    const TIME_MOVE = 300;
    //食物重新整理時間
    const TIME_FOOD = 5000;
    //食物總量
    const TOTAL_FOOD = 200;
    //石頭重新整理時間
    const TIME_STONE = 8000;
    //石頭總量
    const TOTAL_STONE = 300;
    
    var switchStatus = 0;
    var changeMove = "right";
    var currentMove = "right";
    //所有被用的位置
    var points = new Array();
    var snacks = new Array();
    var foods = new Array();
    var stones = new Array();
    var moveing = false;
    var timeMoveId, timeFoodId, timeStoneId;
    
    window.onload = function () {
        createGround();
    };
    
    //捕獲按的哪個鍵
    function keyDown(event) {
        if (event.keyCode == "87") {
            //按下W鍵
            changeMove = "up";
        } else if (event.keyCode == "68") {
            //按下D鍵
            changeMove = "right";
        } else if (event.keyCode == "83") {
            //按下S鍵
            changeMove = "down";
        } else if (event.keyCode == "65") {
            //按下A鍵
            changeMove = "left";
        }
    }

    function handlePoints(x, y, type) {
        if (0 == type) {
            points.push(x+y*WIDTH);
        } else {
            var index = points.indexOf(x+y*WIDTH);
            if (index != -1) {
                points.splice(index, 1);
            }
        }
    }
    
    //貪吃蛇
    function snack(x, y) {
        this.x = x;
        this.y = y;
    }
    
    //食物
    function food(x, y) {
        this.x = x;
        this.y = y;
    }
    
    //石頭
    function stone(x, y) {
        this.x = x;
        this.y = y;
    }
    
    //開關操作
    function clickSwitch() {
        if (switchStatus == 0 || switchStatus == 2) {
            document.getElementById("switch").value = "暫停";
            if (switchStatus == 0) {
                //開始
                play();
            }
            switchStatus = 1;
        } else if (switchStatus == 1) {
            document.getElementById("switch").value = "繼續";
            switchStatus = 2;
        }
    }
    
    //碰撞判定並操作
    function judge(x, y) {
        /*** 判斷是否撞上邊界  ***/
        if (x < 0 || x >= WIDTH || y < 0 || y >= HEIGHT) {
            end();
            return;
        }
        
        var i;
        /*** 判斷是否撞上自己  ***/
        for (i = 1; i < snacks.length; i++) {
            if (snacks[0].x == snacks[i].x && snacks[0].y == snacks[i].y) {
                end();
                return;
            }
        }
        
        /*** 判斷是否撞上石頭  ***/
        for (i = 0; i < stones.length; i++) {
            if (snacks[0].x == stones[i].x && snacks[0].y == stones[i].y) {
                end();
                return;
            }
        }
        
        /*** 判斷是否撞上食物  ***/
         var flag = false;
        for (i = 0; i < foods.length; i++) {
            if (x == foods[i].x && y == foods[i].y) {
                flag = true;
                foods.splice(i, 1);
            }
        }
        var newSnack = new snack(x, y);
        snacks.unshift(newSnack);
        if (!flag) {
            var p = snacks.pop();
            handlePoints(p.x, p.y, 1);
        }
        document.getElementById("content").value = "x:"+snacks[0].x+" y:"+snacks[0].y+" length:"+snacks.length;
        
        refresh();
    }
    
    //移動貪吃蛇
    function move() {
        if(moveing == false && switchStatus == 1) {
            moveing = true;
            if ((currentMove != "right" && changeMove == "left") || (currentMove == "left" && changeMove == "right")) {
                currentMove = "left";
                judge(snacks[0].x-SNACK_WIDTH, snacks[0].y);
            } else if ((currentMove != "down" && changeMove == "up") || (currentMove == "up" && changeMove == "down")) {
                currentMove = "up";
                judge(snacks[0].x, snacks[0].y-SNACK_HEIGHT);
            } else if ((currentMove != "left" && changeMove == "right")  || (currentMove == "right" && changeMove == "left")) {
                currentMove = "right";
                judge(snacks[0].x+SNACK_WIDTH, snacks[0].y);
            } else if ((currentMove != "up" && changeMove == "down") || (currentMove == "down" && changeMove == "up")){
                currentMove = "down";
                judge(snacks[0].x, snacks[0].y+SNACK_HEIGHT);
            }
            changMove = currentMove;
        }
        moveing = false;
    }
    
    //建立地圖
    function createGround() {
        var canvas = document.getElementById("canvas");
        var draw = canvas.getContext('2d');
        //清除原圖形
        draw.clearRect(0, 0, WIDTH, HEIGHT);
        draw.strokeStyle = "red";
        draw.strokeRect(0, 0, WIDTH, HEIGHT);
    }
    
    //建立食物
    function createFood() {
        if (foods.length < TOTAL_FOOD) {
            var x = Math.round(Math.random()*(WIDTH/SNACK_WIDTH-1))*SNACK_WIDTH;
            var y = Math.round(Math.random()*(HEIGHT/SNACK_HEIGHT-1))*SNACK_HEIGHT;
            if (points.indexOf(x+y*WIDTH) == -1) {
                var newFood = new food(x, y);
                //alert(newFood.x + "****" + newFood.y);
                var canvas = document.getElementById("canvas");
                var draw = canvas.getContext('2d');
                draw.fillStyle = "green";
                draw.fillRect(x, y, SNACK_WIDTH, SNACK_HEIGHT);
                foods.push(newFood);
                handlePoints(x, y, 0);
            }
        }
    }
    
    //建立石頭
    function createStone() {
        if (stones.length < TOTAL_STONE) {
            var x = Math.round(Math.random()*(WIDTH/SNACK_WIDTH-1))*SNACK_WIDTH;
            var y = Math.round(Math.random()*(HEIGHT/SNACK_HEIGHT-1))*SNACK_HEIGHT;
            if (points.indexOf(x+y*WIDTH) == -1) {
                var newStone = new stone(x, y);
                var canvas = document.getElementById("canvas");
                var draw = canvas.getContext('2d');
                draw.fillStyle = "#663300";
                draw.beginPath();   
                draw.arc(x+SNACK_WIDTH*0.5, y+SNACK_HEIGHT*0.5, SNACK_WIDTH*0.5+1, 0, Math.PI*2, true);     
                draw.closePath();                        
                draw.fill();
                stones.push(newStone);
                handlePoints(x, y, 0);
            }
        }
    }
    
    //重新整理場景
    function refresh() {
        var canvas = document.getElementById("canvas");
        var draw = canvas.getContext('2d');
        //清除原圖形
        draw.clearRect(1, 1, WIDTH-2, HEIGHT-2);
        
        /*** 邊界  ***/
        draw.strokeStyle = "red";
        draw.strokeRect(0, 0, WIDTH, HEIGHT);
        
        var i;
        /*** 食物   ***/
        draw.fillStyle = "green";
        for (i = 0; i < foods.length; i++) {
            draw.fillRect(foods[i].x, foods[i].y, SNACK_WIDTH, SNACK_HEIGHT);
        }
        
        /*** 石頭  ***/
        draw.fillStyle = "#663300";
        for (i = 0; i < stones.length; i++) {
            draw.beginPath();   
            draw.arc(stones[i].x+SNACK_WIDTH*0.5, stones[i].y+SNACK_HEIGHT*0.5, SNACK_WIDTH*0.5+1, 0, Math.PI*2, true);     
            draw.closePath();                        
            draw.fill();
        }
        
        /***  貪吃蛇    ***/
        draw.fillStyle = "blue";                   
        draw.beginPath();   
        //圓心x座標|圓心y座標|半徑|始|PI為圓周率，Math.PI*2為畫圓|true為時針方向：逆時針，0為順時針
        draw.arc(snacks[0].x+SNACK_WIDTH*0.5, snacks[0].y+SNACK_HEIGHT*0.5, SNACK_WIDTH*0.5+1, 0, Math.PI*2, true);     
        draw.closePath();                        
        draw.fill();
        for (i = 1; i < snacks.length; i++) {
            draw.fillRect(snacks[i].x, snacks[i].y, SNACK_WIDTH, SNACK_HEIGHT);
        }
    }

    //遊戲開始
    function play() {
        createGround();
        
        for (var i = 2; i > 0; i--) {
            var newSnack = new snack(SNACK_WIDTH*i, SNACK_HEIGHT);
            snacks.push(newSnack);
            handlePoints(newSnack.x, newSnack.y, 0);
        }
        refresh();
        
        document.onkeydown = keyDown;
        timeMoveId = setInterval(move, TIME_MOVE);
        timeFoodId = setInterval(createFood, TIME_FOOD);
        timeStoneId = setInterval(createStone, TIME_STONE);
    }
    
    //遊戲結束
    function end() {
        clearInterval(timeMoveId);  
        clearInterval(timeFoodId);  
        clearInterval(timeStoneId);  
        switchStatus = 0;
        changeMove = "right";
        currentMove = "right";
        points.length = 0;
        snacks.length = 0;
        foods.length = 0;
        stones.length = 0;
        moveing = false;
        document.getElementById("switch").value = "開始";
        document.getElementById("content").value = "遊戲結束";
        alert("遊戲結束");
    }
    
</script>

</html>

相關推薦

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

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

HTML5 + js 貪吃蛇遊戲設計與實現

遊戲截圖： 遊戲架構： 此遊戲架構大概分為三層： Game.html： 說明：包含了介面的展示，以及一些事件的入口。 完整程式碼： <html> <head> <title>html5 snake game</title&

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

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

javascript實現遊戲貪吃蛇

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

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

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

html5+js 貪吃蛇

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Author" content="kzm"> <meta name="Keyw

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做個小遊戲--貪吃蛇

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

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

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

字元遊戲-貪吃蛇的設計

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

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

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

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

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

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

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

JS實現最簡單的貪吃蛇小遊戲（面向物件思想）

本次練習主要是練習javaScript的面對物件思想話不多說，先看看效果圖功能描述：1.小蛇在指定地圖內移動，撞到邊界即彈窗，顯示遊戲結束                  2.通過上、下、左、右四個按鍵，控制小蛇運動的方向                   3.隨機產生“

簡單貪吃蛇遊戲js

貪吃蛇 col doc var math oat turn rip onkeyup 新手，仿照別人的寫的。只能實現簡單的功能，代碼如下： 1 <!DOCTYPE html> 2 <html> 3 <head> 4

android 簡單的貪吃蛇小遊戲

貪吃蛇是一款經典的小遊戲，遊戲比較簡單，實現也比較簡單。 本篇部落格將詳細介紹我自己寫的貪吃蛇的思路以及實現方式。 首先我們需要在遊戲介面將遊戲區域劃分成無數個小方格，類似下圖 畫布（遊戲區域）的寬為 width 高為 height ，列數 sizex=width/pointSiz

js-->貪吃蛇小遊戲,能成功玩

function 小遊戲 absolute images 貪吃蛇 <!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>貪吃蛇小遊戲</tit