溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

如何用HTML5制作貪吃蛇游戲

發(fā)布時間：2020-07-09 15:09:59 來源：億速云 閱讀：347 作者：Leah 欄目：web開發(fā)

如何用HTML5制作貪吃蛇游戲？很多新手對此不是很清楚，為了幫助大家解決這個難題，下面小編將為大家詳細(xì)講解，有這方面需求的人可以來學(xué)習(xí)下，希望你能有所收獲。

本文介紹了H5 canvas實(shí)現(xiàn)貪吃蛇小游戲，分享給大家，具體如下：

實(shí)現(xiàn)效果如下

如何用HTML5制作貪吃蛇游戲

實(shí)現(xiàn)思路：

ps：這個只是思路，詳細(xì)可看代碼注釋

一、先把蛇畫出來

  1. 定義一下蛇的結(jié)構(gòu)，用一個數(shù)組保存一堆矩形，包含蛇頭（紅）和蛇身（灰）。

  2. 畫蛇（初始狀態(tài)）

二、蛇能動（重點(diǎn)）

  1. 蛇移動方式：自始至終都只有蛇頭在動

    1. 畫一個灰色的方塊，位置與蛇頭重疊

    2. 將這個方塊插到數(shù)組中蛇頭后面一個的位置arrar.splice(0,1,rect)

    3. 砍去末尾的方塊array.pop()

    4. 將蛇頭向設(shè)定方向移動一格

  2. 需要一個保存方向的變量(direction)

  3. 根據(jù)方向進(jìn)行移動，一次移動一個格

  4. 根據(jù)按鍵改方向

三、隨機(jī)投放食物

  1. 需要隨機(jī)食物的位置

  2. 需要判斷食物在不在蛇身上。

四、吃食物

  1. 判斷食物是否與蛇頭重疊

  2. 數(shù)組加一個元素（少刪除一個元素就是加一個元素）

  3. 生成新的食物

五、gameover

  1. 撞墻判定

  2. 裝自己判定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #canvas{
            box-shadow: 0 5px 40px black;
        }
    </style>
</head>
<body>
    <canvas id="canvas" width="800" height="500"></canvas>
