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页面,效果如下:

 

HTML5游戏开发(三)启动画面、菜单以及关卡_第1张图片

游戏开始画面与菜单选项

关卡选择

现在游戏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 += '';
        }
        $('#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元素的事件响应方法:

开始游戏并单击PLAY按钮,效果如下:

 

HTML5游戏开发(三)启动画面、菜单以及关卡_第2张图片

关卡选择画面

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

以上。



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


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

你可能感兴趣的:(web开发)