HTML5游戏开发（三）启动画面、菜单以及关卡

一个基本的游戏对象game（js/game.js）

var game = {    // 初始化对象，预加载资源，并显示开始画面
    init:function(){        // 隐藏所有的游戏图层，显示开始画面
        $('.gamelayer').hide();
        $('#gamestartscreen').show();        // 获取游戏画布及其绘画环境的引用
        game.canvas = $('#gamecanvas')[0];
        game.context = game.canvas.getContext('2d');
    },
}

在页面加载完成之前，就试图操作image和div元素会导致不确定行为（包括JavaScript错误）。因此需要在game.js文件顶部加一小段代码，可以确保在页面加载完成后安全地调用game.init()方法，如下所示。

$(window).load(function(){
    game.init();
});

打开HTML页面，效果如下：

 

游戏开始画面与菜单选项

关卡选择

现在游戏HTML文件加载完成后，显示了有两个选项的主菜单。正常情况下，当玩家点击PLAY按钮后，游戏应当显示一个关卡选择画面和一系列可玩的关卡。

在此之前，需要创建一个对象来处理关卡。这个对象既包含了关卡中的数据，又要提供一些简单的函数来对关卡进行初始化，在game.js中添加这部分代码。

// 简单的关卡对象，包含关卡数据和函数var levels = {    // 关卡数据
    data:[
        {            // 第一关
            foreground:'desert-foreground',            background:'cloud-background',            entities:[]
        },
        {            // 第二关
            foreground: 'desert-foreground',            background: 'cloud-background',            entities: []
        }
    ],    
    // 初始化关卡选择画面
    init:function(){        var html = "";        for (var i = 0; i < levels.data.length; i++){            var level = levels.data[i];
            html += '<input type="button" value="' + (i + 1) + '">';
        }
        $('#levelselectscreen').html(html);        // 单击按钮时加载关卡
        $('#levelselectscreen input').click(function(){
            levels.load(this.value-1);
            $('#levelselectscreen').hide();
        });
    },    // 为某一关卡加载所有的数据和图像
    load:function(number){

    }
}

levels对象有一个data数组，数组的每一个元素表示一个关卡。目前数组中元素只存储前景图和背景图。之后我们可以在其中加入英雄、敌人和可摧毁障碍物的信息，这样就可以通过数组中加入新元素来快速构建新关卡了。

levels对象也具有一个init()方法，该方法遍历所有的关卡数据，然后动态生成每一关的开始按钮。关卡按钮的click事件会调用相应关卡的load()方法，并隐藏关卡的选择界面。

从game.init()方法中调用levels.init()来生成关卡选择按钮，如下所示：

 init:function(){        // 初始化对象
        levels.init();        // 隐藏所有的游戏图层，显示开始画面
        $('.gamelayer').hide();
        $('#gamestartscreen').show();        // 获取游戏画布及其绘画环境的引用
        game.canvas = $('#gamecanvas')[0];
        game.context = game.canvas.getContext('2d');
    },

同时，我们也需要在styles.css中为这些按钮添加样式。

关卡选择画面的CSS样式

/* 关卡选择画面 */#levelselectscreen {    padding-top: 150px;    padding-left: 50px;
}#levelselectscreen input {    margin: 20px;    cursor: pointer;    background: url(images/icons/level.png) no-repeat;    color: yellow;    width: 64px;    height: 64px;    border: 0;    font-size: 20px;
}

接下来，在game对象中创建简单的game.showLevelScreen()方法，用来隐藏主菜单，显示关卡选择界面。

game对象中的showLevelScreen()方法

    // 隐藏主菜单，显示关卡选择界面
    showLevelScreen:function(){
        $('.gamelayer').hide();
        $('#levelselectscreen').show('slow');
    }

该方法首先隐藏了所有的游戏图层，然后用慢速动画显示levelselectscreen层。

最后，PLAY按钮被单击时让其调用game.showLevelScreen()方法。该方法使PLAY按钮image元素的事件响应方法：

<img src="images/icons/play.png" alt="Play Game" ="game.showLevelScreen();">

开始游戏并单击PLAY按钮，效果如下：

 

关卡选择画面

如图所示，目前的游戏只有两关，但是，随着我们添加更多的关卡，代码也会自动侦测到并显示正确数目的按钮。当用户单击这些按钮时，浏览器就会调用levels.load()方法加载按钮对应的关卡，不过我们还没实现这个方法。

以上。

作者：Viljw
链接：https://www.jianshu.com/p/900c1704e631

作者：FFIVE
链接：https://www.imooc.com/article/33215
来源：慕课网