Phaser.io First Game Tutorial

Developer
Size
2,478 Kb
Views
32,384

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 Previews

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
}
Phaser.io First Game Tutorial - Script Codes
Phaser.io First Game Tutorial - Script Codes
Home Page Home
Developer Tim
Username maytim
Uploaded October 31, 2022
Rating 3
Size 2,478 Kb
Views 32,384
Do you need developer help for Phaser.io First Game Tutorial?

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!

Tim (maytim) Script Codes
Create amazing marketing copy with AI!

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!