一款HTML5射击小游戏太空战机,键盘的Z键是射击按钮,P键时暂停键,可以点击按钮开始新游戏或查看游戏的介绍说明。
页面的head部分,简单设置页面元素的样式,代码如下:
#dbg {
font-family: "Helvetica", cursive, sans-serif;
border: 1px solid black;
width: 600;
}
body {
background:#000;
color:white;
font-family: Arial,Helvetica,Sans-serif;
}
a {
color: #009de9;
outline: none;
}
a:hover {
text-decoration: none;
}
接着引入多个JS文件,并写好各类事件的响应,部分代码如下:
<script type="text/javascript" src="js/Sound.js"> </script>
<script type="text/javascript" src="js/Background.js"> </script>
<script type="text/javascript" src="js/Mouse.js"> </script>
<script type="text/javascript" src="js/Loader.js"> </script>
<script type="text/javascript" src="js/FloatyText.js"> </script>
<script type="text/javascript" src="js/Keyboard.js"> </script>
<script type="text/javascript" src="js/Collision.js"> </script>
<script type="text/javascript" src="js/AfterEffect.js"> </script>
<script type="text/javascript" src="js/PeaShooter.js"> </script>
<script type="text/javascript" src="js/Laser.js"> </script>
<script type="text/javascript" src="js/LevelDirector.js"> </script>
<script type="text/javascript" src="js/Sortie.js"> </script>
<script type="text/javascript" src="js/Enemy.js"> </script>
<script type="text/javascript" src="js/Powerup.js"> </script>
<script type="text/javascript" src="js/Shot.js"> </script>
<script type="text/javascript" src="js/EnemyShot.js"> </script>
<script type="text/javascript" src="js/Ship.js"> </script>
页面的body部分,需载入游戏的各种图片和音乐效果,部分代码如下:
<div id="hidden" style="visibility:hidden; width:1px; height:1px; overflow:hidden">
<img id="splash_screen"
src="images/splash_screen.jpg"
onload="itemLoaded(this);">
<img id="loading"
src="images/loading.png"
onload="itemLoaded(this);">
<img id="title"
src="images/title.png"
onload="itemLoaded(this);">
<!-- 省略部分演示代码 -->
</div>
系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791