📜JavaScript developer.
🐲RPG fan.
📚Storyteller and 🕹game developer.
👨Father and Husband.
{
// create an HTML parent element that MelonJS will insert the canvas into.
yield html`<div id="melonparent"></div>`
}
Melon.me.device.onReady(()=>{
console.log("onready");
game.onload()
})
EnemyManager = Melon.me.Container.extend({
init : function () {
this._super(Melon.me.Container, "init", [0, 32,
this.COLS * 64 - 32,
this.ROWS * 64 - 32
]);
this.COLS = 9;
this.ROWS = 4;
this.vel = 16;
this.onChildChange = function () {
this.updateChildBounds();
};
},
update : function (time) {
this._super(Melon.me.Container, "update", [time]);
this.updateChildBounds();
},
createEnemies : function () {
for (var i = 0; i < this.COLS; i++) {
for (var j = 0; j < this.ROWS; j++) {
this.addChild(Melon.me.pool.pull("enemy", i * 64, j * 64));
}
}
},
onActivateEvent : function () {
var _this = this;
this.timer = Melon.me.timer.setInterval(function () {
var bounds = _this.childBounds;
console.log("bounds:", bounds)
console.log("width", Melon.me.game.viewport.width)
if ((_this.vel > 0 && (bounds.right + _this.vel) >= Melon.me.game.viewport.width) ||
(_this.vel < 0 && (bounds.left + _this.vel) <= 0)) {
_this.vel *= -1;
_this.pos.y += 16;
if (_this.vel > 0) {
_this.vel += 5;
}
else {
_this.vel -= 5;
}
}
else {
_this.pos.x += _this.vel;
}
}, 1000);
},
onDeactivateEvent : function () {
Melon.me.timer.clearInterval(this.timer);
}
});
Enemy = Melon.me.Entity.extend({
init: function (x, y) {
this._super(Melon.me.Entity, "init", [x, y, {
image : "ships",
width : 32,
height : 32
}]);
this.chooseShipImage();
this.body.setVelocity(0, 0);
this.body.collisionType = Melon.me.collision.types.ENEMY_OBJECT;
},
update : function (time) {
this._super(Melon.me.Entity, "update", [time]);
this.body.update();
return true;
},
chooseShipImage: function () {
var frame = ~~(Math.random() * 3);
this.renderable.addAnimation("idle", [frame], 1);
this.renderable.setCurrentAnimation("idle");
}
})
game = ({
// an object to store game information
// Observable needs object wrapped with () when not generators
data: {
// score
score: 0
},
onload : function(){
console.log("console log called from game data - onload");
document.getElementById("melonparent").innerHTML = ""; // kills infinite loop in Observable
// Initialize the video.
if (!Melon.me.video.init(960, 640, {parent : "melonparent", scale : "auto", scaleMethod : "flex"})) {
alert("Your browser does not support HTML5 canvas.");
return;
}
// Initialize the audio.
Melon.me.audio.init("mp3,ogg");
Melon.me.loader.crossOrigin = "anonymous";
Melon.me.loader.preload(data.resources, this.loaded.bind(this));
},
// Run on game resources loaded.
loaded : function () {
console.log("loaded: game loaded event")
Melon.me.pool.register("player", Player);
Melon.me.pool.register("enemy", Enemy);
Melon.me.pool.register("laser", Laser);
// set the "Play/Ingame" Screen Object
this.playScreen = new screens.PlayScreen();
console.log("playscreen",this.playScreen)
Melon.me.state.set(Melon.me.state.PLAY, this.playScreen);
// start the game
Melon.me.state.change(Melon.me.state.PLAY);
}
})
Player = Melon.me.Sprite.extend({
init : function () {
console.log("player init called")
Melon.me.loader.crossOrigin = "anonymous";
var image = Melon.me.loader.getImage("player");
this._super(Melon.me.Sprite, "init", [
Melon.me.game.viewport.width / 2 - image.width / 2,
Melon.me.game.viewport.height - image.height - 20,
{ image : image }
]);
this.velx = 450;
this.maxX = Melon.me.game.viewport.width - this.width;
},
update : function (time) {
this._super(Melon.me.Sprite, "update", [time]);
if (Melon.me.input.isKeyPressed("left")) {
this.pos.x -= this.velx * time / 1000;
}
if (Melon.me.input.isKeyPressed("right")) {
this.pos.x += this.velx * time / 1000;
}
this.pos.x = Melon.me.Math.clamp(this.pos.x, 0, this.maxX);
if (Melon.me.input.isKeyPressed("shoot")) {
Melon.me.game.world.addChild(Melon.me.pool.pull("laser", this.pos.x - 5, this.pos.y - 32))
}
return true;
}
})
screens = ({
PlayScreen: Melon.me.Stage.extend({
/**
* action to perform on state change
*/
onResetEvent : function () {
Melon.me.game.world.addChild(new Melon.me.ColorLayer("background", "#000000"), 0);
Melon.me.game.world.addChild(Melon.me.pool.pull("player"), 1);
//Melon.me.game.world.addChild(Melon.me.pool.pull("enemy", 50, 50), 2);
this.enemyManager = new EnemyManager();
this.enemyManager.createEnemies();
Melon.me.game.world.addChild(this.enemyManager, 2);
Melon.me.input.bindKey(Melon.me.input.KEY.LEFT, "left");
Melon.me.input.bindKey(Melon.me.input.KEY.RIGHT, "right");
Melon.me.input.bindKey(Melon.me.input.KEY.A, "left");
Melon.me.input.bindKey(Melon.me.input.KEY.D, "right");
Melon.me.input.bindKey(Melon.me.input.KEY.SPACE, "shoot", true);
},
/**
* action to perform when leaving this screen (state change)
*/
onDestroyEvent : function () {
Melon.me.input.unbindKey(Melon.me.input.KEY.LEFT);
Melon.me.input.unbindKey(Melon.me.input.KEY.RIGHT);
Melon.me.input.unbindKey(Melon.me.input.KEY.A);
Melon.me.input.unbindKey(Melon.me.input.KEY.D);
Melon.me.input.unbindKey(Melon.me.input.KEY.SPACE);
}
})
})
Laser = Melon.me.Entity.extend({
init : function (x, y) {
this._super(Melon.me.Entity, "init", [x, y, { width: 5, height: 28 }]);
this.z = 5;
this.body.setVelocity(0, 300);
this.body.collisionType = Melon.me.collision.types.PROJECTILE_OBJECT;
this.renderable = new (Melon.me.Renderable.extend({
init : function () {
this._super(Melon.me.Renderable, "init", [0, 0, 5, 28]);
},
destroy : function () {},
draw : function (renderer) {
var color = renderer.getColor();
renderer.setColor('#5EFF7E');
renderer.fillRect(0, 0, 5, 28);
renderer.setColor(color);
}
}));
this.alwaysUpdate = true;
},
update : function (time) {
this.body.vel.y -= this.body.accel.y * time / 1000;
if (this.pos.y + this.height <= 0) {
Melon.me.game.world.removeChild(this);
}
this.body.update();
Melon.me.collision.check(this);
return true;
},
onCollision : function (res, other) {
if (other.body.collisionType === Melon.me.collision.types.ENEMY_OBJECT) {
Melon.me.game.world.removeChild(this);
//game.playScreen.enemyManager.removeChild(other);
//Melon.me.game.world.enemyManager.removeChild(other);
//console.log(game.playScreen.enemyManager)
//screens.PlayScreen.enemyManager.removeChild(other)
//Melon.me.game.world.removeChild(other)
//console.log("em:",screens.PlayScreen.enemyManager)
//console.log(game.playScreen)
Melon.me.game.getParentContainer(other).removeChild(other)
return false;
}
}
});
HUD = ({
container: Melon.me.Container.extend({
init: function() {
// call the constructor
this._super(Melon.me.Container, 'init');
// persistent across level change
this.isPersistent = true;
// make sure we use screen coordinates
this.floating = true;
// give a name
this.name = "HUD";
// add our child score object at the top left corner
//this.addChild(new game.HUD.ScoreItem(5, 5));
}
})
})
data = ({
resources : [
{ name: "player", type: "image", src: await FileAttachment("player.png").url() },
{ name: "ships", type: "image", src: await FileAttachment("ships.png").url() }
]
})
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
