HTML5射击小游戏太空战机

来源:https://www.sucaihuo.com/js/3019.html 2017-09-17 03:49浏览(1032) 收藏

一款HTML5射击小游戏太空战机,键盘的Z键是射击按钮,P键时暂停键,可以点击按钮开始新游戏或查看游戏的介绍说明。
HTML5射击小游戏太空战机
分类:游戏 > 益智 难易:初级
查看演示 下载资源 下载积分: 20 积分

页面的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>
评论0
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791

1 2