konsumer · October 26, 2012 11:01
diff --git a/iso.htm b/iso.htm
 <!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: "cave_level1", type: "tmx", src: "data/cave_level1.tmx"},
            {name: "averguard_complex", type: "tmx", src: "data/averguard_complex.tmx"},
            {name: "isometric", type: "tmx", src: "data/isometric_grass_and_water.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.viewport.move(me.game.currentLevel.realwidth/2,me.game.currentLevel.realheight/2);
            }

          };

          window.onReady(function(){ jsApp.onload(); });

        </script>

      </div>
    </div>
  </body>
 </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: "cave_level1", type: "tmx", src: "data/cave_level1.tmx"},
	{name: "averguard_complex", type: "tmx", src: "data/averguard_complex.tmx"},
	{name: "isometric", type: "tmx", src: "data/isometric_grass_and_water.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.viewport.move(me.game.currentLevel.realwidth/2,me.game.currentLevel.realheight/2);
	}

	};

	window.onReady(function(){ jsApp.onload(); });

	</script>

	</div>
	</div>
	</body>
	</html>