From 39063b246f770d8f615f2c9bf62b1dd4ad72f5d5 Mon Sep 17 00:00:00 2001 From: paul Date: Fri, 14 Apr 2017 23:03:32 +0000 Subject: [PATCH] added tile properties, elevation and falling svn path=/trunk/; revision=10 --- index.html | 78 +++++++++++++++++++++++++++++++++++++++++++++--------- 1 file changed, 65 insertions(+), 13 deletions(-) diff --git a/index.html b/index.html index 76bd4b2..ea0f3df 100644 --- a/index.html +++ b/index.html @@ -1,4 +1,4 @@ - + Tilerender @@ -6,6 +6,11 @@ Canvas not supported
+ + + + +
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) -- 2.39.2