【项目】全民飞机大战-H5版-实训课程

听潮阁

已于 2024-08-21 17:28:08 修改

阅读量1.1k

点赞数 35

分类专栏： web前端文章标签： html5 javascript css vue.js layui

于 2024-08-16 19:28:33 首次发布

本文链接：https://blog.csdn.net/yueyehuguang/article/details/141267706

版权

一、实训意义

近年来，Web 应用在整个软件与互联网行业承载的责任越来越重，软件复杂度和维护成本越来越高，Web 技术，尤其是 Web 客户端技术，迎来了爆发式的发展。Web前端技术已经成为Web应用程序开发的重要领域。随着互联网的不断发展和移动设备的普及，Web前端技术也在不断地演变和创新。因此掌握Web前端技术是顺应时代发展，迅速融入互联网行业一个非常有效的途径。

高级网页设计实训是教学过程中重要的实践性教学环节。它是根据专业教学计划的要求，在教师指导下对学生进行的Web前端技术专业技能的综合训练，培养学生综合运用理论知识分析和解决实际问题的能力，实现由理论知识向操作技能的转化，是对理论与实践教学效果的检验，也是对学生综合分析能力与独立工作能力的培养过程。因此，加强实践教学环节，搞好实训教学，对实现本专业的培养目标，提高学生的综合素质有着重要的作用。

二、实训目的

通过综合实训进一步巩固、深化和扩展学生的理论知识与专业技能。
训练和培养学生获取信息和处理信息的能力，充分培养和提高学生的动手能力。
培养学生运用所学的理论知识和技能解决网页设计中所遇到的实际问题的能力及其基本工作素质。

培养学生的编程思想，了解实际开发中所需要具备的技能知识以及环境知识。向企业的实际用人需求靠拢。
培养学生理论联系实际的工作作风、严肃认真的科学态度以及独立工作的能力，树立自信心。

三、实训项目-飞机大战

3.1 实训项目效果展示

3.2 实训涉及知识点

盒子模型的运用
JS 操作DOM节点的运用
JS 面向对象的运用
CSS常规样式的运用
CSS定位，选择器等知识的运用

四、实训内容

4.2 制作游戏开始界面

》》搭建HTML界面框架,index.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>全民飞机大战</title>
		<link href="css/main.css" type="text/css" rel="stylesheet"/>
	</head>
	<body>
		
		
		<div id="content_div">
			<!-- 准备开始游戏的界面 -->
			<div id="start_div">
				<!-- 游戏的LOGO -->
				<img src="img/LOGO.png" width="380px" id="logo"> 
				<!-- 开始界面上的玩家 -->
				<img src="img/player01.png" id="start_player" >
				<!-- 开始游戏按钮 -->
				<div id="start" onclick="startGame()">开始游戏</div>
				<!-- 关闭音效按钮 -->
				<div id="sort" onclick="sortGame()">关闭音效</div>
				<!-- 查看帮助按钮 -->
				<div id="help" onclick="helpGame()">查看帮助</div>
			</div>
			
			<!-- 游戏界面 -->
			<div id="game_div">
				<!-- hp血量图片 -->
				<img id="my_hp" src="img/hp_0.png">
				<!-- 血槽 -->
				<div id="rect_hp">
					<!-- 血条 -->
					<div id="fill_rect_hp"> </div>
				</div>
			</div>
			<!-- 结束游戏界面 -->
			<div id="game_over">
					Game Over<br/>		
			</div>
    </div>	
	</body>
</html>

》》设置开始界面的样式,main.css

/* 网页整体背景设置成黑色*/
body{
	background-color: black;
}
/*主div设置相对定位*/
#content_div{
	position: relative;	
}

/* 设置准备游戏界面的样式*/
#start_div{
	position: absolute;
	width: 512px;
	height:768px;
	/* 在屏幕中居中显示 */
	margin: auto;
	left:0;
	right:0;
	background: url('../img/img_bg_logo.jpg');
	/* 将鼠标指针切换成手指 */
	cursor:pointer;
}

/* 准备界面中图片样式设置 */
#start_div>img{
	position: absolute;
	display: inline-block;
	margin: auto;
	left:0;
	right:0;
	
}

/* 准备游戏界面中按钮样式的设置 */
#start_div>div{
	
	width: 270px;
	height: 40px;
	border-radius: 5px;
	text-align: center;
	line-height: 40px;
	background-color: #4876FF;
	font: '楷体' 20px ;
	color:white;
	font-weight: bold;
	position: absolute;
	margin: auto;
	left:0;
	right:0;
	
}


/* 开始游戏按钮*/
#start{
	
	top:600px;
}

/* 关闭音效按钮 */
#sort{
	
	top:650px;
}
/* 查看帮助按钮 */
#help{
	
	top:700px;
}

/* logo显示的位置 */
#logo{
	top:80px;
}

/* 开始页面玩家图片显示的位置 */
#start_player{
	top:420px;
}


