首页 > 作文

H5 canvas实现贪吃蛇小游戏

更新时间:2023-04-06 11:58:37 阅读: 评论:0

本文介绍了h5 canvas实现贪吃蛇小游戏,分享给大家,具体如下:

实现效果如下

实现思路:

ps:这个只是思路,详细可看代码注释

一、先把蛇画出来

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

二、蛇能动(重点)

蛇移动方式:自始至终都只有蛇头在动画一个灰色的方块,位置与蛇头重叠将这个方块插到数组中蛇头后面一个的位置arrar.splice(0,1,rect)砍去末尾的方块array.pop()将蛇头向设定方向移动一格需要一个保存方向的变量(direction)根据方向进行移动,一次移动一个格根据按键改方向

三、随机投放食物

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

四、吃食物

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

五、gameover

撞墙判定装自己判定
<!doctype html><html lang="en"><head>    <meta chart="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 () {        //定义一个空数组存放组成整蛇的方块对象        var snakearray = [];        //画出4个方块,设置成灰色        for (var i = 0; i < 4; i++) {            var rect = nebeesw 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);        //判断是否吃到食物,iat判定函数写在最后了        //吃到则食物重新给位置,不砍去最后一节,即蛇变长        //没吃到则末尾砍掉一节,即蛇长度不变        if (iat()){            food = new getrandomfood();        }el{            this.snakearray.pop();        }        //设置蛇头的运动方向,37 左,38 上,39 右,40 汤药下        switch (this.direction) {            ca 37:                this.head.x -= this.head.w                break;            ca 38:                this.head.y -= this.head.h                break;            ca 39:                this.head.x += this.head.w                break;            ca 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 = tinterval(function () {        context.clearrect(0,0,canvas.wid词性分类12种th,canvas.height);        food.draw();        snake.move();        snake.draw();    }, 100)    //键盘事件,其中的if判定是为了让蛇不能直接掉头    document.onkeydown = function (e) {        var ev = e||window.event;        switch(ev.keycode){            ca 37:{                if (snake.direction !== 39){                    snake.direction = 37;                }                break;            }            ca 38:{                if (snake.direction !== 40){                    snake.direction = 38;                }                break;            }            ca 39:{                if (snake.direction !== 37){                    snake.direction = 39;                }                break;            }            ca 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){            //执行后先将判定条件设置为fal,如果判定不重合,则不会再执行下列语句            isonsnake = fal;            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 iat () {        if (snake.head.x == food.x && snake.head.y == food.y){            return true;        } el {            return fal;        }    }</script></html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持www.887551.com。

本文发布于:2023-04-06 11:58:35,感谢您对本站的认可!

本文链接:https://www.wtabcd.cn/fanwen/zuowen/999c8a919844a92f4f4932d40368d84b.html

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。

本文word下载地址:H5 canvas实现贪吃蛇小游戏.doc

本文 PDF 下载地址:H5 canvas实现贪吃蛇小游戏.pdf

标签:蛇头   食物   方块   位置
相关文章
留言与评论(共有 0 条评论)
   
验证码:
Copyright ©2019-2022 Comsenz Inc.Powered by © 专利检索| 网站地图