<! DOCTYPE html> <head> <meta charset="UTF-8" /> <title>exam1</title> <script src=".. /phaser.min.js"></script> </head> <body> <script> var game = new Phaser.Game(800, 600, Phaser.AUTO, '', { preload: preload, create: create, update: update }); function preload() { console.log('preload'); } function create() { console.log('create'); } function update() { console.log('update'); } </script> </body>Copy the code
<! DOCTYPE html> <head> <meta charset="UTF-8" /> <title>exam2</title> <script src=".. /phaser.min.js"></script> </head> <body> <script> var game = new Phaser.Game(800, 600, Phaser.AUTO, '', { preload: preload, create: create, update: update }); 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); } function create() { game.add.sprite(0, 0, 'star'); } function update() { console.log('update'); } </script> </body>Copy the code




<! DOCTYPE html> <head> <meta charset="UTF-8" /> <title>exam3</title> <script src=".. /phaser.min.js"></script> </head> <body> <script> var game = new Phaser.Game(800, 600, Phaser.AUTO, '', { preload: preload, create: create, update: update }); 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); } var platforms; function create() { game.physics.startSystem(Phaser.Physics.ARCADE); game.add.sprite(0, 0, 'sky'); platforms = game.add.group(); platforms.enableBody = true; var ground = platforms.create(0, game.world.height - 64, 'ground'); 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; } function update() { console.log('update'); } </script> </body>Copy the code

<! DOCTYPE html> <head> <meta charset="UTF-8" /> <title>exam4</title> <script src=".. /phaser.min.js"></script> </head> <body> <script> var game = new Phaser.Game(800, 600, Phaser.AUTO, '', { preload: preload, create: create, update: update }); 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); } var platforms; var player; function create() { game.physics.startSystem(Phaser.Physics.ARCADE); game.add.sprite(0, 0, 'sky'); platforms = game.add.group(); platforms.enableBody = true; var ground = platforms.create(0, game.world.height - 64, 'ground'); 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; player = game.add.sprite(32, game.world.height - 150, 'dude'); game.physics.arcade.enable(player); Player. Body. Bounce. Y = 0.2; player.body.gravity.y = 300; player.body.collideWorldBounds = true; player.animations.add('left', [0, 1, 2, 3], 10, true); player.animations.add('right', [5, 6, 7, 8], 10, true); } function update() { console.log('update'); } </script> </body>Copy the code

Sprite also adds sprites through game.add.sprite, but take a closer look at the dude.png resource image, which is a frame animation sequence that includes animation frames of the little man moving left and right. We also turned on its physical properties, and then set its elasticity and gravity. player.body.collideWorldBounds = true; This sentence sets it to collide with the boundary, which is why when the little man falls, he will not fall at the boundary of the game area. You can comment out this sentence and run it to see what happens. Here, we also add two animations for the little man, one to move to the left and one to move to the right, and specify the animation frame of the response respectively, which is also preparation for the subsequent animation.


But the little man has not yet stood on the ground. Next, let’s make the little man stand on the ground:

<! DOCTYPE html> <head> <meta charset="UTF-8" /> <title>exam5</title> <script src=".. /phaser.min.js"></script> </head> <body> <script> var game = new Phaser.Game(800, 600, Phaser.AUTO, '', { preload: preload, create: create, update: update }); 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); } var platforms; var player; function create() { game.physics.startSystem(Phaser.Physics.ARCADE); game.add.sprite(0, 0, 'sky'); platforms = game.add.group(); platforms.enableBody = true; var ground = platforms.create(0, game.world.height - 64, 'ground'); 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; player = game.add.sprite(32, game.world.height - 150, 'dude'); game.physics.arcade.enable(player); Player. Body. Bounce. Y = 0.2; player.body.gravity.y = 300; player.body.collideWorldBounds = true; player.animations.add('left', [0, 1, 2, 3], 10, true); player.animations.add('right', [5, 6, 7, 8], 10, true); } function update() { game.physics.arcade.collide(player, platforms); } </script> </body>Copy the code


Are you surprised? To make a mean person stand on the ground, as long as add in the update, game. Physics. Arcade. Collide (player, platforms); Is ok, this sentence said, collision detection SIMS and platforms group, and the earth is in platforms group, in this way, the dog is not through the earth. Similarly, when the little man collides with two flat plates, he will not pass through.


But the little man was still stupidly unable to move. Next, let the little man move:

<! DOCTYPE html> <head> <meta charset="UTF-8" /> <title>exam6</title> <script src=".. /phaser.min.js"></script> </head> <body> <script> var game = new Phaser.Game(800, 600, Phaser.AUTO, '', { preload: preload, create: create, update: update }); 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); } var platforms; var player; var cursors; function create() { game.physics.startSystem(Phaser.Physics.ARCADE); game.add.sprite(0, 0, 'sky'); platforms = game.add.group(); platforms.enableBody = true; var ground = platforms.create(0, game.world.height - 64, 'ground'); 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; player = game.add.sprite(32, game.world.height - 150, 'dude'); game.physics.arcade.enable(player); Player. Body. Bounce. Y = 0.2; player.body.gravity.y = 300; 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(); } function update() { game.physics.arcade.collide(player, platforms); 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; } if (cursors.up.isDown && player.body.touching.down) { player.body.velocity.y = -350; } } </script> </body>Copy the code


