亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

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

  發(fā)布時間：2017-07-28 14:26:47   作者：小pxu   我要評論
本篇文章主要介紹了H5 canvas實現(xiàn)貪吃蛇小游戲，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

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

實現(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>

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

最新評論