JavaScript+ Canvas开发趣味小游戏《贪吃蛇》

一、效果展示

在这里插入图片描述

二、《贪吃蛇》基本实现思路

在这里插入图片描述

蛇头部分+蛇身体部分：采用对象形式来存储坐标，并将每个坐标对象放到一个snake数组中，方便使用。设置每个方格宽度30px,高度30px，画布高度600px，宽度600px。
a.新蛇头newHead等于旧蛇头oldHead的x坐标或者y坐标+1
b.蛇的头部+身体部分，每次更新（动起来）的规律：每次将蛇的身体部分的最后1个方块（尾部）删除，然后在蛇的头部的前面增加1个方块：该新增的方块（newHead）的坐标与原来头部方块(oldHead)的坐标关系为 newHead等于旧蛇头oldHead的x坐标或者y坐标+1
蛇吃食物
a.当蛇头的坐标与食物的坐标重合的时候，表示食物被吃掉了。判断标准为：蛇头的x，y坐标都与食物的x,y坐标重合
此时，要做两件事情：
1）isEated 变为 true,此时就会重新生成一个食物坐标
2）让蛇增加一节长度。但是，前面的1.b里提到，关于蛇动起来的规律中，每次更新画布都会把蛇的身体部分（尾巴）删掉1个方块，也就是当蛇没有吃到食物时，删除一节。所以，在这里蛇吃到食物时，只要不删除最后一节，也就相当于蛇吃到食物增加了一节了。
绘制食物
a.食物有默认位置
b.食物没有被吃掉之前，不会动
c.只有食物被吃掉后，才会随机再生成一个
绘制贪吃蛇

