Phaser.io Sidescroller

Developer
Tim
Size
3,469 Kb
Views
50,600
  1. Phaser.io Sidescroller Previews
  2. Phaser.io Sidescroller HTML Codes
  3. Phaser.io Sidescroller JS Codes

How do I make an phaser.io sidescroller?

What is a phaser.io sidescroller? How do you make a phaser.io sidescroller? This script and codes were developed by Tim on 31 October 2022, Monday.

Phaser.io Sidescroller Previews
IQ Test

Phaser.io Sidescroller - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Phaser.io Sidescroller</title>
</head>
<body> <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 Sidescroller - Script Codes JS Codes

var game = new Phaser.Game( 600, //width 400, //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
)
var gameMemory = { score: 0, player:{ attack: 1, health: 5, },
}
let playState = { attacking: false, gameover: false, create: function(){ // this.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL this.scale.pageAlignHorizontally = true; this.scale.pageAlignVertically = true; // this.scale.setShowAll() game.world.setBounds(0, 0, 2000, 400) //Setup the physics // game.physics.startSystem(Phaser.Physics.ARCADE) let sky = game.add.sprite(0,0,'sky') sky.scale.setTo(200,1) //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(200,2) ground.body.immovable = true //The player player = game.add.sprite(32, game.world.height - 150, 'dude') player.stats = {health: 5, maxHealth: 5, attackRate: 1000, attack:1} // create a new bitmap data object var bmd = game.add.bitmapData(32,4); // draw to the canvas context like normal bmd.ctx.beginPath(); bmd.ctx.rect(0,0,32,4); //player width is 32 so I matched that to avoid having to center it bmd.ctx.fillStyle = '#ff0000'; bmd.ctx.fill(); player.healthbar = game.add.sprite(0, 0, bmd) player.addChild(player.healthbar) //Enable player physics game.physics.arcade.enable(player) game.camera.follow(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=1; i<12; i++){ let star = stars.create(i*200,300,'star') star.body.immovable = true star.stats = {health: 2, maxHealth:2, attackRate: 800, attack: 1} // create a new bitmap data object var bmd = game.add.bitmapData(32,4); // draw to the canvas context like normal bmd.ctx.beginPath(); bmd.ctx.rect(0,0,32,4); //player width is 32 so I matched that to avoid having to center it bmd.ctx.fillStyle = '#ff0000'; bmd.ctx.fill(); star.healthbar = game.add.sprite(-4, -8, bmd) star.addChild(star.healthbar) } scoreText = game.add.text(16,16, 'Gold: '+gameMemory.score, {fontSize: '24px', fill: '#000'}) scoreText.fixedToCamera = true }, update: function (){ if(!this.gameover){ //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.collide(player,stars,this.collectStar,null,this) cursors = game.input.keyboard.createCursorKeys() player.body.velocity.x = 0 if(player.position.x + player.width == game.world.width){ this.gameover = true } else{ if(!this.attacking){ player.body.velocity.x = 150 player.animations.play('right') } else{ player.animations.stop() player.frame = 4 } } } else{ this.gameover = false game.state.start('menu') } }, collectStar: function(player,enemy){ this.attacking = true var playerAttackInterval, enemyAttackInterval playerAttackInterval = setInterval((attacker,defender)=>{ //Attack defender.stats.health -= attacker.stats.attack //Update enemy healthbar defender.healthbar.width = Math.ceil(32 * defender.stats.health / defender.stats.maxHealth) //Check if dead if(defender.stats.health <= 0){ defender.kill() this.attacking = false gameMemory.score += 1 scoreText.text = 'Gold: '+gameMemory.score clearInterval(playerAttackInterval) clearInterval(enemyAttackInterval) } }, player.stats.attackRate, player, enemy) enemyAttackInterval = setInterval((attacker, defender)=>{ //Attack defender.stats.health -= attacker.stats.attack //Update enemy healthbar defender.healthbar.width = Math.ceil(32 * defender.stats.health / defender.stats.maxHealth) //Check if dead if(defender.stats.health <= 0){ defender.kill() this.attacking = false this.gameover=true clearInterval(enemyAttackInterval) clearInterval(playerAttackInterval) } }, enemy.stats.attackRate, enemy, player) },
}
let bootState = { create: function(){ //Start the physics system game.physics.startSystem(Phaser.Physics.ARCADE) //Then continue with the load state game.state.start('load') },
}
let loadState = { preload: function(){ 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) game.load.image('buttonUp','https://i.imgsafe.org/0cec070058.png') game.load.image('buttonPlus','https://i.imgsafe.org/0cf52aecbe.png') }, create: function(){ //Continue with the menu state game.state.start('menu') },
}
let menuState = { create: function(){ let nameLabel = game.add.text(0,0, 'Shop', {font: '50px Arial', fill:'#ffffff'}) let labelStyle = {font:'25px Arial', fill:'#ffffff'} let goldLabel = game.add.text(25,60, 'Gold: '+gameMemory.score, labelStyle) let attackLabel = game.add.text(25,160, 'Attack Level: '+gameMemory.player.attack, labelStyle) var style = { font: "30px Arial", fill: "#ffffff" } let attackButton = game.add.button(200,165,'buttonPlus',null,this) let healthLabel = game.add.text(25,185, 'Health Level: '+gameMemory.player.health, labelStyle) let startLabel = game.add.text(80, game.world.height-80, 'press "space" key to start', {font:'25px Arial', fill:'#ffffff'}) let spaceKey = game.input.keyboard.addKey(Phaser.Keyboard.SPACEBAR) spaceKey.onDown.addOnce(this.start, this) }, start: function(){ game.state.start('play') },
}
game.state.add('play', playState)
game.state.add('boot', bootState)
game.state.add('load', loadState)
game.state.add('menu', menuState)
game.state.start('boot')
Phaser.io Sidescroller - Script Codes
Phaser.io Sidescroller - Script Codes
Home Page Home
Developer Tim
Username maytim
Uploaded October 31, 2022
Rating 3
Size 3,469 Kb
Views 50,600
Do you need developer help for Phaser.io Sidescroller?

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
Name
Pixel paint
Double Helix Animation - Jade and Sass
Barbell
Custom Multi Column Data Entry Select
Reddit API Gifs
Game idea
Custom Dropdown
Pixi JS
CSS Grid Calendar
Javascript Pong Game
Create amazing blog posts 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!