0
0
巴扎黑
发布时间：2017-08-07 15:03:24
|9016人浏览过
|来源于php中文网
原创
本篇文章主要介绍了h5 canvas实现贪吃蛇小游戏，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
本文介绍了H5 canvas实现贪吃蛇小游戏，分享给大家，具体如下：
实现效果如下
实现思路：
ps：这个只是思路，详细可看代码注释
立即学习“前端免费学习笔记（深入）”；
一、先把蛇画出来
定义一下蛇的结构，用一个数组保存一堆矩形，包含蛇头（红）和蛇身（灰）。
画蛇（初始状态）
二、蛇能动（重点）
蛇移动方式：自始至终都只有蛇头在动
画一个灰色的方块，位置与蛇头重叠
将这个方块插到数组中蛇头后面一个的位置arrar.splice(0,1,rect)
砍去末尾的方块array.pop()
将蛇头向设定方向移动一格
需要一个保存方向的变量(direction)
根据方向进行移动，一次移动一个格
根据按键改方向
三、随机投放食物
需要随机食物的位置
需要判断食物在不在蛇身上。
四、吃食物
判断食物是否与蛇头重叠
数组加一个元素（少删除一个元素就是加一个元素）
生成新的食物
五、gameover
撞墙判定
装自己判定
Document
相关文章
相关标签:
本站声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
热门AI工具
相关专题
本专题系统讲解 C++ 在单元测试与代码质量保障方面的实战方法，包括测试驱动开发理念、Google Test/Google Mock 的使用、测试用例设计、边界条件验证、持续集成中的自动化测试流程，以及常见代码质量问题的发现与修复。通过工程化示例，帮助开发者建立 可测试、可维护、高质量的 C++ 项目体系。
10
2026.01.16
热门下载
相关下载
精品课程
共102课时 | 6.7万人学习
共132课时 | 9.5万人学习
共60课时 | 3.8万人学习
最新文章
Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
