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

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

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

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

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

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

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

一、先把蛇畫出來

定義一下蛇的結(jié)構(gòu)，用一個(gè)數(shù)組保存一堆矩形，包含蛇頭（紅）和蛇身（灰）。
畫蛇（初始狀態(tài)）

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

蛇移動(dòng)方式：自始至終都只有蛇頭在動(dòng)

畫一個(gè)灰色的方塊，位置與蛇頭重疊
將這個(gè)方塊插到數(shù)組中蛇頭后面一個(gè)的位置arrar.splice(0,1,rect)
砍去末尾的方塊array.pop()
將蛇頭向設(shè)定方向移動(dòng)一格

需要一個(gè)保存方向的變量(direction)
根據(jù)方向進(jìn)行移動(dòng)，一次移動(dòng)一個(gè)格
根據(jù)按鍵改方向

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

需要隨機(jī)食物的位置
需要判斷食物在不在蛇身上。

四、吃食物

判斷食物是否與蛇頭重疊
數(shù)組加一個(gè)元素（少刪除一個(gè)元素就是加一個(gè)元素）
生成新的食物

五、gameover

撞墻判定
裝自己判定

<!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 () {
        //定義一個(gè)空數(shù)組存放組成整蛇的方塊對象
        var snakeArray = [];
        //畫出4個(gè)方塊，設(shè)置成灰色
        for (var i = 0; i < 4; i++) {
            var rect = new Rect(i*20,0,20,20,"gray");
            //之所以用splice（往前加）而不是用push（往后加），是為了讓蛇頭出現(xiàn)在數(shù)組第一個(gè)位置
            snakeArray.splice(0,0,rect);     
        }
        //把數(shù)組第一個(gè)作為蛇頭，蛇頭設(shè)成紅色
        var head = snakeArray[0];
        head.color = "red";
        //此處將兩個(gè)后面常用的東西定為屬性，方便后面調(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();
        } 
    }
    //蛇移動(dòng)的方法
    Snake.prototype.move = function () {
        //此處是核心部分，蛇的 移動(dòng)方式
        //1、畫一個(gè)灰色的方塊，位置與蛇頭重疊
        //2、將這個(gè)方塊插到數(shù)組中蛇頭后面一個(gè)的位置
        //3、砍去末尾的方塊
        //4、將蛇頭向設(shè)定方向移動(dòng)一格
        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)動(dòng)方向，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()
    //定時(shí)器
    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，如果判定不重合，則不會(huì)再執(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>

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

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

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

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

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

猜你還喜歡下面的內(nèi)容

成人午夜视频全免费观看高清-秋霞福利视频一区二区三区-国产精品久久久久电影小说-亚洲不卡区三一区三区一区

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