We hope to make a mean person left in the press direction, move to the left, press the right direction, to the right, in order to achieve this, we have defined a your cursors, we through your cursors = game. The input. The rid_device_info_keyboard. CreateCursorKeys (); To get the system’s keyboard input object. Then, in update, we judge whether the user has pressed the left key through the cursors. Left. IsDown, if the cursors have pressed the left key, we set a speed for the cursor, then play the animation to move left, and the right direction is the same logic. If the left and right arrow keys are not pressed, then we set the player to stop on frame 4 via Player. frame. Dog jumps is done by the direction key, but there is one condition, are small in the air, are not allowed to jump, so, coupled with a player. Body. Touching. Down to the judgment of the conditions.

A small person moving in this scene is not interesting, how about adding something:

<! DOCTYPE html> <head> <meta charset="UTF-8" /> <title>exam7</title> <script src=".. /phaser.min.js"></script> </head> <body> <script> var game = new Phaser.Game(800, 600, Phaser.AUTO, '', { preload: preload, create: create, update: update }); 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); } var platforms; var player; var cursors; var stars; function create() { game.physics.startSystem(Phaser.Physics.ARCADE); game.add.sprite(0, 0, 'sky'); platforms = game.add.group(); platforms.enableBody = true; var ground = platforms.create(0, game.world.height - 64, 'ground'); 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; player = game.add.sprite(32, game.world.height - 150, 'dude'); game.physics.arcade.enable(player); Player. Body. Bounce. Y = 0.2; player.body.gravity.y = 300; 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 * 70, 0, 'star'); star.body.gravity.y = 300; Star.body.bounce. Y = 0.7 + math.random () * 0.2; } } function update() { game.physics.arcade.collide(player, platforms); game.physics.arcade.collide(stars, platforms); game.physics.arcade.overlap(player, stars, collectStar, 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; } if (cursors.up.isDown && player.body.touching.down) { player.body.velocity.y = -350; } } function collectStar (player, star) { star.kill(); } </script> </body>Copy the code

In create, we created a group of stars. To this group, we added 12 stars, and then set their gravity and randomly set their elasticity so that when they fall, they bounce at different heights when they hit a flat surface or the ground. Also, stars cannot pass through the ground, so in update, collision detection was added.

There is another layer of collision detection, which is the collision between the star and the actor. When the star and the actor collide, we need to make the star disappear. When we add collision detection, we also add a callback function collectStar, where our player and star are passed in as parameters. By calling star.kill(); Destroy the stars.

All the stars are collected, and then we need to calculate the score. We can’t just collect stars without scoring, right?

<! DOCTYPE html> <head> <meta charset="UTF-8" /> <title>exam8</title> <script src=".. /phaser.min.js"></script> </head> <body> <script> var game = new Phaser.Game(800, 600, Phaser.AUTO, '', { preload: preload, create: create, update: update }); 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); } var platforms; var player; var cursors; var stars; var score = 0; var scoreText; function create() { game.physics.startSystem(Phaser.Physics.ARCADE); game.add.sprite(0, 0, 'sky'); platforms = game.add.group(); platforms.enableBody = true; var ground = platforms.create(0, game.world.height - 64, 'ground'); 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; player = game.add.sprite(32, game.world.height - 150, 'dude'); game.physics.arcade.enable(player); Player. Body. Bounce. Y = 0.2; player.body.gravity.y = 300; 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 * 70, 0, 'star'); star.body.gravity.y = 300; Star.body.bounce. Y = 0.7 + math.random () * 0.2; } scoreText = game.add.text(16, 16, 'score: 0', { fontSize: '32px', fill: '#000' }); } function update() { game.physics.arcade.collide(player, platforms); game.physics.arcade.collide(stars, platforms); game.physics.arcade.overlap(player, stars, collectStar, 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; } if (cursors.up.isDown && player.body.touching.down) { player.body.velocity.y = -350; } } function collectStar (player, star) { star.kill(); score += 10; scoreText.text = 'Score: ' + score; } </script> </body>Copy the code

We add a text to the scene via game.add.text, which is displayed in the upper left corner. At collectStar, we add up the score, then update the display, and we’re done.


Here, a simple small game is realized, is it simpler than imagined?

Phaser has a few other resources for this mini-game, but we’re not using them here, probably because we want to expand on them ourselves.

Phaser games are as simple as that. With a little JS, anyone can make a game.

www.phaser-china.com/tutorial-de…