git.plutz.net Git - isotilejs/blob - index.html

   1 <!DOCTYPE HTML>
   2 <html><head>
   3   <title>Tilerender</title>
   4   <meta charset="utf8">
   5 </head><body onload="script()" style="width: 100%; max-height: 600px; overflow: hidden; padding: 0 auto;" >
   6   <canvas id="view" width="1280" height="600" style="padding: 0 auto; max-height: 600px;">
   7     Canvas not supported<br/>
   8     <img id="maptiles" src="tileset.png" width="64" style="overflow: hidden;"  />
   9     <img id="character" src="character.png" speed="4"/>
  10     <div id="map" columns="18" rows="36">
  11       5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5,
  12       5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5,
  13       5, 1, 1, 4, 4, 4, 4, 4, 4, 4, 2, 2, 2, 2, 2, 2, 2, 5,
  14       5,  1, 1, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2,5,
  15       5, 1, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 5,
  16       5,  2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2,5,
  17       5, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 5,
  18       5,  2, 2, 2, 2, 2, 2, 4, 2, 2, 2, 2, 2, 2, 2, 2, 2,5,
  19       5, 2, 2, 2, 2, 1, 2, 4, 2, 2, 2, 2, 2, 2, 2, 2, 2, 5,
  20       5,  2, 2, 2, 1, 1, 4, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2,5,
  21       5, 2, 2, 2, 1, 4, 4, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 5,
  22       5,  2, 2, 1, 4, 4, 1, 2, 2, 2, 2, 2, 2, 4, 2, 2, 2,5,
  23       5, 2, 2, 2, 1, 4, 1, 2, 2, 2, 4, 2, 2, 4, 4, 2, 2, 5,
  24       5,  2, 2, 2, 1, 1, 2, 2, 2, 2, 4, 2, 4, 3, 4, 2, 2,5,
  25       5, 2, 2, 2, 2, 1, 1, 2, 2, 2, 2, 4, 4, 3, 3, 4, 2, 5,
  26       5,  2, 2, 2, 2, 2, 1, 2, 2, 2, 2, 4, 3, 3, 3, 4, 2,5,
  27       5, 2, 2, 2, 2, 2, 2, 1, 2, 2, 2, 3, 4, 3, 3, 3, 4, 5,
  28       5,  2, 2, 2, 2, 2, 2, 1, 2, 2, 3, 3, 3, 3, 3, 4, 2,5,
  29       5, 2, 2, 2, 2, 2, 2, 2, 1, 2, 2, 3, 3, 4, 3, 4, 2, 5,
  30       5,  2, 2, 2, 2, 2, 2, 2, 1, 2, 2, 3, 3, 4, 4, 2, 2,5,
  31       5, 2, 2, 2, 2, 2, 2, 2, 2, 1, 2, 1, 3, 3, 4, 2, 2, 5,
  32       5,  2, 2, 2, 2, 2, 2, 2, 2, 1, 1, 2, 3, 3, 2, 2, 2,5,
  33       5, 2, 2, 2, 2, 2, 2, 2, 2, 2, 1, 2, 1, 3, 2, 2, 2, 5,
  34       5,  2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 1, 1, 1, 2, 2, 2,5,
  35       5, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 1, 1, 1, 1, 2, 2, 5,
  36       5,  2, 2, 4, 2, 2, 2, 2, 2, 2, 2, 1, 1, 1, 1, 2, 2,5,
  37       5, 2, 2, 4, 4, 2, 2, 2, 2, 2, 2, 2, 1, 1, 1, 2, 2, 5,
  38       5,  2, 4, 4, 4, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2,5,
  39       5, 2, 4, 4, 4, 4, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 5,
  40       5,  2, 4, 4, 4, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2,5,
  41       5, 2, 2, 4, 4, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 5,
  42       5,  2, 2, 4, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2,5,
  43       5, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 5,
  44       5,  2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2,5,
  45       5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5,
  46       5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5,
  47
  48       0, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5,  0,
  49       0, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5,  0,
  50       0, 0, 0, 2, 2, 2, 2, 2, 2, 2, 0, 0, 0, 0, 0, 0, 0,  0,
  51       0,  0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
  52       0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,  0,
  53       0,  0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
  54       0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,  0,
  55       0,  0, 0, 0, 0, 0, 0, 4, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
  56       0, 0, 0, 0, 0, 0, 0, 4, 0, 0, 0, 0, 0, 0, 0, 0, 0,  0,
  57       0,  0, 0, 0, 0, 0, 4, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
  58       0, 0, 0, 0, 0, 4, 4, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,  0,
  59       0,  0, 0, 0, 4, 4, 0, 0, 0, 0, 0, 0, 0, 4, 0, 0, 0, 0,
  60       0, 0, 0, 0, 0, 3, 0, 0, 0, 0, 4, 0, 0, 4, 4, 0, 0,  0,
  61       0,  0, 0, 0, 0, 0, 0, 0, 0, 0, 4, 0, 4, 0, 4, 0, 0, 0,
  62       0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 4, 4, 0, 0, 4, 0,  0,
  63       0,  0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 4, 0, 0, 0, 4, 0, 0,
  64       0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 4, 0, 0, 0, 4,  0,
  65       0,  0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 4, 0, 0,
  66       0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 4, 0, 4, 0,  0,
  67       0,  0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
  68       0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,  0,
  69       0,  0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
  70       0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,  0,
  71       0,  0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
  72       0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,  0,
  73       0,  0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
  74       0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,  0,
  75       0,  0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
  76       0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,  0,
  77       0,  0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
  78       0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,  0,
  79       0,  0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
  80       0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,  0,
  81       0,  0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,  0,
  82       0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
  83       0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0
  84     </div>
  85   </canvas>
  86 </body><script>
  87 view = document.getElementById("view");
  88 canvas = document.getElementById("view").getContext("2d");
  89
  90 map = {
  91   rows: document.getElementById("map").getAttribute("rows") * 1 || 1,
  92   cols: document.getElementById("map").getAttribute("columns") * 1 || 1,
  93   data: document.getElementById("map").textContent.split(',') || [],
  94   tiles: document.getElementById("maptiles"),
  95
  96   tw: 32, th: 16, sw: 16, sh: 8,
  97   offset_x: 0, offset_y: 0,
  98
  99   init: function(){
 100     this.tw = this.tiles.getAttribute("width") * 1 || 32;
 101     this.th = this.tiles.getAttribute("height") * 1 || this.tw / 2;
 102     this.sw = this.tw / 2;
 103     this.sh = this.th / 2;
 104   },
 105
 106   tile_at: function(x, y) {
 107     var my = (y / this.sh |0);
 108     var mx = (x / this.sw |0);
 109
 110     switch(((my % 2) << 1) + mx % 2) {
 111       case 0: my += o = (y % this.sh * 2 > this.sw - x % this.sw);              break;
 112       case 1: my += o = (y % this.sh * 2 >           x % this.sw); mx -= o;     break;
 113       case 2: my += o = (y % this.sh * 2 >           x % this.sw);              break;
 114       case 3: my += o = (y % this.sh * 2 > this.sw - x % this.sw); mx += o - 1; break;
 115     }
 116     mx -= x / this.tw |0;
 117
 118     return this.cols * my + mx;
 119   },
 120
 121   draw: function(){
 122     var py = this.tile_at(player.x, player.y) / this.cols |0;
 123     var px = this.tile_at(player.x, player.y) % this.cols;
 124     var x, y, z, n, tile;
 125
 126     for (y = 0; y < this.rows; ++y) {
 127       for (z = 0; z < this.data.length / (this.rows * this.cols); ++z)
 128       for (x = 0; x < this.cols; ++x) {
 129         n = x + y * map.cols + z * map.rows * map.cols;
 130         tile = ( n == ptr ) ? 5 : this.data[n];
 131         canvas.globalAlpha = ( y > py &&
 132                                z > player.z &&
 133                                y < py + 6 &&
 134                                x > px - 2 &&
 135                                x < px + 2
 136                              ) ? .25 : 1;
 137
 138         canvas.drawImage( this.tiles,
 139                           this.tw * tile, 2 * this.th * ((frame / 16 |0) % 8),
 140                           this.tw, 2 * this.th,
 141                           x * this.tw + y % 2 * this.sw - this.sw - this.offset_x,
 142                           y * this.sh - z * this.th - 3 * this.sh - this.offset_y,
 143                           this.tw, 2 * this.th
 144                         );
 145       }
 146       if (py == y) player.draw();
 147     }
 148   }
 149 }
 150
 151 player = {
 152   frame: 0, d: 's',
 153   x: 40, y: 40, z: 0,
 154   sprite: document.getElementById("character"),
 155
 156   init: function(){
 157     this.w = this.sprite.getAttribute("width")  * 1 || map.tw || 32;
 158     this.h = this.sprite.getAttribute("height") * 1 || map.sh * 6 || this.w * 1.5;
 159     this.o = this.sprite.getAttribute("offset") * 1 || map.sh || this.w / 4;
 160     this.speed = this.sprite.getAttribute("speed") * 1|| this.w / 16;
 161     map.offset_x = this.x - view.clientWidth / 2 |0;
 162     map.offset_y = this.y - view.clientHeight / 2 |0;
 163   },
 164
 165   move: function(){
 166     var dx = 0, dy = 0;
 167
 168     switch(this.d){
 169       case  'n': dy = -this.speed; break;
 170       case  's': dy =  this.speed; break;
 171       case  'w': dx = -this.speed; break;
 172       case  'e': dx =  this.speed; break;
 173       case 'nw': dy = -.45 * this.speed; dx = -.9 * this.speed; break;
 174       case 'ne': dy = -.45 * this.speed; dx =  .9 * this.speed; break;
 175       case 'sw': dy =  .45 * this.speed; dx = -.9 * this.speed; break;
 176       case 'se': dy =  .45 * this.speed; dx =  .9 * this.speed; break;
 177     }
 178
 179     if (map.data[map.tile_at(this.x + dx, this.y + dy)] != 4) {
 180       this.x += dx; this.y += dy;
 181     }
 182
 183     this.frame += this.frame < 255 ? 1 : -127;
 184
 185     map.offset_x = this.x - view.clientWidth / 2 |0;
 186     map.offset_y = this.y - view.clientHeight / 2 |0;
 187   },
 188
 189
 190   draw: function(){
 191     var face = 0, state = 0;
 192
 193     switch (this.d){
 194       case  's': face = 0; break;
 195       case 'sw': face = 1; break;
 196       case  'w': face = 2; break;
 197       case 'nw': face = 3; break;
 198       case  'n': face = 4; break;
 199       case 'ne': face = 5; break;
 200       case  'e': face = 6; break;
 201       case 'se': face = 7; break;
 202     }
 203
 204     state =
 205       (this.frame > 11) ? frame / 16 % 2 |0 :
 206       (this.frame < 12) ? this.frame / 3 + 2 |0 :
 207       0;
 208
 209     canvas.drawImage( this.sprite, this.w * face, this.h * state,
 210                       this.w, this.h,
 211                       this.x - this.w / 2 - map.offset_x,
 212                       this.y - this.z * map.th - this.h + this.o - map.offset_y,
 213                       this.w, this.h );
 214
 215   }
 216 };
 217
 218 frame = 0;
 219 move = true;
 220 keys = [];
 221 ptr = 0;
 222
 223 function get_input(){
 224   d = '';
 225   if ( keys[87] || keys[38] ) d  = 'n';
 226   if ( keys[83] || keys[40] ) d  = 's';
 227   if ( keys[65] || keys[37] ) d += 'w';
 228   if ( keys[68] || keys[39] ) d += 'e';
 229
 230   if ( d == '' ) player.frame = 12
 231   else {
 232     player.d = d;
 233     if ( player.frame > 11 ) player.frame = 0;
 234     player.move();
 235   }
 236 }
 237
 238 function script(){
 239   map.init();
 240   player.init();
 241
 242   setInterval(function(){
 243     get_input();
 244     map.draw();
 245     frame += frame < 255 ? 1 : -255;
 246   }, 33)
 247
 248   window.addEventListener('keydown', function(x){ keys[x.keyCode] = true; }, false );
 249   window.addEventListener('keyup',   function(x){ keys[x.keyCode] = false;}, false );
 250
 251   window.addEventListener('mousemove', function(e){
 252     px = view.width  * (e.clientX - view.offsetLeft) / view.clientWidth |0;
 253     py = view.height * (e.clientY - view.offsetTop) / view.clientHeight |0;
 254
 255     ptr = map.tile_at(px + map.offset_x, py + map.offset_y);
 256   })
 257 }
 258 </script></html>