HTML5制作贪吃蛇游戏-H5教程-PHP中文网

首页

web前端

H5教程

HTML5制作贪吃蛇游戏

巴扎黑

Aug 07, 2017 pm 03:03 PM

h5html5游戏

本篇文章主要介绍了H5 canvas实现贪吃蛇小游戏，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

本文介绍了H5 canvas实现贪吃蛇小游戏，分享给大家，具体如下：

实现效果如下

实现思路：

ps：这个只是思路，详细可看代码注释

一、先把蛇画出来

定义一下蛇的结构，用一个数组保存一堆矩形，包含蛇头（红）和蛇身（灰）。
画蛇（初始状态）

二、蛇能动（重点）

蛇移动方式：自始至终都只有蛇头在动

画一个灰色的方块，位置与蛇头重叠
将这个方块插到数组中蛇头后面一个的位置arrar.splice(0,1,rect)
砍去末尾的方块array.pop()
将蛇头向设定方向移动一格

需要一个保存方向的变量(direction)
根据方向进行移动，一次移动一个格
根据按键改方向

三、随机投放食物

需要随机食物的位置
需要判断食物在不在蛇身上。

四、吃食物

判断食物是否与蛇头重叠
数组加一个元素（少删除一个元素就是加一个元素）
生成新的食物

五、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(&#39;canvas&#39;);
    var context = canvas.getContext(&#39;2d&#39;);

    //构造对象方块
    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 () {

        //定义一个空数组存放组成整蛇的方块对象
        var snakeArray = [];

        //画出4个方块，设置成灰色
        for (var i = 0; i < 4; i++) {
            var rect = new Rect(i*20,0,20,20,"gray");
            //之所以用splice（往前加）而不是用push（往后加），是为了让蛇头出现在数组第一个位置
            snakeArray.splice(0,0,rect);     
        }

        //把数组第一个作为蛇头，蛇头设成红色
        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、画一个灰色的方块，位置与蛇头重叠
        //2、将这个方块插到数组中蛇头后面一个的位置
        //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判定函数写在最后了
        //吃到则食物重新给位置，不砍去最后一节，即蛇变长
        //没吃到则末尾砍掉一节，即蛇长度不变
        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 () {

        //判定食物是否出现在蛇身上，如果是重合，则重新生成一遍
        var isOnSnake = true;

        //设置食物出现的随机位置
        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，使随机数重给
                    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制作贪吃蛇游戏的详细内容。更多信息请关注PHP中文网其他相关文章！

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

html5的div一行可以放两个吗Apr 25, 2022 pm 05:32 PM

html5的div元素默认一行不可以放两个。div是一个块级元素，一个元素会独占一行，两个div默认无法在同一行显示；但可以通过给div元素添加“display：inline;”样式，将其转为行内元素，就可以实现多个div在同一行显示了。

html5中列表和表格的区别是什么Apr 28, 2022 pm 01:58 PM

html5中列表和表格的区别：1、表格主要是用于显示数据的，而列表主要是用于给数据进行布局；2、表格是使用table标签配合tr、td、th等标签进行定义的，列表是利用li标签配合ol、ul等标签进行定义的。

html5怎么让头和尾固定不动Apr 25, 2022 pm 02:30 PM

固定方法：1、使用header标签定义文档头部内容，并添加“position:fixed;top:0;”样式让其固定不动；2、使用footer标签定义尾部内容，并添加“position: fixed;bottom: 0;”样式让其固定不动。

html5中不支持的标签有哪些Mar 17, 2022 pm 05:43 PM

html5中不支持的标签有：1、acronym，用于定义首字母缩写，可用abbr替代；2、basefont，可利用css样式替代；3、applet，可用object替代；4、dir，定义目录列表，可用ul替代；5、big，定义大号文本等等。

HTML5中画布标签是什么May 18, 2022 pm 04:55 PM

HTML5中画布标签是“<canvas>”。canvas标签用于图形的绘制，它只是一个矩形的图形容器，绘制图形必须通过脚本（通常是JavaScript）来完成；开发者可利用多种js方法来在canvas中绘制路径、盒、圆、字符以及添加图像等。

html5废弃了哪个列表标签Jun 01, 2022 pm 06:32 PM

html5废弃了dir列表标签。dir标签被用来定义目录列表，一般和li标签配合使用，在dir标签对中通过li标签来设置列表项，语法“<dir><li>列表项值</li>...</dir>”。HTML5已经不支持dir，可使用ul标签取代。

Html5怎么取消td边框May 18, 2022 pm 06:57 PM

3种取消方法：1、给td元素添加“border:none”无边框样式即可，语法“td{border:none}”。2、给td元素添加“border:0”样式，语法“td{border:0;}”，将td边框的宽度设置为0即可。3、给td元素添加“border:transparent”样式，语法“td{border:transparent;}”，将td边框的颜色设置为透明即可。