a.贪吃蛇随着画布的擦除->重绘的过程，会动起来（即改变贪吃蛇的坐标）,这就是让蛇能够动起来的原理。这里需要配合定时器来实现动起来！
b.贪吃蛇默认移动方向为：水平向右
c.默认每次移动的距离为一个方格
以下的x,y都是指蛇头的坐标，只要蛇头的坐标发生改变，蛇的身体部分自然会跟着蛇头来运动
水平往左： x-1 , y不变
垂直向下： x不变 , y+1
垂直向上： x不变 , y-1
绘制网格：使用Canvas来实现
注意Canvas使用方法：
1)获取画布对象 var huabu = document.getElementById(‘huabu’)
2)获取画布对象中的工具箱 var tools = huabu.getContext(‘2d’)
3)从画图工具箱中取出要使用的工具 tools.moveTo(0, 30 * i + 0.5) 、 tools.lineTo(600, 30 * i + 0.5)
4)找坐标
5)绘制
注意：在使用Canvas绘制线条时坐标的设置，如果要设置的线条粗细为1px，则需要把tools.moveTo(）、 tools.lineTo（）里面的起点终点坐标设置成.5小数形式，否则画出来的线条粗细为2px
游戏结束的判断标准：
贪吃蛇超出上、下、左、右边界时，游戏结束
即newHead.y < 0 || newHead.x < 0 || newHead.x * 30 >= 600 || newHead.y * 30 >= 600时，游戏结束。

三、技术要点

使用Canvas****绘制线条 tools.moveTo(0, 30 * i + 0.5) 、 tools.lineTo(600, 30 * i + 0.5)、实心矩形tools.fillRect(x,y,width,height)，并设置它们的颜色
setInterval定时器的使用以及清除。var StopTime = setInterval(timer, 100)、clearInterval(StopTime)
数组元素的尾部删除pop()和头部新增unshift（）
**Math.random()**随机数的使用，该方法生成[0,1）的随机数，包含0不包含1
监听键盘按下的行为，

document.**addEventListener**('keydown', function(event) {
if (event.keyCode === 38) {
						//如果键值为38，就说明按下了 上键
						console.log("上")
						directionX = 0
						directionY = -1
					}}

JavaScript操作Dom对象，获取相应的Dom元素
自定义计时函数

var h = m = s = ms = 0; //定义时，分，秒，毫秒并初始化为0；
		function toDub(n) { //补0操作
			if (n < 10) {
				return "0" + n;
			} else {
				return "" + n;
			}
		}

		function toDubms(n) { //给毫秒补0操作
			if (n < 10) {
				return "00" + n;
			} else {
				return "0" + n;
			}

		}
function timer() { //定义计时函数
			ms = ms + 50; //毫秒
			if (ms >= 1000) {
				ms = 0;
				s = s + 1; //秒
			}
			if (s >= 60) {
				s = 0;
				m = m + 1; //分钟
			}
			if (m >= 60) {
				m = 0;
				h = h + 1; //小时
			}
			str = toDub(h) + "时" + toDub(m) + "分" + toDub(s) + "秒" + toDubms(ms) + "毫秒";
			timeDom.innerHTML = str;
			// document.getElementById('mytime').innerHTML=h+"时"+m+"分"+s+"秒"+ms+"毫秒";
		}

四、游戏功能：

每次吃到食物时蛇的长度加1
当蛇头触碰到游戏边界时，游戏结束
分数记录，每吃到一个一个食物，分数加1
游戏总时长记录

五、代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>贪吃蛇游戏</title>
	</head>
	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
		}

		a {
			text-decoration: none;
		}

		canvas {
			position: relative;
			display: block;
			margin: 0 auto;
			background-color: #33cc99;
		}

		.images {
			background: url(img/timg.jpg) no-repeat;
			width: 800px;
			height: 600px;
			position: absolute;
			top: 0;
			left: 50%;
			margin-left: -400px;
		}

		.start {
			width: 160px;
			height: 40px;
			border: 1px solid #33CC99;
			border-radius: 10px;
			color: #fff;
			background-color: orangered;
			font-size: 25px;
			text-align: center;
			line-height: 40px;
			position: absolute;
			bottom: 200px;
			left: 50%;
			margin-left: -80px;

		}

		.author {
			width: 160px;
			position: absolute;
			bottom: 150px;
			left: 50%;
			margin-left: -80px;
			text-align: center;
			font-weight: 600;
			font-size: 18px;
		}

		.over {
			background: url(img/over.jpg) no-repeat;
			width: 800px;
			height: 600px;
			position: absolute;
			top: 0;
			left: 50%;
			margin-left: -400px;
		}

		.black_overlay {
			display: none;
			position: absolute;
			top: 0%;
			left: 0%;
			width: 100%;
			height: 100%;
			background-color: black;
			z-index: 1001;
			-moz-opacity: 1;
			opacity: 1;
			filter: alpha(opacity=1);
		}

		.black_overlay>img {
			display: none;
			margin: 0 auto;
			margin-top: 190px;
		}

		.black_overlay>a {
			width: 160px;
			height: 40px;
			border: 1px solid #33CC99;
			border-radius: 10px;
			color: #fff;
			background-color: orangered;
			font-size: 25px;
			text-align: center;
			line-height: 40px;
			position: absolute;
			bottom: 230px;
			left: 50%;
			margin-left: -80px;

		}

		#score {
			margin-left: 500px;			
		}
		#scores {
			margin-right: 200px;
		}
	</style>
	<body>
		<canvas id="huabu" width="600" height="600"></canvas>
		<div class="images" id="images">
			<div class="start" id="start">开始游戏</div>
			<div class="author">制作人：Zep</div>
		</div>

		<div id="fade" class="black_overlay">
			<img src="./img/over.jpg" id="over">
			<a href="index.html">重新开始</a>
		</div>
		<div id="score">
			分数：<span id="scores">0</span>
			游戏时长：<span id="time">00时00分00秒0000毫秒</span>
		</div>
	</body>
	<script type="text/javascript">
		// 是否开始游戏
		var isStart = false
		// 点击start按钮，隐藏首页图片
		var startbtn = document.getElementById('start')
		var imagesDom = document.getElementById('images')
		var fadeDom = document.getElementById('fade')
		var overDom = document.getElementById('over')
		var score = 0.0
		var speed = 3
		var scoresDom = document.getElementById('scores')
		var timeDom = document.getElementById('time')

		var h = m = s = ms = 0; //定义时，分，秒，毫秒并初始化为0；
		function toDub(n) { //补0操作
			if (n < 10) {
				return "0" + n;
			} else {
				return "" + n;
			}
		}

		function toDubms(n) { //给毫秒补0操作
			if (n < 10) {
				return "00" + n;
			} else {
				return "0" + n;
			}

		}

		function timer() { //定义计时函数
			ms = ms + 50; //毫秒
			if (ms >= 1000) {
				ms = 0;
				s = s + 1; //秒
			}
			if (s >= 60) {
				s = 0;
				m = m + 1; //分钟
			}
			if (m >= 60) {
				m = 0;
				h = h + 1; //小时
			}
			str = toDub(h) + "时" + toDub(m) + "分" + toDub(s) + "秒" + toDubms(ms) + "毫秒";
			timeDom.innerHTML = str;
			// document.getElementById('mytime').innerHTML=h+"时"+m+"分"+s+"秒"+ms+"毫秒";
		}






		startbtn.onclick = function() {
			imagesDom.style.display = 'none'
			isStart = true
		}

		var Game = setInterval(gameStart, 500)

		function gameStart() {

			if (isStart) {
				clearInterval(Game)
				var StopTime = setInterval(timer, 100)
				// console.log('111')
				// 1.获取画布对象
				var huabu = document.getElementById('huabu')
				// 2.获取画布对象中的工具箱
				var tools = huabu.getContext('2d')

				//注意：1.食物有默认位置
				//		2.食物没有被吃掉之前，不会动
				//      3.只有食物被吃掉后，才会随机再生成一个
				// 随机生产x,y坐标
				// 食物的默认位置
				var x = Math.floor(Math.random() * 20) * 30
				var y = Math.floor(Math.random() * 20) * 30
				// 添加一个标记，记录食物是否被吃掉了
				var isEated = false // 默认食物没有被吃掉

				// 蛇的默认位置
				var snake = [{
					x: 3,
					y: 0
				}, {
					x: 2,
					y: 0
				}, {
					x: 1,
					y: 0
				}]

				// 蛇的默认方向：水平向右
				var directionX = 1
				var directionY = 0

				// 判断游戏是否结束
				var isGameOver = false


				// 监听键盘按下的行为
				document.addEventListener('keydown', function(event) {
					console.log('按键的键值', event.keyCode)
					// 上：38，下：40，左：37，右：39
					if (event.keyCode === 38) {
						//如果键值为38，就说明按下了 上键
						console.log("上")
						directionX = 0
						directionY = -1

					} else if (event.keyCode === 40) {
						//如果键值为40，就说明按下了 下键
						console.log("下")
						directionX = 0
						directionY = 1

					} else if (event.keyCode === 37) {
						//如果键值为37，就说明按下了 左键
						console.log("左")
						directionX = -1
						directionY = 0

					} else if (event.keyCode === 39) {
						//如果键值为39，就说明按下了 右键
						console.log("右")
						directionX = 1
						directionY = 0


					}
				})


				// 使用定时器，让贪吃蛇动起来
				// 定时器每隔一段时间，就执行一遍“擦除画布->重绘画布”的过程
				// 以下代码表示：1s执行三次 “擦除画布->重绘画布”的过程
				setInterval(function() {
					// 如果isGameOver = false 说明游戏结束了，执行return,就不执行下面的代码了
					if (isGameOver) {
						fadeDom.style.display = 'block'
						overDom.style.display = 'block'
						clearInterval(StopTime)

						return
					}


					// 一、擦除画布
					tools.clearRect(0, 0, 600, 600)
					// 二、以下代码就是重绘画布的代码
					// -----------------------A.蛇头部分开始---------------------------
					// A.蛇头部分
					var oldHead = snake[0]
					var newHead = {
						x: oldHead.x + directionX,
						y: oldHead.y + directionY
					}

					//游戏结束的判定：
					// 1.蛇头的y<0,贪吃蛇超出上边界，游戏结束
					if (newHead.y < 0 || newHead.x < 0 || newHead.x * 30 >= 600 || newHead.y * 30 >= 600) {
						// 游戏结束
						isGameOver = true
					} else {
						// 在数组首部添加一节，结果为：（4，0）（3，0） （2，0）
						snake.unshift(newHead) //在数组第一个元素前面添加一个元素
						// -----------------------B.蛇吃食物开始---------------------------
						// 蛇吃食物的分析：
						// 当蛇头的坐标与食物的坐标重合的时候，表示食物被吃掉了
						// 此时，要做两件事情：
						// 1.isEated 变为 true,此时就会重新生成一个食物坐标
						if (snake[0].x * 30 === x && snake[0].y * 30 === y) {
							// 蛇头的x，y坐标都与食物的x,y坐标重合
							isEated = true

						} else { // 2.让蛇增加一节长度,也就是当蛇没有吃到食物时，删除一节，吃到食物时，就不删除一节，也就相当于蛇吃到食物增加一节
							// 删除最后一节，结果为：（3，0） （2，0）
							snake.pop() //删除数组最后一个元素
							// 重新设置食物没有被吃掉的标志
							isEated = false
						}
						// -----------------------蛇吃食物结束---------------------------

					}
					// -----------------------蛇头部分结束---------------------------


					// -----------------------C.绘制食物开始---------------------------
					// 绘制矩形 tools.fillRect(x,y,width,height)

					//注意：1.食物有默认位置
					//		2.食物没有被吃掉之前，不会动
					//      3.只有食物被吃掉后，才会随机再生成一个
					if (isEated) {
						x = Math.floor(Math.random() * 20) * 30
						y = Math.floor(Math.random() * 20) * 30
						score += 1
						speed += 0.1
					}
					scoresDom.innerHTML = score

					// 设置填充颜色
					tools.fillStyle = '#cccc00'
					tools.fillRect(x, y, 30, 30)
					// -----------------------绘制食物结束---------------------------

					// -----------------------D.绘制贪吃蛇开始---------------------------
					// 说明：
					// 1.贪吃蛇随着 擦除->重绘的过程，会动起来（即改变贪吃蛇的坐标）
					// 2.贪吃蛇默认移动方向为：水平向右
					// 3.默认每次移动的距离为一个方格

					// 问题：水平往左 ： x-1 , y不变
					//		 垂直向下 ： x不变 , y+1
					//		 垂直向上 ： x不变 , y-1


					// // 删除最后一节，结果为：（3，0） （2，0）
					// snake.pop() //删除数组最后一个元素




					// 绘制蛇头部，蛇的每一节都是一个矩形
					// // 设置蛇头的颜色
					// tools.fillStyle = '#ff0033'
					// tools.fillRect(snake[0].x * 30,snake[0].y * 30,30,30)
					// // 绘制蛇的身体部分
					// tools.fillStyle = '#333399'
					// tools.fillRect(snake[1].x * 30,snake[1].y * 30,30,30)
					// tools.fillRect(snake[2].x * 30,snake[2].y * 30,30,30)

					for (var i = 0; i < snake.length; i++) {
						if (i === 0) {
							tools.fillStyle = '#ff0033'
						} else {
							tools.fillStyle = '#333399'
						}
						tools.fillRect(snake[i].x * 30, snake[i].y * 30, 30, 30)
					}

					// -----------------------绘制贪吃蛇结束---------------------------

					// -----------------------E.绘制网格开始---------------------------
					// 3.从画图工具箱中取出要使用的工具
					// 4.找坐标
					// 绘制水平线
					for (var i = 1; i < 20; i++) {
						tools.moveTo(0, 30 * i + 0.5)
						tools.lineTo(600, 30 * i + 0.5)
					}
					// 绘制垂直线
					for (var i = 1; i < 20; i++) {
						tools.moveTo(30 * i + 0.5, 0)
						tools.lineTo(30 * i + 0.5, 600)
					}

					// 设置绘制直线的颜色
					tools.strokeStyle = '#fff'
					// 5.绘制
					tools.stroke()
					// -----------------------绘制网格结束---------------------------
				}, 1000 / speed)
			}

		}
	</script>
</html>

JavaScript+ Canvas开发趣味小游戏《贪吃蛇》

一、效果展示

二、《贪吃蛇》基本实现思路

三、技术要点

四、游戏功能：

五、代码如下：

猜你喜欢