</body>
<script>
    var canvas = document.getElementById('canvas');
    var context = canvas.getContext('2d');

    //構(gòu)造對象方塊
    function Rect (x,y,w,h,color) {
        this.x = x;
        this.y = y;
        this.w = w;
        this.h = h;
        this.color = color;
    }
    //畫方塊的方法
    Rect.prototype.draw = function () {
        context.beginPath();
        context.fillStyle = this.color;
        context.rect(this.x,this.y,this.w,this.h);
        context.fill();
        context.stroke();
    }

    //構(gòu)造對象蛇
    function Snake () {

        //定義一個空數(shù)組存放組成整蛇的方塊對象
        var snakeArray = [];

        //畫出4個方塊，設(shè)置成灰色
        for (var i = 0; i < 4; i++) {
            var rect = new Rect(i*20,0,20,20,"gray");
            //之所以用splice（往前加）而不是用push（往后加），是為了讓蛇頭出現(xiàn)在數(shù)組第一個位置
            snakeArray.splice(0,0,rect);     
        }

        //把數(shù)組第一個作為蛇頭，蛇頭設(shè)成紅色
        var head = snakeArray[0];
        head.color = "red";

        //此處將兩個后面常用的東西定為屬性，方便后面調(diào)用
        this.head = snakeArray[0];  //蛇頭
        this.snakeArray = snakeArray;  //整蛇數(shù)組

        //給定初始位置向右(同keyCode右箭頭)
        this.direction = 39;
    }
    //畫蛇的方法
    Snake.prototype.draw = function () {
        for (var i = 0; i < this.snakeArray.length; i++) {
            this.snakeArray[i].draw();
        } 
    }
    //蛇移動的方法
    Snake.prototype.move = function () {

        //此處是核心部分，蛇的 移動方式
        //1、畫一個灰色的方塊，位置與蛇頭重疊
        //2、將這個方塊插到數(shù)組中蛇頭后面一個的位置
        //3、砍去末尾的方塊
        //4、將蛇頭向設(shè)定方向移動一格
        var rect = new Rect(this.head.x,this.head.y,this.head.w,this.head.h,"gray");
        this.snakeArray.splice(1,0,rect);

        //判斷是否吃到食物，isEat判定函數(shù)寫在最后了
        //吃到則食物重新給位置，不砍去最后一節(jié)，即蛇變長
        //沒吃到則末尾砍掉一節(jié)，即蛇長度不變
        if (isEat()){
            food = new getRandomFood();
        }else{
            this.snakeArray.pop();
        }

        //設(shè)置蛇頭的運(yùn)動方向，37 左，38 上，39 右，40 下
        switch (this.direction) {
            case 37:
                this.head.x -= this.head.w
                break;
            case 38:
                this.head.y -= this.head.h
                break;
            case 39:
                this.head.x += this.head.w
                break;
            case 40:
                this.head.y += this.head.h
                break;
            default:    
                break;
        }

        // gameover判定
        // 撞墻
        if (this.head.x > canvas.width || this.head.x < 0 || this.head.y > canvas.height || this.head.y < 0){
            clearInterval(timer);
        }

        // 撞自己，循環(huán)從1開始，避開蛇頭與蛇頭比較的情況
        for (var i = 1; i < this.snakeArray.length; i++) {
            if (this.snakeArray[i].x == this.head.x && this.snakeArray[i].y == this.head.y){
                clearInterval(timer);
            }
        }
    }

    //畫出初始的蛇
    var snake = new Snake()
    snake.draw();

    //畫出初始的食物
    var food = new getRandomFood()

    //定時器
    var timer = setInterval(function () {
        context.clearRect(0,0,canvas.width,canvas.height);
        food.draw();
        snake.move();
        snake.draw();
    }, 100)

    //鍵盤事件，其中的if判定是為了讓蛇不能直接掉頭
    document.onkeydown = function (e) {
        var ev = e||window.event;
        switch(ev.keyCode){
            case 37:{
                if (snake.direction !== 39){
                    snake.direction = 37;
                }
                break;
            }
            case 38:{
                if (snake.direction !== 40){
                    snake.direction = 38;
                }
                break;
            }
            case 39:{
                if (snake.direction !== 37){
                    snake.direction = 39;
                }
                break;
            }
            case 40:{
                if (snake.direction !== 38){
                    snake.direction = 40;
                }
                break;
            }    
        }
        ev.preventDefault();
    }

    //隨機(jī)函數(shù)，獲得[min,max]范圍的值
    function getNumberInRange (min,max) {
        var range = max-min; 
        var r = Math.random();
        return Math.round(r*range+min)
    }

    //構(gòu)建食物對象
    function getRandomFood () {

        //判定食物是否出現(xiàn)在蛇身上，如果是重合，則重新生成一遍
        var isOnSnake = true;

        //設(shè)置食物出現(xiàn)的隨機(jī)位置
        while(isOnSnake){
            //執(zhí)行后先將判定條件設(shè)置為false，如果判定不重合，則不會再執(zhí)行下列語句
            isOnSnake = false;
            var indexX = getNumberInRange(0,canvas.width/20-1);
            var indexY = getNumberInRange(0,canvas.height/20-1);
            var rect = new Rect(indexX*20, indexY*20, 20, 20, "green");
            for (var i = 0; i < snake.snakeArray.length; i++) {
                if(snake.snakeArray[i].x == rect.x && snake.snakeArray[i].y == rect.y){
                    //如果判定重合，將其設(shè)置為true，使隨機(jī)數(shù)重給
                    isOnSnake = true;
                    break;
                }
            }
        }
        //返回rect，使得實(shí)例化對象food有draw的方法
        return rect;
    }

    //判定吃到食物，即蛇頭坐標(biāo)與食物坐標(biāo)重合
    function isEat () {
        if (snake.head.x == food.x && snake.head.y == food.y){
            return true;
        } else {
            return false;
        }
    }

</script>
</html>

看完上述內(nèi)容是否對您有幫助呢？如果還想對相關(guān)知識有進(jìn)一步的了解或閱讀更多相關(guān)文章，請關(guān)注億速云行業(yè)資訊頻道，感謝您對億速云的支持。

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手