用html5和js制作一个游戏启动界面（html5游戏开发一）、

最新推荐文章于 2024-07-30 10:31:44 发布

yill_h

最新推荐文章于 2024-07-30 10:31:44 发布

阅读量9.5k

点赞数

分类专栏： interested topic 文章标签： web html5 html5游戏开发 javascript 游戏

本文链接：https://blog.csdn.net/qq_23948283/article/details/52184462

版权

本文介绍如何利用HTML5和JavaScript制作一个游戏启动界面。首先建立HTML文档并添加游戏容器，然后利用Modernizr的加载器按需加载资源。接着创建加载脚本loader.js，使用sizzle进行DOM操作，并构建DOM帮助模块。启动界面包含自定义字体和游戏Logo，通过监听用户点击切换到主菜单。最后，详细讲解了各个模块的实现，包括屏幕模块和主菜单模块的事件管理。

摘要由CSDN通过智能技术生成

制作一个游戏启动界面，用户点击屏幕进入游戏主界面

首先建立一个html文档，在body里面添加一个游戏容器，再将主菜单界面元素添加到添加到游戏容器里面。

    <div id="game">
        <div class="screen" id="splash-screen">
        <div class="screen" id="main-menu"></div>
        <div class="screen" id="game-screen"></div>
        <div class="screen" id="high-scores"></div>
    </div>

添加Modernizr和加载脚本

<head>
    ...
    <script src="scripts/modernizr.js"></script>
    <script src="scripts/loader.js"></script>
</head>

在近几年，大家越来越关注效率，所以加载脚本越来越流行。

yepnope是一个非常流行的高速按条件异步的加载器，允许你只加载使用到的资源。我们利用基于yepnope开发的Modernizr就足够了。

如果你想使用Modernizr最新的版本，在www.modernizr.com下载即可。

对于此例子只需要选择Modernizr.load（）和 Modernizr.addTest( )特征就足够了。

建立一个加载脚本loader.js

此例子还用了sizzle一个高效的样式选择引擎，使用sizzle可以让Dom变得简单。

同样的，sizzle最新版本可以在sizzlejs.com下载。

加载器的脚本会通过调用Modernizr.load( )来加载其他需要的内容。开始他需要加载sizzle加载器和game.js和dom.js脚本。

同时加载器脚本会在游戏全局创建一个jewel命名空间类。

/**
 * Created by Huangpingyi on 2016/8/10.
 */
var jewel = {};

//在加载主文件前等待
window.addEventListener("load" , function(){

    //开始动态加载
    Modernizr.load([
        {
        //这些文件一直被加载
        load : [
        "scripts/sizzle.js",
        "scripts/dom.js",
        "scripts/game.js"
    ],
        //所有文件已