H5中canvas如何實現(xiàn)貪吃蛇小游戲-創(chuàng)新互聯(lián)

這篇文章主要介紹了H5中canvas如何實現(xiàn)貪吃蛇小游戲，具有一定借鑒價值，需要的朋友可以參考下。希望大家閱讀完這篇文章后大有收獲。下面讓小編帶著大家一起了解一下。

成都創(chuàng)新互聯(lián)公司堅持“要么做到，要么別承諾”的工作理念，服務(wù)領(lǐng)域包括：網(wǎng)站設(shè)計制作、網(wǎng)站建設(shè)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機端網(wǎng)站、網(wǎng)站推廣等服務(wù)，滿足客戶于互聯(lián)網(wǎng)時代的山南網(wǎng)站設(shè)計、移動媒體設(shè)計的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴！

實現(xiàn)效果如下

H5中canvas如何實現(xiàn)貪吃蛇小游戲

實現(xiàn)思路：

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

一、先把蛇畫出來

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

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

二、蛇能動（重點）

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

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

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

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

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

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

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

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

三、隨機投放食物

  1. 需要隨機食物的位置

  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è)置蛇頭的運動方向，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();
    }
    //隨機函數(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)的隨機位置
        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，使隨機數(shù)重給
                    isOnSnake = true;
                    break;
                }
            }
        }
        //返回rect，使得實例化對象food有draw的方法
        return rect;
    }
    //判定吃到食物，即蛇頭坐標與食物坐標重合
    function isEat () {
        if (snake.head.x == food.x && snake.head.y == food.y){
            return true;
        } else {
            return false;
        }
    }
</script>
</html>

感謝你能夠認真閱讀完這篇文章，希望小編分享H5中canvas如何實現(xiàn)貪吃蛇小游戲內(nèi)容對大家有幫助，同時也希望大家多多支持創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計公司，關(guān)注創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計公司行業(yè)資訊頻道，遇到問題就找創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計公司，詳細的解決方法等著你來學(xué)習!

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、網(wǎng)站設(shè)計器、香港服務(wù)器、美國服務(wù)器、虛擬主機、免備案服務(wù)器”等云主機租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

網(wǎng)頁名稱：H5中canvas如何實現(xiàn)貪吃蛇小游戲-創(chuàng)新互聯(lián)
轉(zhuǎn)載來于：http://muchs.cn/article20/csheco.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站制作、小程序開發(fā)、用戶體驗、云服務(wù)器、全網(wǎng)營銷推廣、企業(yè)建站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)

微信小程序開發(fā)