Talking about Magick game, Game development, HTML5, Javascript and Phaser.
Magick is a fun iPad game I played some years ago, and I also wrote a first tutorial about it. I don’t think you can find the game anymore, or at least I can’t open the original link, but I wanted to update the source code adding more room for customization and the capability to change player direction by tapping on it. The player walks and climbs on his own, you can only click anywhere on an empty spot to summon a crate, but you can summon only one crate at once. Moreover, in this version you can also change player direction if you tap within a certain distance from it. Will you be able to reach the upper platform on the left? I really like the gameplay, and since at the moment the game seems to have disappeared, it would be nice to create something which remembers it. The source code is less than 100 lines, still uncommented but you can find some comments in the first version of the game. I will add comments once the game has more features, like enemies and traps.
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.