Skip to content

Instantly share code, notes, and snippets.

@konsumer

konsumer/index.html

Created October 26, 2012 12:32
Show Gist options
  • Save konsumer/3958508 to your computer and use it in GitHub Desktop.
Save konsumer/3958508 to your computer and use it in GitHub Desktop.
Download ZIP
Load Flare levels in melonjs
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>Iso Demo</title>
<style>
html, body {
padding:0;
margin:0;
}
#framecounter {
position: absolute;
font-size: 10px;
font-family: Courier New;
color: #fff;
text-shadow: black 0.1em 0.1em 0.1em;
}
#level_name {
position:absolute;
left: 600px;
top:0;
width:200px;
}
</style>
</head>
<body bgcolor="black">
<div id="info" style="width: 640px;">
<div id="jsapp">
<span id="framecounter">(0/0 fps)</span>
<script src="http://www.melonjs.org/build/melonJS-0.9.4-min.js"></script>
<select id="level_name" onchange="jsApp.changelevel()"></select>
<script>
var g_ressources= [
{name: "tiled_collision", type: "image", src: "data/tiled_collision.png"},
{name: "set_rules", type: "image", src: "data/set_rules.png"},
{name: "tiled_cave", type: "image", src: "data/tiled_cave.png"},
{name: "tiled_dungeon", type: "image", src: "data/tiled_dungeon.png"},
{name: "isometric_grass_and_water", type: "image", src: "data/isometric_grass_and_water.png"},
{name: "perspective_walls", type: "image", src: "data/perspective_walls.png"},
{name: "door_right", type: "image", src: "data/door_right.png"},
{name: "door_left", type: "image", src: "data/door_left.png"},
{name: "stairs", type: "image", src: "data/stairs.png"},
{name: "tiled_dungeon_2x2", type: "image", src: "data/tiled_dungeon_2x2.png"},
{name: "isometric", type: "tmx", src: "data/isometric_grass_and_water.tmx"},
{name: "cave_level1", type: "tmx", src: "data/cave_level1.tmx"},
{name: "averguard_complex", type: "tmx", src: "data/averguard_complex.tmx"},
{name: "perspective", type: "tmx", src: "data/perspective_walls.tmx"},
{name: "goblin_warrens", type: "tmx", src: "data/goblin_warrens.tmx"}
];
var jsApp = {
onload: function(){
if (!me.video.init('jsapp', 800, 600)){
alert("Sorry but your browser does not support html 5 canvas. Please try with another one!");
return;
}
var sel = "";
g_ressources.forEach(function(r){
if (r.type == 'tmx'){
sel += '<option value='+r.name+'>'+r.name+'</option>';
}
});
document.getElementById("level_name").innerHTML = sel;
me.loader.onload = this.loaded.bind(this);
me.loader.preload(g_ressources);
me.state.change(me.state.LOADING);
},
loaded: function (){
me.state.set(me.state.PLAY, this);
me.input.bindKey(me.input.KEY.LEFT, "left");
me.input.bindKey(me.input.KEY.RIGHT, "right");
me.input.bindKey(me.input.KEY.UP, "up");
me.input.bindKey(me.input.KEY.DOWN, "down");
me.state.change(me.state.PLAY);
},
reset: function(){
me.game.reset();
me.levelDirector.loadLevel(document.getElementById("level_name").value);
me.game.viewport.move(me.game.currentLevel.realwidth/2,me.game.currentLevel.realheight/2);
},
onUpdateFrame: function(){
if (me.input.isKeyPressed('left')){
me.game.viewport.move(-(me.game.currentLevel.tilewidth/2),0);
me.game.repaint();
}else if (me.input.isKeyPressed('right')){
me.game.viewport.move(me.game.currentLevel.tilewidth/2,0);
me.game.repaint();
}
if (me.input.isKeyPressed('up')){
me.game.viewport.move(0,-(me.game.currentLevel.tileheight/2));
me.game.repaint();
}else if (me.input.isKeyPressed('down')){
me.game.viewport.move(0,me.game.currentLevel.tileheight/2);
me.game.repaint();
}
me.game.update();
me.game.draw();
},
changelevel: function(){
me.game.reset();
me.levelDirector.loadLevel(document.getElementById("level_name").value);
me.game.add(new me.ColorLayer("background", "#000000", -1));
me.game.sort();
me.game.viewport.move(me.game.currentLevel.realwidth/2,me.game.currentLevel.realheight/2);
}
};
window.onReady(function(){ jsApp.onload(); });
</script>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment