【2Dhtml5游戏框架phaser介绍3】preload，create，update

来源：互联网发布：matlab分水岭算法编辑：程序博客网时间：2024/05/21 06:01

使用phaser开发游戏，基本的结构如下：

}

此时应该如下图

通过game.add.sprite()方法便会把在preload()中定义的资源显示在页面上，第一个参数是x坐标，第二个参数是y坐标，原点为左上角。注意显示的顺序为create中所写的顺序，也就是先显示ground，再显示ship，如果代码中先game.add.sprite(0, 0, 'ship')，再game.add.sprite(0, 0, 'ground')，当它们的坐标相同时，即都为(0,0)时，并且ground比ship大时，ship就会被遮住，无法看到。
现在我们在update()方法中加入代码，让飞船能通过键盘的方向键动起来。每当有键盘等触发或者刷新帧时，都会调用update定义的方法。此时所有的代码如下

<!doctype html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">    <head>        <meta content="text/html; charset=utf-8" http-equiv="Content-Type">        <title>my ship</title>               <script src="_site/js/jquery-2.0.3.min.js" type="text/javascript"></script>                <script src="_site/js/phaser.js" type="text/javascript"></script><script>var game = new Phaser.Game(800, 600, Phaser.AUTO, 'example', { preload: preload, create: create, update: update });var ship;var cursors;function preload() {game.load.image('ship', 'assets/sprites/thrust_ship2.png');game.load.image('ground', 'assets/pics/platformer_backdrop.png');} function create() {game.add.sprite(0, 0, 'ground');ship = game.add.sprite(0, 0, 'ship');ship.anchor.set(0);game.physics.arcade.enable(ship);cursors = game.input.keyboard.createCursorKeys();} function update() {ship.body.velocity.x = 0;ship.body.velocity.y = 0;if (cursors.left.isDown){//  Move to the leftship.body.velocity.x = -150; ship.animations.play('left');}if (cursors.right.isDown){//  Move to the rightship.body.velocity.x = 150; ship.animations.play('right');}if (cursors.up.isDown){//  Move to the rightship.body.velocity.y = -150; ship.animations.play('up');}if (cursors.down.isDown){//  Move to the rightship.body.velocity.y = 150; ship.animations.play('down');}}</script>    </head>    <body>    <div id="example"></div>    </body></html>

0 0