👦个人简介：张清悠，字澄澈，号寻梦客，爱好旅行、运动，主攻前端方向技术研发，副攻Unity 3D、C++、Python人工智能等
📝个人寄语：学会不为过程的缓慢而焦虑，即使暂时未能如你所愿，但只要你在努力，你就在不断成长！
🙏个人公众号:清悠小猿(海量源码尽在其中，欢迎关注)
前言
前端开发的核心逻辑思维，莫过于就是对JavaScript的掌握了，不管是小程序还是主流框架都是在原生JavaScript的基础上延伸和简便，因此原生JavaScript对于前端是必须要掌握和不断学习的，那么好，今天我们就来用原生的JavaScript写一个简单的小游戏——贪吃蛇
一、需求分析
首先，先要确定贪吃蛇小游戏的需求：
- 背景墙 确定行列
- 创建蛇头
- 蛇头移动
- 蛇头变相
- 创建实物
- 碰撞检测
- 增加身体
- 食物消失 随机创建新的
- 身体蛇头一起移动
二、效果展示
三、具体逻辑代码分析
1.首先创建一个html文件，然后我们利用canvas布局一个画板
//Css
* {
margin: 0;
}
#t-canvas {
background: #ffffff;
margin: 100px auto;
display: block;
border: 10px solid #3300ff;
border-radius: 20px;
}
#t-but {
width: 150px;
height: 60px;
margin: 20px auto;
display: block;
font-size: 25px;
background: #777;
border: 2px solid #00cccc;
color: #ffffff;
}
//Html
<canvas width="600" height="600" id="t-canvas"></canvas>
<input type="submit" value="开始游戏" id="t-but" onclick="javascript:go();" />
//JS
var canvas = document.getElementById("t-canvas");//通过ID拿到canvas画板
var quanxian = canvas.getContext("2d");//获取权限
var width = 20;
//定义初始化蛇的长度
var she = 6;
//定义一条蛇的数组
var shesz = [];
//定义食物的X,Y轴
var rootX = 0;
var rootY = 0;
//蛇的方向
var direction = 3;
var directions = 0;
var Go = 2;
//Buttone开始游戏按钮
function go() {
Go = 1;
zidong();
}
//循环绘制线条 画板
function forhua() {//drawRect
for (var i = 0; i < 30; i++) {
quanxian.strokeStyle = "#000000";
quanxian.beginPath();//起点路径
quanxian.moveTo(i * 20, 0);//起点
quanxian.lineTo(i * 20, 600);//终点
quanxian.moveTo(0, i * 20);//起点
quanxian.lineTo(600, i * 20);//终点
quanxian.closePath();//终点路径
quanxian.stroke(); //连接线
}
}
AI 代码解读
2.绘制一条蛇、格子、食物以及蛇的长度
//绘制一条蛇
for (var j = 0; j < she; j++) {
quanxian.fillStyle = "#000000";
if (j == she - 1) quanxian.fillStyle = "#cc3300";
//绘制格子
quanxian.fillRect(shesz[j].x, shesz[j].y, 20, 20);
}
quanxian.fillStyle = "#49cb8d";//定义食物
quanxian.fillRect(rootX, rootY, 20, 20);//食物位置
quanxian.fill();
//遍历蛇的长度
function sheCount() {//start
for (var i = 0; i < she; i++) {
shesz[i] = { x: i * 20, y: 0 };
}
addXY();
forhua();
}
//定义食物
function addXY() {//addFood
rootX = Math.floor(Math.random() * 30) * 20;
rootY = Math.floor(Math.random() * 30) * 20;
for (var i = 0; i < she - 1; i++) {
if (rootX == shesz[i].x && rootY == shesz[i].y) {
addXY();
}
}
}
AI 代码解读
3.确定方向键并执行相应的方法和判断方向以及自动触发跑动
//确定方向键并执行相应的方法
function godirection() {//move
var touX = shesz[she - 2].x;
var touY = shesz[she - 2].y;
switch (direction) {//判断是否是退后
case 1:
if (shesz[she - 1].x - 20 == touX && shesz[she - 1].y == touY) {
direction = directions;
}
break;
case 2:
if (shesz[she - 1].x == touX && shesz[she - 1].y - 20 == touY) {
direction = directions;
}
break;
case 3:
if (shesz[she - 1].x + 20 == touX && shesz[she - 1].y == touY) {
direction = directions;
}
break;
case 4:
if (shesz[she - 1].x == touX && shesz[she - 1].y + 20 == touY) {
direction = directions;
}
break;
}
directions = direction;//重新给原方向定义一个值
switch (direction) {
case 1: shesz.push({ x: shesz[she - 1].x - 20, y: shesz[she - 1].y }); break;//x轴减1格
case 2: shesz.push({ x: shesz[she - 1].x, y: shesz[she - 1].y - 20 }); break;//y轴减1格
case 3: shesz.push({ x: shesz[she - 1].x + 20, y: shesz[she - 1].y }); break;//x轴加1格
case 4: shesz.push({ x: shesz[she - 1].x, y: shesz[she - 1].y + 20 }); break;//y轴加1格
}
//删除第一个元素
shesz.shift();
//重新绘制表格
quanxian.clearRect(0, 0, 600, 600);
isDead();
isEat();
forhua();
}
//判断方向键的方向
function keyDown(e) {
switch (e.keyCode) {
case 37://左
direction = 1;
break;
case 38://上
direction = 2;
break;
case 39://右
direction = 3;
break;
case 40://下
direction = 4;
break;
}
}
//自己动
function zidong() {//btnstart
setInterval(godirection, 150);
//监听键盘事件
document.onkeydown = function (e) {
//解决浏览器的兼容性
var e = e || window.event;
keyDown(e);
}
}
AI 代码解读
4.定义我们的游戏机制规则来完善我们的游戏
//定义游戏规则
function isDead() {
if (shesz[she - 1].x > 585 || shesz[she - 1].y > 585 || shesz[she - 1].x < 0 || shesz[she - 1].y < 0) {//越过边界了
alert("游戏结束啦");
Go = 2;
window.location.reload();//刷新页面
}
for (var i = 0; i < she - 2; i++) {//判断不要吃自己
if (shesz[she - 1].x == shesz[i].x && shesz[she - 1].y == shesz[i].y) {
alert("出车祸了");
Go = 2;
window.location.reload();//刷新页面
}
}
}
//吃的规则
function isEat() {
if (shesz[she - 1].x == rootX && shesz[she - 1].y == rootY) {
she = she + 1;//蛇的长度加一
shesz.unshift({ x: -20, y: -20 });//在蛇的数组最末尾加一个
addXY();//重新定义食物
}
}
//当页面加载完成执行这个方法
window.onload = function () {
sheCount();
if (Go == 1) {
zidong();
}
}
AI 代码解读
总结
1.分析需求和抒写代码一定要思路清晰，这样再进行编写代码的时候更好的捋出具体步骤，更高效的完成
2.具体需求，具体分析，没有过不去的坎，加油！！！行进中的前端大军
以上就是用JavaScript实现贪吃蛇小游戏的全部过程,原创不易，期待您的点赞关注与转发评论😜😜😜
AI 代码解读
