<tile position="3" elevation=".125"></tile>
<tile position="4" blocking="yes"></tile>
</tiles>
- <img id="character" src="character.png" speed="2.75"/>
+ <img id="character" src="character.png" speed="4"/>
<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,
5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5,
</div>
</canvas>
</body><script>
+var gravity = 9.81, fps = 30;
view = document.getElementById("view");
canvas = document.getElementById("view").getContext("2d");
this.sw = this.tw / 2;
this.sh = this.th / 2;
+ this.gravity = gravity / fps / Math.sqrt(this.sw * this.sw + this.sh * this.sh) * this.sh;
+
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
- }
+ 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) {
+ tile_at: function(x, y, z) {
var my = (y / this.sh |0);
var mx = (x / this.sw |0);
}
mx -= x / this.tw |0;
- return this.cols * my + mx;
+ return this.cols * my + mx + (z |0) * this.rows * 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;
+ var x, y, z, n, tile, props;
for (y = 0; y < this.rows; ++y) {
for (z = 0; z < this.data.length / (this.rows * this.cols); ++z)
for (x = 0; x < this.cols; ++x) {
n = x + y * map.cols + z * map.rows * map.cols;
+ props = this.props_of(n);
tile = ( n == ptr ) ? 5 : this.data[n];
canvas.globalAlpha = ( y > py &&
- (z > player.z || z == (player.z |0) && this.props_of(n).blocking) &&
+ (z > player.z || z == (player.z |0) && props.blocking) &&
y < py + 6 &&
x > px - 2 &&
x < px + 2
) ? .25 : 1;
canvas.drawImage( this.tiles,
- this.tw * tile, 2 * this.th * ((frame / 16 |0) % 8),
+ this.tw * tile, 2 * this.th * ((frame / 16 |0) % 8) * props.animated,
this.tw, 2 * this.th,
x * this.tw + y % 2 * this.sw - this.sw - this.offset_x,
y * this.sh - z * this.th - 3 * this.sh - this.offset_y,
this.w = this.sprite.getAttribute("width") * 1 || map.tw || 32;
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;
+ this.ospeed = this.speed = this.sprite.getAttribute("speed") * 1|| this.w / 16;
+ this.n = map.tile_at(this.x, this.y, this.z);
map.offset_x = this.x - view.clientWidth / 2 |0;
map.offset_y = this.y - view.clientHeight / 2 |0;
},
- move: function(){
+ move: function(){ // player.move
var dx = 0, dy = 0;
switch(this.d){
dy *= .625;
}
- var n = map.tile_at(this.x + dx, this.y + dy) + this.z * map.rows * map.cols;
+ var n = map.tile_at(this.x + dx, this.y + dy, this.z);
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; }
+ !map.data[n + map.rows * map.cols]
+ ){ this.x += dx; this.y += dy; this.n = n;}
this.frame += this.frame < 255 ? 1 : -127;
map.offset_x = this.x - view.clientWidth / 2 |0;
map.offset_y = this.y - view.clientHeight / 2 |0;
- },
+ }, // end player.move
+ zspeed: 0,
fall: function(){
- if (!this.fallspeed) this.fallspeed = 0;
- if (!this.falloff) this.falloff = 0;
+ var zbase = (this.n / (map.rows * map.cols) |0) + map.props_of(this.n).elevation;
- 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;
+ this.z += this.zspeed -= map.gravity;
- 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;
+ if (this.z > zbase) {
+ this.speed = this.ospeed * 2;
+ } else if (!map.data[this.n] && !map.props_of(this.n - map.rows * map.cols).blocking) {
this.n -= map.rows * map.cols;
+ } else {
+ this.speed = this.ospeed;
+ this.zspeed = 0;
+ this.z = zbase;
}
- },
+
+ }, // end player.fall
draw: function(){ // player.draw
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 |0) * map.th - this.h + this.o - map.offset_y - map.props_of(this.n).elevation * map.th - this.falloff * map.th,
+ this.y - this.z * map.th - this.h + this.o - map.offset_y,
this.w, this.h );
} // end player.draw
if ( player.frame > 11 ) player.frame = 0;
player.move();
}
+
+ // jump
+ if (keys[32] && player.zspeed == 0) {player.zspeed += .75; player.z +=.0001;}
}
function script(){
player.fall();
map.draw();
frame += frame < 255 ? 1 : -255;
- }, 33)
+ }, 1000 / fps);
window.addEventListener('keydown', function(x){ keys[x.keyCode] = true; }, false );
window.addEventListener('keyup', function(x){ keys[x.keyCode] = false;}, false );
px = view.width * (e.clientX - view.offsetLeft) / view.clientWidth |0;
py = view.height * (e.clientY - view.offsetTop) / view.clientHeight |0;
- ptr = map.tile_at(px + map.offset_x, py + map.offset_y);
+ ptr = map.tile_at(px + map.offset_x, py + map.offset_y, 0);
})
}
</script></html>
projects / isotilejs / commitdiff