H5 canvas完成嘴馋蛇小手机游戏

日期:2020-10-10 类型:科技新闻 

关键词:如何制作微信小程序,微信小程序源码,小程序码生成,凡科网微信小程序,微信公众号小程序

本文详细介绍了H5 canvas完成嘴馋蛇小手机游戏,共享给大伙儿,实际以下:

完成实际效果以下

完成思路:

ps:这个只是思路,详尽可看编码注解

1、先把蛇画出来

  1. 界定1下蛇的构造,用1个数字能量数组储存1堆矩形框,包括蛇头(红)和蛇身(灰)。
  2. 画蛇(原始情况)

2、蛇能动(关键)

  1. 蛇挪动方法:从始至终都仅有蛇头在动
    1. 画1个灰色的方块,部位与蛇头重合
    2. 将这个方块插到数字能量数组中蛇头后边1个的部位arrar.splice(0,1,rect)
    3. 砍去结尾的方块array.pop()
    4. 将蛇头向设置方位挪动1格
  2. 必须1个储存方位的自变量(direction)
  3. 依据方位开展挪动,1次挪动1个格
  4. 依据功能键改方位

3、任意投放食材

  1. 必须任意食材的部位
  2. 必须分辨食材在不在蛇身上。

4、吃食材

  1. 分辨食材是不是与蛇头重合
  2. 数字能量数组加1个元素(少删掉1个元素便是加1个元素)
  3. 转化成新的食材

5、gameover

  1. 撞墙判断
  2. 装自身判断
     
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF⑻">
    <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 () {

        //界定1个空数字能量数组储放构成整蛇的方块目标
        var snakeArray = [];

        //画出4个方块,设定成灰色
        for (var i = 0; i < 4; i++) {
            var rect = new Rect(i*20,0,20,20,"gray");
            //之因此用splice(往前加)而并不是用push(往后面加),是以便让蛇头出現在数字能量数组第1个部位
            snakeArray.splice(0,0,rect);     
        }

        //把数字能量数组第1个做为蛇头,蛇头设成鲜红色
        var head = snakeArray[0];
        head.color = "red";

        //此处将两个后边常见的物品定为特性,便捷后边启用
        this.head = snakeArray[0];  //蛇头
        this.snakeArray = snakeArray;  //整蛇数字能量数组

        //给定原始部位向右(同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、画1个灰色的方块,部位与蛇头重合
        //2、将这个方块插到数字能量数组中蛇头后边1个的部位
        //3、砍去结尾的方块
        //4、将蛇头向设置方位挪动1格
        var rect = new Rect(this.head.x,this.head.y,this.head.w,this.head.h,"gray");
        this.snakeArray.splice(1,0,rect);

        //分辨是不是吃到食材,isEat判断涵数写在最终了
        //吃到则食材再次给部位,不砍去最终1节,即蛇变长
        //没吃到则结尾砍掉1节,即蛇长度不会改变
        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);
        }

        // 撞自身,循环系统从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();
    }

    //任意涵数,得到[min,max]范畴的值
    function getNumberInRange (min,max) {
        var range = max-min; 
        var r = Math.random();
        return Math.round(r*range+min)
    }

    //搭建食材目标
    function getRandomFood () {

        //判断食材是不是出現在蛇身上,假如是重叠,则再次转化成1遍
        var isOnSnake = true;

        //设定食材出現的任意部位
        while(isOnSnake){
            //实行后先将判断标准设定为false,假如判断不重叠,则不容易再实行以下句子
            isOnSnake = false;
            var indexX = getNumberInRange(0,canvas.width/20⑴);
            var indexY = getNumberInRange(0,canvas.height/20⑴);
            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,使任意数重给
                    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>

以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多适用脚本制作之家。

上一篇:html5机构內容 返回下一篇:没有了