欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

Phaser HTML5 canvas 游戏引擎 牛刀小试

程序员文章站 2022-04-18 12:43:03
首先是素材 vcd4kpha+pgjypgo8l3a+cjxwpmrlbw+12na3o7o8l3a+cjxwpjxicj4kpc9wpgo8cd5odhrwoi8vannmawrkbguubm...

首先是素材

Phaser HTML5 canvas 游戏引擎 牛刀小试Phaser HTML5 canvas 游戏引擎 牛刀小试Phaser HTML5 canvas 游戏引擎 牛刀小试Phaser HTML5 canvas 游戏引擎 牛刀小试


喎? f/ware/vc/"="" target="_blank" class="keylink">vcd4kpha+pgjypgo8l3a+cjxwpmrlbw+12na3o7o8l3a+cjxwpjxicj4kpc9wpgo8cd5odhrwoi8vannmawrkbguubmv0l0rvtjjzlzwvcd4kpha+pgjypgo8l3a+cjxwpsrxz8hqagfzzxigysfsu7j2u/nt2mnhbnzhc7xeigphdmfzy3jpchttzs+30v3h5qosy7ww18hlvs3kx9k7upa/8rzco6ziw8tjsrvtw9fuvlrqtcbjyw52yxo1xle9t6jatmq1z9a2r7ut0ke5+6gjpc9wpgo8cd48yni+cjwvcd4kpha+udnn+lxy1rejund3dy5wagfzzxiuaw8gidxicj4kpc9wpgo8cd48yni+cjwvcd4kpha+0rvpwrlj08px7tdcsoyylja8yni+cjwvcd4kpha+pgjypgo8l3a+cjxwpjwvcd4kphbyzsbjbgfzcz0="brush:java;">var game = new phaser.game(800, 600, phaser.canvas, '', { preload: preload, create: create, update: update,render:render });
先创建一个游戏世界;一共5个参数,其中前两个分别代表 canvas的长宽,而phaser.canvas则代表是基于canvas来做图,如果支持webgl,可以写成phaser.webgl..


中间这个空字符串代表canvas的id,也就是如果你自定义一个id为aaa的canvas,这一项就可以写aaa,否则,会默认在body建立canvas。


最后的四个参数,很好理解,就是整个游戏的方法,载入前,创建,更新方法,下面详细介绍每个方法。


function preload() {

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

}

preload方法一般引入一些资源文件,图片什么的,其中load.spritesheet引入一个动画图片,也就是带每个小人方位的图片,32,48代表第一个方位的起始位置。


function create() {
//把canvas的 边界设置成实物,也就是,可以用来检测碰撞和覆盖的实物
 game.physics.setboundstoworld();
    game.add.sprite(0, 0, 'sky');
 
    //  创建一组组件,其中可以把一些用处相同的组件放在一个grope里,便于管理
    platforms = game.add.group();
//允许组件设定重力方面的配置
 platforms.enablebody = true;
//重力类型为arcade
 platforms.physicsbodytype = phaser.physics.arcade;
    // 创建地板
    var ground = platforms.create(0, game.world.height - 64, 'ground');
 
    //  缩放地板,使其自适应canvas大小
    ground.scale.setto(2, 2);
 
    //  当地板被碰撞时,固定它的位置
    ground.body.immovable = true;
 
    //  创建两个台阶
    var ledge = platforms.create(400, 400, 'ground');
    ledge.body.immovable = true;
 
    ledge = platforms.create(-150, 250, 'ground');
    
    ledge.body.immovable = true;
    
    
    
    //ledge2.body.setpolygon(62,112, 100,120,88,40);
//创建小人
 player = game.add.sprite(32, game.world.height - 450, 'dude');
    game.physics.enable(player, phaser.physics.arcade);
    console.log(player.body);
    //弹性指数
    player.body.bounce.y = 0.6;
//重力指数
 player.body.gravity.y = 400;
//是否允许和canvas边界碰撞
 player.body.collideworldbounds = true;
//添加动画
 player.animations.add('left', [0, 1, 2, 3], 10, true);
    player.animations.add('right', [5, 6, 7, 8], 10, true);
    
    
    stars = game.add.group();
    stars.enablebody = true;
    stars.physicsbodytype = phaser.physics.arcade;
    for (var i = 0 ; i 

其中add.sprite方法一个有4个参数,分别是位置的x,y坐标和key,


key为proload方法引入时为其分配的id也就是dude


这个方法为游戏添加一个精灵元素,精灵元素可以绑定事件,而且可以设置重力,弹性等参数,是框架里最常用的元素。


function update() {
    game.physics.arcade.collide(player, platforms);
    game.physics.arcade.collide(stars, platforms);
    game.physics.arcade.collide(player, ledge2);
    game.physics.arcade.overlap(player, stars, function(player, star){
        console.log(stars.total);
        star.kill();
        scorecount++;
        score.text = "score:"+scorecount+"";
        if (stars.total == 0) {
            alert("congratulation!");
        }
    }, null, this);
    //  充值精灵的速度
    player.body.velocity.x = 0;
 
    if (cursors.left.isdown)
    {
        //  左移动
        player.body.velocity.x = -150;
 
        player.animations.play('left');
    }
    else if (cursors.right.isdown)
    {
        //  右移动
        player.body.velocity.x = 150;
 
        player.animations.play('right');
    }
    else
    {
        //  静止
        player.animations.stop();
 
        player.frame = 4;
    }
 
    //  allow the player to jump if they are touching the ground.
    if (cursors.up.isdown && player.body.touching.down)
    {
        player.body.velocity.y = -350;
    }
}

update方法主要负责一些事件的绑定,比如collide来检测两个元素是否碰撞,前两个参数分别是两个元素,后面是触发的回调方法。


overlap顾名思义是用来检测两个元素是否重叠,也就是小人和星星是否重叠。


然后在为其添加分数显示的text


到此为止,一个简单的小游戏就建成了。


具体的每一项的配置,可以参考官网的doc来配置。


完!

喎?>