使用canvas实现贪吃蛇

文章目录

使用canvas实现贪吃蛇
前言
一、组件版本&项目结构
二、代码讲解
- 1. 移动snake
- - 1.1 代码
  - 1.2 知识点
- 2. 生成被吃者AO
- - 2.1 代码
  - 2.2 知识点
- 3. 吃掉AO&蛇身加长
- - 3.1 代码
  - 3.2 知识点
总结

前言

本文章讲述如何使用vue+canvas实现经典游戏贪吃蛇。体验游戏贪吃蛇 - AO，源码仅供学习参考。你需要知道vue框架，element ui帮助你快速快速开发。

一、组件版本&项目结构

查看详细

二、代码讲解

以下讲解自己写的代码，不会讲解canvas具体怎么实现的。也许可以参考以前的文章使用canvas 的资料

1. 移动snake

1.1 代码

//监听键盘事件
document.onkeydown = this.keyDown;
/*** 方向键控制元素移动函数* @param event 事件*/
keyDown(event) {if (!this.checkActionStartStatus()) return;let keyCodes = [37, 39, 38, 40];if (keyCodes.indexOf(event.keyCode) < 0) return;this.keyCode = event.keyCode;
}
/*** 移动*/
moveSnake() {//清除末尾let tail = this.snakeBodyArr[this.snakeBodyArr.length - 1];this.ctx.clearRect(tail.x, tail.y, tail.w, tail.h);//获取图片this.snakeBodyArr[0].keyCode = this.keyCode;//每一个方块都赋值前一个，实现移动一步for (let index = this.snakeBodyArr.length - 1; index > 0; index--) {this.snakeBodyArr[index].x = this.snakeBodyArr[index - 1].x;this.snakeBodyArr[index].y = this.snakeBodyArr[index - 1].y;this.snakeBodyArr[index].keyCode = this.snakeBodyArr[index - 1].keyCode;}switch (this.keyCode) {  // 获取当前按下键盘键的编码case 37 :  // 按下左箭头键，向左移动this.left();break;case 39 :  // 按下右箭头键，向右移动this.right();break;case 38 :  // 按下上箭头键，向上移动this.up();break;case 40 :  // 按下下箭头键，向下移动this.down();break;default:return;}this.drawSnake();
}
/*** 往右*/
right() {//是否超出右边界限if (this.snakeBodyArr[0].x + this.snakeBodyArr[0].w >= this.canvas.width) {if (!this.touchSnakeWall) this.gameOver();this.snakeBodyArr[0].x = 0;} else {this.snakeBodyArr[0].x += this.snakeBodyArr[0].w;}
},
/*** 往左*/
left() {//超出左边界限if (this.snakeBodyArr[0].x <= 0) {if (!this.touchSnakeWall) this.gameOver();this.snakeBodyArr[0].x = this.canvas.width - this.snakeBodyArr[0].w;} else {this.snakeBodyArr[0].x -= this.snakeBodyArr[0].w;}
},
/*** 往上*/
up() {//超出上边界限if (this.snakeBodyArr[0].y <= 0) {if (!this.touchSnakeWall) this.gameOver();this.snakeBodyArr[0].y = this.canvas.height - this.snakeBodyArr[0].h;} else {this.snakeBodyArr[0].y -= this.snakeBodyArr[0].h;}
},
/*** 往下*/
down() {//超出下边界限if (this.snakeBodyArr[0].y + this.snakeBodyArr[0].h >= this.canvas.height) {if (!this.touchSnakeWall) this.gameOver();this.snakeBodyArr[0].y = 0;} else {this.snakeBodyArr[0].y += this.snakeBodyArr[0].h;}
}

1.2 知识点

snake每一块身体组合在一起就需要使用数组。
移动snake的规则1：移动头部（改变数组下标0，xy的数据）使用到right(),left(),up(),down()方法
规则2：body向前移动一个（从下标1开始赋值前一位）这样就能实现每一块身体能向前动一步
规则3：清除末尾。也就是清除上一次在的位置

2. 生成被吃者AO

2.1 代码

/*** 画出AO*/
ao() {//随机生成坐标let randomX = (Math.round(Math.random() * (this.canvas.width - this.aoWidth)));let randomY = (Math.round(Math.random() * (this.canvas.height - this.aoHeight)));let aoImg = this.getAOImg();this.ctx.drawImage(aoImg, randomX, randomY, this.aoWidth, this.aoHeight);this.aoArr.push({aoImg: aoImg,x: randomX,y: randomY,w: this.aoWidth,h: this.aoHeight,//1代表未被吃掉status: 1})
}

2.2 知识点

获取canvas宽高，在canvas的范围内随机生成一个AO
保存生成过的AO对象设置一个status为正常状态

3. 吃掉AO&蛇身加长

3.1 代码

