3 <title>Tilerender</title>
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,
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
87 view = document.getElementById("view");
88 canvas = document.getElementById("view").getContext("2d");
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"),
96 tw: 32, th: 16, sw: 16, sh: 8,
97 offset_x: 0, offset_y: 0,
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;
106 tile_at: function(x, y) {
107 var my = (y / this.sh |0);
108 var mx = (x / this.sw |0);
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;
116 mx -= x / this.tw |0;
118 return this.cols * my + mx;
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;
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 &&
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,
146 if (py == y) player.draw();
154 sprite: document.getElementById("character"),
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;
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;
179 if (map.data[map.tile_at(this.x + dx, this.y + dy)] != 4) {
180 this.x += dx; this.y += dy;
183 this.frame += this.frame < 255 ? 1 : -127;
185 map.offset_x = this.x - view.clientWidth / 2 |0;
186 map.offset_y = this.y - view.clientHeight / 2 |0;
191 var face = 0, state = 0;
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;
205 (this.frame > 11) ? frame / 16 % 2 |0 :
206 (this.frame < 12) ? this.frame / 3 + 2 |0 :
209 canvas.drawImage( this.sprite, this.w * face, this.h * state,
211 this.x - this.w / 2 - map.offset_x,
212 this.y - this.z * map.th - this.h + this.o - map.offset_y,
223 function get_input(){
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';
230 if ( d == '' ) player.frame = 12
233 if ( player.frame > 11 ) player.frame = 0;
242 setInterval(function(){
245 frame += frame < 255 ? 1 : -255;
248 window.addEventListener('keydown', function(x){ keys[x.keyCode] = true; }, false );
249 window.addEventListener('keyup', function(x){ keys[x.keyCode] = false;}, false );
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;
255 ptr = map.tile_at(px + map.offset_x, py + map.offset_y);