JavaScript 练手项目--实现贪吃蛇小游戏

最新推荐文章于 2024-04-11 04:57:50 发布

HHH_LLL

最新推荐文章于 2024-04-11 04:57:50 发布

阅读量863

点赞数 1

分类专栏： JavaScript CSS3 文章标签： JS CSS HTML

本文链接：https://blog.csdn.net/HHH_LLL/article/details/102847653

版权

HTML+CSS+JavaScript

(很早以前写写玩的小游戏，今日偶然发现，分享出来。)

整体功能：

点击开始游戏运行游戏–》开始游戏按钮消失–》游戏开始
动态随机出现食物，出现三节蛇开始运动
暂停、继续游戏功能
上下左右–》改变方向运动
判断是否吃到食物–》食物消失，蛇长度加一
判断游戏结束，弹出游戏结束

源码下载：https://github.com/wuhaolun/Retro-Snaker-JS-
首先是HTML+CSS显示部分：

HTML：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="css/index.css">
</head>
<body>
	<div id="container">

		<!--背景区域-->
		<div class="backgroundGame">
			<!-- 左区域暂停开始按钮 -->
			<div class="leftSide" id="start_Pause">
				<img src="img/start-walk.png" alt="" id="start-walk">
				<img src="img/pause-walk.png" alt="" id="pause-walk">
			</div>
			<!-- 中间区域 -->
			<div class="cotent">
				<!-- 实时分数 -->
				<div class="nowScore">
					<p>分数:</p>
					<span id="now_score"></span>
				</div>
				<!-- 游戏区域 646*298-->
				<div class="backgroundPlayGame">
					<!-- 蛇活动区域 -->
					<div class="run" id="Run">
						
					</div>
				</div>
			</div>
		</div>

		<!-- 开始游戏 -->
		<div class="beginGame">
			<!-- 开始游戏按钮 -->
			<div class="gameBtn" id="GameBtn">
				<!-- <img src="" alt=""> -->
			</div>
		</div>

		<!-- 游戏结束 -->
		<div class="gameOver">
			<div class="overScore">
				<!-- 游戏结束图片 -->
				<div class="Score" id='lose'></div>
				<!-- 游戏结束分数 -->
				<span id="over_score" ></span>
				<!-- 关闭图片按钮 -->
				<div class="close" id='close_table'></div>
			</div>
		</div>
	</div>
	<script src="js/index.js"></script>
</body>
</html>

CSS：

*{
   
	margin: 0;
	padding: 0;
}
img{
   
	display: inline-block;
}
.container{
   
	
}
/*背景*/
.backgroundGame{
   
	width: 100%;
	height: 656px;
	position: relative;
	background-color: #333333;
}
#start-walk{
   
	width: 50px;
	height: 50px;
	position: absolute;
	background-color: #e5e5e5;
	cursor:pointer;
	margin:0 auto;
	top: 20px;
	left: 35px;
	display: none;
}
#pause-walk{
   
	width: 50px;
	height: 50px;
	position: absolute;
	backgr

最低0.47元/天解锁文章

HHH_LLL

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
JavaScript 练手项目--实现贪吃蛇小游戏

HTML+CSS+JavaScript整体功能：点击开始游戏运行游戏–》开始游戏按钮消失–》游戏开始动态随机出现食物，出现三节蛇开始运动暂停、继续游戏功能上下左右–》改变方向运动判断是否吃到食物–》食物消失，蛇长度加一判断游戏结束，弹出游戏结束源码下载：https://github.com/wuhaolun/Retro-Snaker-JS-首先是HTML+CSS显示部分：H...
复制链接

扫一扫