//查找啊哦的位置
let aoObj = this.aoArr.find(o =>//把区间放大 小于AO+本身宽度 && 大于AO起点 && 有效的AOo.x + this.aoWidth >= snakeBodyHead.x && o.x - snakeBodyHead.w <= snakeBodyHead.x&& o.y + this.aoHeight >= snakeBodyHead.y && o.y - snakeBodyHead.h <= snakeBodyHead.y&& o.status === 1
);
//找到了AO位置把它吃掉
if (aoObj && aoObj.status === 1) {this.ctx.clearRect(aoObj.x, aoObj.y, this.aoWidth, this.aoHeight);//状态设置已被吃掉aoObj.status = 2;//蛇身+1let tail = this.snakeBodyArr[this.snakeBodyArr.length - 1];this.snakeBodyArr.push({fillStyle: "#" + Math.round(Math.random() * 10000),//每块身体颜色x: tail.x,y: tail.y,w: this.snakeHead.w,h: this.snakeHead.h});//记录已被吃掉的AOthis.aoDieNum++;//500ms出现下一个AOsetTimeout(() => {this.ao();}, 500);
}

3.2 知识点

判断蛇头是否触碰到屏幕上的AOthis.aoArr.find
查到AO后清除被吃掉的AO，status设置为2。下次就不会在被find到
this.snakeBodyArr[this.snakeBodyArr.length - 1]找到最后一个蛇体，添加到身体末尾
setTimeout停顿一些时间再重新生成一个新的AO

总结

以上就是实现贪吃蛇主要代码片段，无聊且有趣。

使用canvas实现贪吃蛇相关推荐

php开发h5游戏,H5的canvas实现贪吃蛇小游戏
这次给大家带来H5的canvas实现贪吃蛇小游戏,H5的canvas实现贪吃蛇小游戏注意事项有哪些,下面就是实战案例,一起来看一下. 本文介绍了H5 canvas实现贪吃蛇小游戏,分享给大家,具体如下 ...
html5实现贪吃蛇小游戏,H5 canvas实现贪吃蛇小游戏
本文介绍了h5 canvas实现贪吃蛇小游戏,分享给大家,具体如下: 实现效果如下实现思路: ps:这个只是思路,详细可看代码注释一.先把蛇画出来定义一下蛇的结构,用一个数组保存一堆矩形,包含蛇 ...
Canvas实现贪吃蛇小游戏（面向对象）
Canvas实现贪吃蛇小游戏我们常常在网页上制作的小游戏都是通过Canvas实现的,虽然我们也可以使用DOM来实现,但是这样会更加的节约资源. 我们书写这个小游戏的目的主要是为了适应js中关于面向对 ...
canvas 绘制贪吃蛇游戏
效果如下代码 <!DOCTYPE html> <html lang="zh_CN"> <head><meta charset=" ...
基于html5贪吃蛇小游戏,使用HTML5 Canvas制作贪吃蛇小游戏
近重要在研究OAuth2,等demo完成了,会给大家来一个专题分享. 看到我身边的一个同事在玩蛇蛇争霸感觉蛮有意思的,这里找了一个贪吃蛇的游戏分享给大家. 按理说canvas与其应用是老生常谈 ...
HTML5 Canvas实现贪吃蛇（二）
有了一个实心圆,就可想想大致的思路了. 游戏思路全局变量:global 浏览器类型,区别PC浏览器和手机端的浏览器,broswerType: canvas的长和宽,paleWidth,paleHei ...
还记得诺基亚手机上贪吃蛇小游戏吗？
诺基亚手机上的经典游戏 1. 贪吃蛇 2. 跳跳球 3. 熊猫爬树还有俄罗斯方块等经典游戏,我就不11介绍了,欢迎大家在评论区中写下自己童年记忆深刻的游戏吧,如果写下了,希望大家可以动手去找到相应的 ...
JavaScript 游戏系列（一）：贪吃蛇
JavaScript 游戏系列目录贪吃蛇文章目录 JavaScript 游戏系列目录一.实例截图二.游戏分析三.HTML 与 CSS 文件 1.入口文件 2.样式文件四.游戏逻辑的实现 1 ...
如何用html做一个贪吃蛇,如何用HTML5制作贪吃蛇游戏
如何用HTML5制作贪吃蛇游戏发布时间:2020-07-09 15:09:59 来源:亿速云阅读:122 作者:Leah 如何用HTML5制作贪吃蛇游戏?很多新手对此不是很清楚,为了帮助大家解决这 ...
JavaScript+ Canvas开发趣味小游戏《贪吃蛇》
一.效果展示二.<贪吃蛇>基本实现思路蛇头部分+蛇身体部分:采用对象形式来存储坐标,并将每个坐标对象放到一个snake数组中,方便使用.设置每个方格宽度30px,高度30px,画布高度 ...

使用canvas实现贪吃蛇

使用canvas实现贪吃蛇

文章目录

前言

一、组件版本&项目结构

二、代码讲解

1. 移动snake

1.1 代码

1.2 知识点

2. 生成被吃者AO

2.1 代码

2.2 知识点

3. 吃掉AO&蛇身加长

3.1 代码

3.2 知识点

总结

使用canvas实现贪吃蛇相关推荐

最新文章

热门文章