map loading and drawing, adapt canvas size to window

diff --git a/engine.js b/engine.js
index c1b7a9d454b19e610bc9edf172480ff01a3efbc8..9f8c25be7feda403ea5e3212a05b57728b464e4e 100644 (file)
--- a/engine.js
+++ b/engine.js
@@ -52,6 +52,12 @@ function Textfile(txtfile) {
     case /^duration=[0-9]+s$/.test(line):
       ref["duration"] = line.split(/=|s$/)[1] * 1000;
       break;
+    case /^[^#].*=[0-9]+$/.test(line):
+      key = line.split(/[=]/)[0];  value = line.split(/=/).slice(1) * 1;
+      if                     (!ref[key]) ref[key] = value;
+      else if (!Array.isArray(ref[key])) ref[key] = [ref[key],value];
+      else if ( Array.isArray(ref[key])) ref[key].push(value);
+      break;
     case /^[^#].*=.+$/.test(line):
       key = line.split(/[=]/)[0];  value = line.split(/=/).slice(1).join("=");
       if                     (!ref[key]) ref[key] = value;
@@ -61,16 +67,54 @@ function Textfile(txtfile) {
   }
 }
 
-function Map() {
-  this.tileset = new Textfile("/tilesetdefs/tileset_grassland.txt");
+function Map(textdef) {
   this.frametime = performance.now();
+  if  (gamedata[textdef])  this.info = gamedata[textdef];
+  else gamedata[textdef] = this.info = new Textfile(textdef);
+  if  (gamedata[this.info.header.tileset])  this.tileset = gamedata[this.info.header.tileset];
+  else gamedata[this.info.header.tileset] = this.tileset = new Textfile(this.info.header.tileset);
   if (! gfx[this.tileset.img]) {
     gfx[this.tileset.img] = document.createElement("img");
     gfx[this.tileset.img].setAttribute("src", this.tileset.img);
   }
 
+  this.tileAt = function(x, y) {
+    nx = y / this.info.header.tileheight + x / this.info.header.tilewidth |0;
+    ny = y / this.info.header.tileheight - x / this.info.header.tilewidth |0;
+    return ny * this.info.header.width + nx;
+  }
+
+  this.draw = function(posx, posy, mobs) {
+    var x, y, i, layer;
+    var  h = this.info.header.height;
+    var  w = this.info.header.width;
+    var th = this.info.header.tileheight;
+    var tw = this.info.header.tilewidth;
+
+    posx = canvas.canvas.width  / 2 - posx + w * tw / 2;
+    posy = canvas.canvas.height / 2 - posy;
+
+    canvas.fillStyle = "rgba("+this.info.header.background_color+")";
+    canvas.fillRect(0,0, canvas.canvas.width, canvas.canvas.height);
+
+    [ this.info.layer[0].data, this.info.layer[1].data ].forEach(layer => {
+    for (y = 0; y < 2 * h - 1; y++ )
+      if ( y < h ) for ( x = 0; x <= y; x++ ){
+        i = (y - x) * w + x;
+        if (layer[i]) this.draw_tile( layer[i],
+                                          posx - (y / 2 - x) * tw,
+                                          posy + y / 2 * th);
+      }       else for ( x = 0; x < 2 * h - y - 1; x++ ){
+        i = (w - x - 2) * h + x + y + 1;
+        if (layer[i]) this.draw_tile( layer[i],
+                                          posx - (h - 1 - x - y / 2) * tw,
+                                          posy + y / 2 * th);
+      }
+    })
+  }
+
   this.draw_tile = function(tile, x, y) {
-    t = this.tileset.tile[tile]
+    t = this.tileset.tile[tile], x = x|0, y = y|0;
 
     if (this.tileset.animation[tile]) {
       f = this.tileset.animation[tile];
@@ -202,9 +246,20 @@ function Hero(gender = "female", hair = "short"){
   this.swing  = function() { this.animate("swing" ); return this; };
 }
 
-canvas = document.getElementById("view").getContext("2d");
-player = new Hero().place(240, 160).direct(5);
-map = new Map();
+document.querySelector("body").setAttribute("style", "margin: 0; padding: 0;");
+canvas = document.createElement("canvas").getContext("2d");
+canvas.canvas.setAttribute("style", "display: block; border: 0; margin: 0; padding: 0;");
+document.querySelector("body").appendChild(canvas.canvas);
+
+canvas.canvas.width  = window.innerWidth;
+canvas.canvas.height = window.innerHeight;
+window.addEventListener("resize", function(){
+  canvas.canvas.width  = window.innerWidth;
+  canvas.canvas.height = window.innerHeight;
+});
+
+player = new Hero().place(20 * 64 , 20 * 32).direct(5);
+map = new Map("/maps/arrival.txt");
 
-setInterval( function() { canvas.clearRect(0,0, 480, 320); map.draw_tile(265, 240, 160); player.draw(); }, 33.33);
+setInterval (function() { map.draw(player.position[0], player.position[1], [player]) }, 33.33 );
 

diff --git a/index.cgi b/index.cgi
index 4a594e6295d913c37f01d4b5d996aca3bea5b758..cd7cd552122dccf657cf60a2872ab82603b21f75 100755 (executable)
--- a/index.cgi
+++ b/index.cgi
@@ -12,7 +12,6 @@ if [ "$_PATH" = / ]; then
        <html><head>
          <title>FlareJS</title>
        </head><body>
-         <canvas id="view" width=480 height=320 style="border: 1px solid red;"></canvas>
          <script type="text/javascript" src="/engine.js"></script>
        </body></html>
        EOF