本文介绍了H5 canvas实现贪 吃 蛇小游戏，分享给大家，具体如下：
实现效果如下
实现思路：
ps：这个只是思路，详细可看 代码注释
一、先把蛇画出来
@H_ 406 _21@ 定义一下蛇的结构，用一个数组保存一堆矩形，包含蛇头（红）和蛇身（灰）。 画蛇（初始状态）二、蛇能动（重点）
蛇移动方式：自始至终都只有蛇头在动 画一个灰色的方块，位置与蛇头重叠 将这个方块插到数组中蛇头后面一个的位置arrar. splice (0,1,rect) 砍去末尾的方块array.pop() 将蛇头向设定 方向 移动一格 需要一个保存方向的变量(direction) 根据方向进行移动，一次移动一个格 根据按键改方向三、随机投放食物
需要随机食物的位置 需要判断食物在不在蛇身上。四、吃食物
判断食物 是否 与蛇头重叠 数组加一个元素（少删除一个元素就是加一个元素） 生成新的食物五、g am eover
撞墙判定 装自己判定&nbs p;
<!DOCTY PE ht ML >
<html lang="en">
<head>
< ;m eta charset="UTF-8">
<t IT le>Document</title>
<style>
# canvas{
box -s hadow: 0 5px 40px black;
}
</style>
</head>
<body>
<canvas id="canvas" width="800" h ei ght="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. PR ototype.draw = function () {
context.be gin Path();
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
br eak;
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.p rev entDefault();
}
//随机函数，获得[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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
总结
以上是 为你收集整理的 H5 canvas实现贪吃蛇小游戏 全部内容，希望文章能够帮你解决 H5 canvas实现贪吃蛇小游戏 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。
查看更多关于H5 canvas实现贪吃蛇小游戏的详细内容...
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did205576