Use a javascript game engine

Create a new project in your editor and make two files named index.html and game.js so your game has a web page and a script file.

Open index.html and paste this script tag inside the head to add Phaser to your page:

In index.html add this script tag just before the closing tag to load your game code:

Open game.js and paste this game skeleton to create a Phaser game with empty scene functions: const config = { type: Phaser.AUTO, width: 800, height: 600, physics: { default: 'arcade', arcade: { gravity: { y: 0 } } }, scene: { preload: preload, create: create, update: update } }; let player; let stars; let cursors; let score = 0; let scoreText; new Phaser.Game(config);

Inside game.js add this preload code to load your images by filename so Phaser can use them: function preload() { this.load.image('player','player.png'); this.load.image('star','star.png'); }

In the create function add the player sprite and give it arcade physics so it can move and collide with world bounds: function create() { player = this.physics.add.sprite(400,300,'player'); player.setCollideWorldBounds(true); }

Still in create add a group of collectible stars and make them bounce so they look fun: stars = this.physics.add.group({ key: 'star', repeat: 7, setXY: { x: 50, y: 50, stepX: 90 } }); stars.children.iterate(function(child){ child.setBounceY(Phaser.Math.FloatBetween(0.4,0.8)); });

In create add keyboard controls so the player can move using arrow keys: cursors = this.input.keyboard.createCursorKeys();

In create add a score text on the screen to show points: scoreText = this.add.text(16,16,'Score: 0',{ fontSize: '20px', fill: '#fff' });

Still in create tell Phaser to check when the player overlaps a star and call a collect function: this.physics.add.overlap(player, stars, collectStar, null, this);

Add the collectStar function to disable the collected star increase the score and update the score text so collecting works: function collectStar(player, star) { star.disableBody(true,true); score += 10; scoreText.setText('Score: ' + score); }

Add the update function to read the arrow keys each frame and set the player's velocity so the sprite moves smoothly: function update() { player.setVelocity(0); if (cursors.left.isDown) { player.setVelocityX(-200); } else if (cursors.right.isDown) { player.setVelocityX(200); } if (cursors.up.isDown) { player.setVelocityY(-200); } else if (cursors.down.isDown) { player.setVelocityY(200); } }

Run or preview index.html in your browser to test the game and fix small issues like image file names or sizes until the player moves and stars disappear when touched.

Share a screenshot or short description of your finished game and what you learned by posting your project on DIY.org.