HTML5互动小游戏代码 h5互动小游戏开发

转载

karen 2023-11-11 20:58:38

文章标签 HTML5互动小游戏代码 phaserjs开发 h5小游戏开发 html ci 文章分类 HTML5 移动开发

发现很多人玩h5小游戏，感觉比较有意思，加上目前在项目中没什么很忙的事情，然后就想研究一下h5小游戏。在网上搜索了一下，有人推荐使用白鹭引擎（Egret），但是我下载下来之后一直打不开，不知道什么情况。后来在网上发现了一个js框架phaser，然后就尝试了一下。本次是记录一下使用phaserjs开发h5小游戏的过程。内容很简单，暂时没有复杂的东西

HTML5互动小游戏代码 h5互动小游戏开发_phaserjs开发

一、开发前

首先要在Phaser官网下载使用的js文件(正常开发下载压缩版phaser.min.js即可)。

二、开发中

html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="phaser.min.js"></script>
</head>
<body>
<div id="game"></div>
</body>
</html>

在html中那一行div是用来渲染页面使用的。（后来发现好像没有也可以，目前还未发现问题）

js代码

在引入js文件，我们可以编写js代码：

var game = new Phaser.Game(800, 400, Phaser.CANVAS, 'game', {preload: load, create: create, update: update});

首先了解Phaser.Game()内参数分别是什么意思，(好像后面还有几个参数，但是不常用所以也就不说了)

Phaser.Game(width, height, renderer, parent, state)

宽(px)、高(px)、渲染方式(还有Phaser.WEBGL，Phaser.AUTO)[虽然不太很了解]、放置canvas元素的父元素(即html中div的id)、我自己理解的场景的生命周期。（这个宽高是不带引号的，当时我不小心加了引号一直黑屏，好像不报错，我也忘了，找了半天）
关于那个我理解的生命周期(preload、create。update)：

preload: 用来加载资源(什么图片、背景之类的)，最先执行。
create: 初始化场景，preload加载完之后执行。
update: 最后执行，时时刻刻都在走这个方法（我认为就是你游戏中比如移动能看出来，因为这个方法一直在走）。

然后我们开始写这些生命周期内的具体实现：
preload内：

function load() {
    game.load.image('star', 'assets/star.png');
    game.load.image('sky', 'assets/sky.png');
    game.load.image('ground', 'assets/platform.png');
    game.load.spritesheet('dude', 'assets/dude.png', 32, 48);
}

这是加载游戏内的图片资源，星星，天空（背景），地面（还有图中的两块板），小人。
第一个参数是一个名字，后面在create里添加到游戏中使用这个名字，第二个参数是图片的路径。
为什么小人和其他图片的写法不一样呢？因为小人不是一张普通的图（哈哈），而是一张精灵序列图(好像不太明白，类似于这种图，自行百度吧)。使用这个东西可以拆分该图得到多个帧（好吧我理解是这样）。最后两个参数为图片的宽和高。这个图片是288 * 48的，水平宽有9个小人，这样32* 48就得到一个小人了（注意也没有引号）。

create内：

function create() {
        game.physics.startSystem(Phaser.Physics.ARCADE);
        game.add.sprite(0, 0, 'sky');
        platform = game.add.group();//创建一个组,将地和板都加入组内
        platform.enableBody = true;//给这个组打开物理引擎
        var ledeg = platform.create(450, 230, 'ground');
        ledeg.body.immovable = true;
        ledeg = platform.create(-130, 150, 'ground');
        ledeg.body.immovable = true;
        var ground = platform.create(0, game.world.height-30, 'ground');
        ground.body.immovable = true;
        ground.scale.setTo(2, 1);
        player = game.add.sprite(150, game.world.height-100, 'dude');
        game.physics.arcade.enable(player);
        player.body.gravity.y = 100;
        player.body.collideWorldBounds = true;
        player.animations.add('left', [0, 1, 2, 3], 10, true);
        player.animations.add('right', [5, 6, 7, 8], 10, true);

        cursors = game.input.keyboard.createCursorKeys();//键盘方向键

        stars = game.add.group();
        stars.enableBody = true;
        for(var i = 0;i<12;i++){
            var star = stars.create(i * 60, 0, 'star');
            star.body.gravity.y = 250;
            star.body.bounce.y = 0.7 + Math.random() * 0.2;
        }

        scoreText = game.add.text(10, 20, 'score：0', {fontSize: '32px', fill: '#000'});
    }

解释一下部分代码什么意思。
第一行是开启游戏内的物理引擎，意思是开启后游戏内对象可以设置符合物理定律。（我注释掉这一行，到最后也没发现有什么问题，其他该走走，有大佬知道的指点一下）
game.add.sprite(0, 0, ‘sky’);这个是在游戏内添加上图片，上面preload加载了，这是初始化就可以看到了，但是这里有个坑，要注意的是先后顺序，后面添加的会把前面添加的盖住，有可能你觉得没有问题，为什么看不到你加上的图片，原因很可能是后面的图片把前面的挡住了。
代码中包含enable的意思都是要开启物理引擎，否则没法使用body属性，immovable是控制地面和板不可移动，因为不设置的话，小人碰到会移动。还有剩下的就不解释了，太多了，在我源码里也都做了解释。

update内：

function update() {
    game.physics.arcade.collide(player, platform);
    game.physics.arcade.collide(stars, platform);
    game.physics.arcade.overlap(player, stars, collectStar, null, this);
    if(cursors.left.isDown){
        player.body.velocity.x = -100;//向左的时候 添加一个速度水平,向左为负
        player.animations.play('left');
    }else if(cursors.right.isDown){
        player.body.velocity.x = 100;
        player.animations.play('right');
    }else {
        player.body.velocity.x = 0;
        player.frame = 4;//图片停在第四帧(frame属性)
    }
    if(cursors.up.isDown && player.body.touching.down){
        player.body.velocity.y = -200;
    }
    function collectStar(player, star) {
        star.kill();//杀死星星,碰撞后销毁(收集)
        score += 10;
        scoreText.text = 'score：' + score;
    }
}

以上代码完全可以实现小游戏了，基本无需源码。当然我还是要吗源码上传一下。。