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

最新推荐文章于 2024-07-16 15:39:09 发布

北一

最新推荐文章于 2024-07-16 15:39:09 发布

阅读量1.5k

点赞数

分类专栏： html5 游戏 JAVASCRIPT 文章标签： html5 游戏 phaser

本文链接：https://blog.csdn.net/xfei365/article/details/25160421

版权

JAVASCRIPT 同时被 3 个专栏收录

33 篇文章 0 订阅

订阅专栏

html5

3 篇文章 0 订阅

订阅专栏

游戏

3 篇文章 0 订阅

订阅专栏

使用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 left
				ship.body.velocity.x = -150;
		 
				ship.animations.play('left');
			}
			if (cursors.right.isDown)
			{
				//  Move to the right
				ship.body.velocity.x = 150;
		 
				ship.animations.play('right');
			}
			if (cursors.up.isDown)
			{
				//  Move to the right
				ship.body.velocity.y = -150;
		 
				ship.animations.play('up');
			}
			if (cursors.down.isDown)
			{
				//  Move to the right
				ship.body.velocity.y = 150;
		 
				ship.animations.play('down');
			}
			
		}
		</script>
    </head>
    <body>

    <div id="example"></div>

    </body>
</html>