原生JavaScript抒写——贪吃蛇小游戏

原生JavaScript抒写——贪吃蛇小游戏

前言

前端开发的核心逻辑思维，莫过于就是对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(); //连接线
			}
}

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();
				}
			}
		}

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);
			}
		}

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();
			}

		}

总结

1.分析需求和抒写代码一定要思路清晰，这样再进行编写代码的时候更好的捋出具体步骤，更高效的完成

2.具体需求，具体分析，没有过不去的坎，加油！！！行进中的前端大军

以上就是用JavaScript实现贪吃蛇小游戏的全部过程,原创不易，期待您的点赞关注与转发评论😜😜😜