您當前位置：圖趣網（Tuquu） >> 網頁設計教程 >> 移動前端 >> 瀏覽設計教程

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

2017/10/21 15:07:46來源：互聯(lián)網

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

實現(xiàn)結果如下

實現(xiàn)思路：

ps：這個只是思路，細致可看代碼解釋

一、先把蛇畫出來

  1. 定義一下蛇的結構，用一個數(shù)組保存一堆矩形，包含蛇頭（紅）和蛇身（灰）。
  2. 畫蛇（初始狀況）

二、蛇能動（重點）

  1. 蛇移動體例：自始至終都只有蛇頭在動
    1. 畫一個灰色的方塊，位置與蛇頭重疊
    2. 將這個方塊插到數(shù)組中蛇頭后面一個的位置arrar.splice(0,1,rect)
    3. 砍去末尾的方塊array.pop()
    4. 將蛇頭向設定方向移動一格
  2. 必要一個保存方向的變量(direction)
  3. 根據方向進行移動，一次移動一個格
  4. 根據按鍵改方向

三、隨機投放食物

  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');

    //構造對象方塊
    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();
    }

    //構造對象蛇
    function Snake () {

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

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

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

        //此處將兩個后面常用的東西定為屬性，方便后面調用
        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、將蛇頭向設定方向移動一格
        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();
        }

        //設置蛇頭的運動方向，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)
    }

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

        //判定食物是否出如今蛇身上，假如是重合，則重復活成一遍
        var isOnSnake = true;

        //設置食物出現(xiàn)的隨機位置
        while(isOnSnake){
            //實行后先將判定條件設置為false，假如判定不重合，則不會再實行下列語句
            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){
                    //假如判定重合，將其設置為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>

以上就是本文的悉數(shù)內容，盼望對大家的學習有所幫助，也盼望大家多多支持圖趣網。

[教程作者：小pxu]
關鍵詞：實現(xiàn) 貪吃 貪吃蛇 游戲
免責聲明：本站文章系圖趣網整理發(fā)布，如需轉載，請注明出處，素材資料僅供個人學習與參考，請勿用于商業(yè)用途！
本文地址：http://m.likemindfilms.com/tutorial/wd415.html
html5教你做炫酷的碎片式圖片切換 canvas
LocalStorage記住用戶和密碼功能
圖趣網微信
建議反饋
×