added tile properties, elevation and falling
authorpaul <paul@plutz.net>
Fri, 14 Apr 2017 23:03:32 +0000 (23:03 +0000)
committerpaul <paul@plutz.net>
Fri, 14 Apr 2017 23:03:32 +0000 (23:03 +0000)
svn path=/trunk/; revision=10

index.html

index 76bd4b2..ea0f3df 100644 (file)
@@ -1,4 +1,4 @@
-<!DOCTYPE HTML>
+<!DOCTYPE XHTML>
 <html><head>
   <title>Tilerender</title>
   <meta charset="utf8">
@@ -6,6 +6,11 @@
   <canvas id="view" width="1280" height="600" style="padding: 0 auto; max-height: 600px;">
     Canvas not supported<br/>
     <img id="maptiles" src="tileset.png" width="64" style="overflow: hidden;"  />
+    <tiles>
+      <tile position="2" animated="1"></tile>
+      <tile position="3" elevation=".125"></tile>
+      <tile position="4" blocking="yes"></tile>
+    </tiles>
     <img id="character" src="character.png" speed="2.75"/>
     <div id="map" columns="18" rows="36">
       5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5,
@@ -93,6 +98,8 @@ map = {
   data: document.getElementById("map").textContent.split(',') || [],
   tiles: document.getElementById("maptiles"),
 
+  default_props: {animated: false, elevation: 0, blocking: false},
+  tileprops: [],
   tw: 32, th: 16, sw: 16, sh: 8,
   offset_x: 0, offset_y: 0,
 
@@ -101,8 +108,25 @@ map = {
     this.th = this.tiles.getAttribute("height") * 1 || this.tw / 2;
     this.sw = this.tw / 2;
     this.sh = this.th / 2;
+
+    var prop, i;
+
+    for (i in this.data) this.data[i] = this.data[i] * 1 || 0; // make numeric
+
+    for (prop of document.querySelectorAll("tiles > tile")) {
+      i = prop.getAttribute("position") * 1;
+      if (i) {
+        this.tileprops[i] = {
+          animated:  prop.getAttribute("animated")      || this.default_props.animated,
+          elevation: prop.getAttribute("elevation") * 1 || this.default_props.elevation,
+          blocking:  prop.getAttribute("blocking")      || this.default_props.blocking
+        }
+      }
+    }
   },
 
+  props_of: function(n) { return this.tileprops[this.data[n]] || this.default_props; },
+
   tile_at: function(x, y) {
     var my = (y / this.sh |0);
     var mx = (x / this.sw |0);
@@ -118,9 +142,9 @@ map = {
     return this.cols * my + mx;
   },
 
-  draw: function(){
-    var py = this.tile_at(player.x, player.y) / this.cols |0;
-    var px = this.tile_at(player.x, player.y) % this.cols;
+  draw: function(){ // map.draw
+    var py = player.n / this.cols % this.rows |0;
+    var px = player.n % this.cols;
     var x, y, z, n, tile;
   
     for (y = 0; y < this.rows; ++y) {
@@ -129,7 +153,7 @@ map = {
         n = x + y * map.cols + z * map.rows * map.cols;
         tile = ( n == ptr ) ? 5 : this.data[n];
         canvas.globalAlpha = ( y > py &&
-                               z > player.z &&
+                               (z > player.z || z == (player.z |0) && this.props_of(n).blocking) &&
                                y < py + 6 &&
                                x > px - 2 &&
                                x < px + 2
@@ -145,8 +169,8 @@ map = {
       }
       if (py == y) player.draw();
     }
-  }
-}
+  } // end map.draw
+} // end map
 
 player = {
   frame: 0, d: 's',
@@ -158,6 +182,7 @@ player = {
     this.h = this.sprite.getAttribute("height") * 1 || map.sh * 6 || this.w * 1.5;
     this.o = this.sprite.getAttribute("offset") * 1 || map.sh || this.w / 4;
     this.speed = this.sprite.getAttribute("speed") * 1|| this.w / 16;
+    this.n = map.tile_at(this.x, this.y) + this.z * map.rows * map.cols || 0;
     map.offset_x = this.x - view.clientWidth / 2 |0;
     map.offset_y = this.y - view.clientHeight / 2 |0;
   },
@@ -184,9 +209,13 @@ player = {
       dy *= .625;
     }
   
-    if (map.data[map.tile_at(this.x + dx, this.y + dy)] != 4) {
-      this.x += dx; this.y += dy;
-    }
+    var n = map.tile_at(this.x + dx, this.y + dy) + this.z * map.rows * map.cols;
+    if (!map.props_of(n).blocking &&
+        !map.props_of(n + map.rows * map.cols).blocking
+       ) { this.x += dx; this.y += dy; this.n = n; }
+    else if (!map.props_of(n + map.rows * map.cols).blocking &&
+             !map.props_of(n + 2 * map.rows * map.cols).blocking
+       ) { this.x += dx; this.y += dy; this.z += 1; this.n = n + map.rows * map.cols; }
   
     this.frame += this.frame < 255 ? 1 : -127;
 
@@ -194,8 +223,30 @@ player = {
     map.offset_y = this.y - view.clientHeight / 2 |0;
   },
 
+  fall: function(){
+    if (!this.fallspeed) this.fallspeed = 0;
+    if (!this.falloff) this.falloff = 0;
+
+    if(this.falloff > 0 ||
+       !map.data[this.n] &&
+       !map.props_of(this.n - map.cols * map.rows).blocking
+      ) this.fallspeed += 1.81 * .03;
+    else this.fallspeed = 0;
 
-  draw: function(){
+    this.falloff -= this.fallspeed;
+    if (this.falloff < 0 &&
+        (map.data[this.n] ||
+         map.props_of(this.n - map.cols * map.rows).blocking)) {
+      this.fallspeed = this.falloff = 0;
+    } else if (this.falloff < 0) {
+      this.falloff += 1;
+      this.z -= 1;
+      this.n -= map.rows * map.cols;
+    }
+  },
+
+
+  draw: function(){ // player.draw
     var face = 0, state = 0;
   
     switch (this.d){
@@ -217,10 +268,10 @@ player = {
     canvas.drawImage( this.sprite, this.w * face, this.h * state,
                       this.w, this.h,
                       this.x - this.w / 2 - map.offset_x,
-                      this.y - this.z * map.th - this.h + this.o - map.offset_y,
+                      this.y - (this.z |0) * map.th - this.h + this.o - map.offset_y - map.props_of(this.n).elevation * map.th - this.falloff * map.th,
                       this.w, this.h );
    
-  }
+  } // end player.draw
 };
 
 frame = 0;
@@ -249,6 +300,7 @@ function script(){
 
   setInterval(function(){
     get_input();
+    player.fall();
     map.draw();
     frame += frame < 255 ? 1 : -255;
   }, 33)