/* 开始页面按钮的伪类样式 */
#start_div>div:hover{
	background-color: cyan;
	
}


/* 游戏页面样式**/
#game_div{
	position: absolute;
	width: 512px;
	height: 768px;
	background:url('../img/bg1.jpg') repeat;
	background-position: 0 100px;
	margin: auto;
	left: 0;
	right: 0;
	
	display:none;
	overflow: hidden;
	
}

/* 玩家血量样式 */
#my_hp{
	margin-top: 10px;
	margin-left: 10px;
}

/* 玩家血槽样式 */
#rect_hp{
	border: 1px solid red;
	width: 210px;
	height: 30px;
	display: inline-block;
	margin-top: 10px;
	margin-left: 10px;
	text-align: left;
}

/* 玩家血量样式 */
#fill_rect_hp{
	width: 210px;
	height: 30px;
	background: green;
}


/* 游戏结束样式 */
#game_over{
	font-size: 80px;
	color:red;
	font-family: '微软雅黑';
	font-weight: bold;
	position: absolute;
	width: 512px;
	height:768px;
	margin: auto;
	left:0;
	right:0;
	text-align: center;
	line-height: 500px;
	display: none;
	
}

本游戏由三个页面组成：准备游戏页面，游戏进行时页面，以及游戏结束时的页面，游戏初始的时候，只显示准备游戏页面，其他的页面display都设置为none，先隐藏起来。

》》开始界面，玩家动画展示,main.js

//############## 开始页面 天使动画 ##################
// 索引，用来取图片
var player_index = 0;
// 开始页面玩家动画的方法
function start_player_animation(){
	// 每次执行方法时，索引增加，让索引指向下一张图片
	player_index ++;
	// 如果索引大于了最后一张图片的索引
	if(player_index>10){
		// 让索引回归到1，重新从第一张图片选取
		player_index = 1;
	}
	// 如果索引小于10
	if(player_index<10){
		// 拼接图片路径时，加0
		img_path = "img/player0"+player_index+".png";
	}else{
		img_path = "img/player"+player_index+".png";
	}
	// 根据拼接的图片路径，修改src属性值
	document.getElementById("start_player").src = img_path;
	
}
// 每隔300毫秒执行玩家动画的方法
setInterval(start_player_animation,300);

》》在index.html中引入main.js

<script type="text/javascript" src="js/main.js"></script>

》》展示效果

4.3 开始游戏界面切换

当点击“开始游戏”时，就要从当前开始界面切换到游戏界面，实现方式很简单。实际上就是点击按钮时，将开始界面的 display设置为none，再将游戏界面的display设置为 block 即可。在main.js中添加如下代码：

// ########## 开始界面切换到游戏界面#######
// 获取开始界面
var startDiv = document.getElementById("start_div");
// 获取游戏界面
var gameDiv = document.getElementById("game_div");

// 开始游戏的方法
function startGame(){
	// 隐藏开始界面
	startDiv.style.display = 'none';
	// 显示游戏界面
	gameDiv.style.display = 'block';
}

4.4 创建玩家机

》》在js目录中中新增玩家类player.js，代码如下所示：

显示玩家实际上是在游戏界面gamediv中添加一个图片节点，然后设置好图片节点的图片，位置以及大小。因此我们在设计玩家的时候，需要创建一个图片节点，并设置好相应的属性。同时玩家需要上下左右移动的方法，而实际上上下左右移动是通过修改图片节点的left，top样式来实现的，原理图如下：

具体代码如下：


/*
	玩家飞机
	
	属性：
		图片节点、图片、x坐标、y坐标、速度
	行为：
		移动
		发射子弹
		初始化： 将图片加到gamediv游戏界面中
	
	
*/
function playerPlane(imgSrc){
	// 创建一个img图片节点
	this.imageNode = document.createElement("img");
	// 初始化图片路径
	this.imgSrc = imgSrc;
	// 初始化玩家的速度
	this.speed = 10;

	
	// 初始化图片，将图片节点加入到游戏界面中
	this.init = function(){
		// 初始化图片节点中显示的图片
		this.imageNode.src = this.imgSrc;
		this.imageNode.setAttribute("id","player");
		// 初始化玩家的大小
		this.width = this.imageNode.width;
		this.height = this.imageNode.height;
		// 初始化图片节点的定位方式，以及位置
		this.imageNode.style.position = 'absolute';
		// 让玩家的位置显示在游戏界面水平居中的位置
		this.imageNode.style.left = (512-this.imageNode.width)/2+'px';
		this.imageNode.style.top = 550+'px';
		// 将初始化好的图片节点，作为子节点加入到游戏界面中
		gameDiv.appendChild(this.imageNode);
		
		
	}
	
	// 调用初始化函数
	this.init();

	
	// 向左运动的方法
	this.moveLeft=function(){
		// 获取玩家的横坐标
		this.x = parseInt(this.imageNode.style.left);
		// 如果横坐标小于0了
		if(this.x<0){
			// 让玩家停留在坐标为