Phaser.io First Game Tutorial
How do I make an phaser.io first game tutorial?
What is a phaser.io first game tutorial? How do you make a phaser.io first game tutorial? This script and codes were developed by Tim on 31 October 2022, Monday.
Phaser.io First Game Tutorial - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Phaser.io First Game Tutorial</title>
</head>
<body> <a href="https://phaser.io/tutorials/making-your-first-phaser-game" target="_blank">Phaser.io first game tutorial</a> <script src='https://cdnjs.cloudflare.com/ajax/libs/phaser/2.6.2/phaser.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Phaser.io First Game Tutorial - Script Codes JS Codes
var game = new Phaser.Game( 800, //width 600, //height Phaser.CANVAS, //Usually use AUTO to get webGL, but webGL isn't being friendly with my cross origin image hosting '', //dom element that hosts the game canvas {preload: preload, create: create, update: update} //game object
)
let platforms
let score = 0
let scoreText
function preload(){ game.load.image('star', 'https://i.imgsafe.org/fae6026a5e.png') game.load.image('sky','https://i.imgsafe.org/fb15db5a82.png') game.load.image('ground','https://i.imgsafe.org/fb20269571.png') game.load.spritesheet('dude','https://i.imgsafe.org/fb2651a1f6.png',32,48)
}
function create(){ //Setup the physics game.physics.startSystem(Phaser.Physics.ARCADE) game.add.sprite(0,0,'sky') //Create a groudn to hold the ground and ledges platforms = game.add.group() platforms.enableBody = true //Set up the ground var ground = platforms.create(0, game.world.height-64, 'ground') ground.scale.setTo(2,2) ground.body.immovable = true //Set up the floating ledges var ledge = platforms.create(400,400, 'ground') ledge.body.immovable = true ledge = platforms.create(-150,250,'ground') ledge.body.immovable = true //The player player = game.add.sprite(32, game.world.height - 150, 'dude') //Enable player physics game.physics.arcade.enable(player) //Player physics properties player.body.bounce.y = 0.2 player.body.gravity.y = 300 player.body.collideWorldBounds = true //Player wlaking animations 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 for(let i=0; i<12; i++){ let star = stars.create(i*70,0,'star') star.body.gravity.y=6 star.body.bounce.y = 0.7 + Math.random()*0.2 } scoreText = game.add.text(16,16, 'score: 0', {fontSize: '32px', fill: '#000'})
}
function update(){ //The player will now collide with the platforms let hitPlatform = game.physics.arcade.collide(player, platforms) game.physics.arcade.collide(stars, platforms) game.physics.arcade.overlap(player,stars,collectStar,null,this) cursors = game.input.keyboard.createCursorKeys() 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 && hitPlatform){ player.body.velocity.y = -350 }
}
function collectStar(player,star){ star.kill() score+=10 scoreText.text = 'Score: '+score
}
Developer | Tim |
Username | maytim |
Uploaded | October 31, 2022 |
Rating | 3 |
Size | 2,478 Kb |
Views | 32,384 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
Custom Multi Column Data Entry Select | 3,313 Kb |
Javascript Spelling Game | 4,380 Kb |
Phaser.io Sidescroller | 3,469 Kb |
Double Helix Animation - Jade and Sass | 2,497 Kb |
Custom Dropdown | 2,387 Kb |
Javascript Pong Game | 2,903 Kb |
CSS Grid Calendar | 2,694 Kb |
Pixel paint | 3,468 Kb |
A Pen by Tim | 2,359 Kb |
Double Helix Animation - Jade and Sass | 2,437 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
Scifi-style Interative Form | Aaronchuo | 4,566 Kb |
Portfolio Landing Page | FDfranklin | 3,585 Kb |
Cloudy Spiral CSS animation | Hakimel | 6,587 Kb |
3D-box | Parthviroja | 2,346 Kb |
Ball bouncing loading animation | Adam2326 | 3,144 Kb |
Awesome | Samarthpd | 2,901 Kb |
Sass Get Function | Lukewatts | 2,155 Kb |
Wrap_Test | Mscfourn | 7,503 Kb |
Resize image | Happyhj | 1,892 Kb |
RAQuote | Naderk007 | 4,412 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!