Build a HTML5 game like “Magick” iPad game using Phaser and ARCADE physics – code updated and new features added
Talking about Magick game, Game development, HTML5, Javascript and Phaser.
Do you like my tutorials?
Then consider supporting me on Ko-fi.
var game;
var gameOptions = {
playerSpeed: 120,
playerJumpSpeed: {
x: 30,
y: -100
},
tileSize: 32,
changeDirectionRange: 32,
playerGravity: 400
}
window.onload = function() {
game = new Phaser.Game(800, 320, Phaser.CANVAS);
game.state.add("PlayGame", playGame, true);
}
var playGame = function(){}
playGame.prototype = {
preload: function(){
game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
game.scale.pageAlignHorizontally = true;
game.scale.pageAlignVertically = true;
game.load.tilemap("map", "map.json", null, Phaser.Tilemap.TILED_JSON);
game.load.image("rock", "rock.png");
game.load.image("block", "block.png");
game.load.image("player", "player.png");
},
create: function(){
this.tilePoint = null;
game.physics.startSystem(Phaser.Physics.ARCADE);
this.map = game.add.tilemap("map");
this.map.addTilesetImage("rock");
this.map.addTilesetImage("block");
this.map.setCollisionBetween(1,2);
this.levelLayer = this.map.createLayer("myLevel");
this.player = game.add.sprite(48, 226, "player");
this.player.anchor.set(0.5);
this.player.isJumping = false;
this.player.direction = 1;
game.physics.enable(this.player, Phaser.Physics.ARCADE);
this.player.body.gravity.y = gameOptions.playerGravity;
game.input.onDown.add(this.addBlock, this);
},
update:function(){
this.player.body.velocity.x = 0;
game.physics.arcade.collide(this.player, this.levelLayer, this.movePlayer, null, this);
},
movePlayer: function(){
if(this.player.body.blocked.down){
this.player.body.velocity.x = gameOptions.playerSpeed * this.player.direction;
this.player.isJumping = false;
}
if(this.player.body.blocked.right && this.player.direction == 1){
if((!this.map.getTileWorldXY(this.player.x + gameOptions.tileSize, this.player.y - gameOptions.tileSize, gameOptions.tileSize, gameOptions.tileSize, this.levelLayer) && !this.map.getTileWorldXY(this.player.x, this.player.y - gameOptions.tileSize, gameOptions.tileSize, gameOptions.tileSize, this.levelLayer)) || this.player.isJumping){
this.jump();
}
else{
this.player.direction *= -1;
}
}
if(this.player.body.blocked.left && this.player.direction == -1){
if((!this.map.getTileWorldXY(this.player.x - gameOptions.tileSize, this.player.y - gameOptions.tileSize, gameOptions.tileSize, gameOptions.tileSize, this.levelLayer) && !this.map.getTileWorldXY(this.player.x, this.player.y - gameOptions.tileSize, gameOptions.tileSize, gameOptions.tileSize, this.levelLayer)) || this.player.isJumping){
this.jump();
}
else{
this.player.direction *= -1;
}
}
},
addBlock: function(e){
var distanceX = e.x - this.player.x;
var distanceY = e.y - this.player.y;
if ((distanceX * distanceX + distanceY * distanceY) < gameOptions.changeDirectionRange * gameOptions.changeDirectionRange){
this.player.direction *= -1;
}
else{
if(!this.map.getTileWorldXY(e.x, e.y, gameOptions.tileSize, gameOptions.tileSize, this.levelLayer)){
if(this.tilePoint){
this.map.removeTileWorldXY(this.tilePoint.x, this.tilePoint.y, gameOptions.tileSize, gameOptions.tileSize, this.levelLayer);
}
this.map.putTileWorldXY(2, e.x, e.y, gameOptions.tileSize, gameOptions.tileSize, this.levelLayer);
this.tilePoint = new Phaser.Point(e.x, e.y);
}
}
},
jump: function(){
this.player.body.velocity.y = gameOptions.playerJumpSpeed.y;
this.player.body.velocity.x = gameOptions.playerJumpSpeed.x * this.player.direction;
this.player.isJumping = true;
}
}
Never miss an update! Subscribe, and I will bother you by email only when a new game or full source code comes out.