hacktoon/2d-tiled-scroller.html

## 2d-tiled-scroller.html

<!DOCTYPE html>
<html>
<head>
    <title>Plataforma</title>
    <style>
        #scene, #hero {
            position: absolute;
        }
        #scene {
            top: 0;
            left: 0;
            z-index: 1;
        }
        #hero {
            z-index: 2;
        }
    </style>
</head>

<body>
<canvas id="scene"></canvas>
<canvas id="hero"></canvas>
<script>
    var scene_canvas = document.getElementById("scene");
    var scene_ctx = scene_canvas.getContext("2d");

    var hero_canvas = document.getElementById("hero");
    var hero_ctx = hero_canvas.getContext("2d");

    var KEY_SPACE = 32;
    var KEY_LEFT = 37;
    var KEY_RIGHT = 39;
    var KEY_UP = 38;
    var KEY_DOWN = 40;

    var TILE_BLOCKED = 1;

    var grid = [
        [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
        [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
        [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
        [1, 1, 0, 0, 0, 0, 0, 0, 1, 1, 1, 0, 1, 0, 0, 0, 1],
        [1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
        [1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
        [1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 1],
        [1, 1, 1, 0, 0, 0, 0, 0, 0, 1, 1, 1, 0, 0, 1, 1, 1],
        [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1]
    ];

    var tilesize = 50;

    var grid_cols = grid[0].length;
    var grid_rows = grid.length;

    scene_canvas.width = grid_cols * tilesize;
    scene_canvas.height = grid_rows * tilesize;

    var hero = {
        x: 200, y: 165,
        width: 60, height: 70,
        xspeed: 7, yspeed: 20,
        dirx: 0, diry: 1,
        moving: false, jumping: false
    };
    hero_canvas.width = hero.width;
    hero_canvas.height = hero.height;
    hero_canvas.style.left = hero.x + "px";
    hero_canvas.style.top = hero.y + "px";

    var GRAVITY = 20;
    var jump_speed = 0;
    var jumpcount = false; //avoids repeated jumps

    document.onkeydown = function(evt)
    {
        if(evt.keyCode == KEY_LEFT){
            hero.moving = true;
            hero.dirx = -1;
        }
        if(evt.keyCode == KEY_RIGHT){
            hero.moving = true;
            hero.dirx = 1;
        }
        if(evt.keyCode == KEY_SPACE && ! hero.jumping && !jumpcount){
            hero.jumping = true;
            hero.diry = -1;
            jump_speed = hero.yspeed;
            jumpcount = true;
        }
    };

    document.onkeyup = function(evt){
        if(evt.keyCode == KEY_LEFT || evt.keyCode == KEY_RIGHT){
            hero.moving = false;
            hero.dirx = 0;
        }

        if(evt.keyCode == KEY_SPACE){
            //enables low jumping by pressing button fast
            //at jump = 0 it will start falling
            jump_speed = 0;
            jumpcount = false;
        }
    };

    var draw_scene = function(){
        //desenha o cenario
        for(var i = 0; i < grid_rows; i++){
            for(var j = 0; j < grid_cols; j++){
                scene_ctx.beginPath();
                scene_ctx.fillStyle = "black";
                scene_ctx.strokeStyle = "black";
                if (grid[i][j] === 0){
                    scene_ctx.fillStyle = "white";
                    scene_ctx.rect(j*tilesize, i*tilesize, tilesize, tilesize);
                }
                if (grid[i][j] === TILE_BLOCKED){
                    scene_ctx.rect(j*tilesize, i*tilesize, tilesize, tilesize);
                }
                scene_ctx.fill();
                scene_ctx.stroke();
            }
        }
    };

    var draw_hero = function(){
        //desenha o personagem
        hero_canvas.style.left = hero.x + "px";
        hero_canvas.style.top = hero.y + "px";

        hero_ctx.clearRect(0, 0, hero.width, hero.height);
        hero_ctx.beginPath();
        hero_ctx.fillStyle = "blue";
        hero_ctx.rect(0, 0, hero.width, hero.height);
        hero_ctx.fill();
    };

    var hittest = function(x1, y1, w1, h1, x2, y2, w2, h2){
        var horizontal = x1 + w1 > x2 && x1 < x2 + w2;
        var vertical = y1 + h1 > y2 && y1 < y2 + h2;
        return horizontal && vertical;
    };

    //recebe um eixo fixo e uma variacao no outro eixo, verifica qual deles esta bloqueado
    var is_blocked = function(axis, tile_ref, first_tile, last_tile){
        var blocked = false;
        for(var tile_var = first_tile; tile_var <= last_tile; tile_var++){
            if(axis == "x")
                var grid_tile = grid[tile_var][tile_ref];
            else
                var grid_tile = grid[tile_ref][tile_var];

            if(grid_tile === TILE_BLOCKED){
                blocked = true;
                break;
            }
        }
        return blocked;
    }

    //returns the position in the grid
    var gridPosition = function(real_position){
        return Math.floor(real_position / tilesize);
    }

    var movement = function(){
        //Calculos da posição Y =======================================
        var dy = GRAVITY;
        var falling_decrease = 2;
        //if jumping
        if(hero.jumping){
            //if still going up
            if(jump_speed > 0){
                //update y and decrease jump speed
                dy = jump_speed * hero.diry;
                jump_speed -= falling_decrease;
            } else {
                //reached top of jumping, is falling
                hero.diry = 1;
            }
        }

        //is falling
        if(hero.diry > 0){
            var blocky = gridPosition(hero.y + hero.height + dy);
            hero.jumping = true; //prevent jumping while falling
        } else {
            //is jumping
            var blocky = gridPosition(hero.y + dy);
        }

        //X corners of hero
        var hero_xleft = gridPosition(hero.x);
        var hero_xright = gridPosition(hero.x + hero.width - 1);
        //found a blocked tile
        if(is_blocked("y", blocky, hero_xleft, hero_xright)){
            //hit floor - adjust position
            if(hero.diry > 0){
                hero.y = blocky * tilesize - hero.height;
                //disable jump while falling (enable: double jump)
                hero.jumping = false;
            }
            //collided with a roof, reset jump speed, it will start falling
            if (hero.diry < 0){
                hero.y = blocky * tilesize + tilesize;
                jump_speed = 0;
            }
        } else {
            hero.y += dy;
        }

        //Calculos da posição X =======================================
        if(! hero.moving){ return; }
        //distance moved
        var dx = hero.xspeed * hero.dirx;
        //is going right
        if(hero.dirx > 0){
            var x_axis = gridPosition(hero.x + hero.width + dx);
        }
        //is going left
        if(hero.dirx < 0){
            var x_axis = gridPosition(hero.x + dx);
        }

        //Y corners of hero
        var hero_ytop = gridPosition(hero.y);
        var hero_ybottom = gridPosition(hero.y + hero.height -1);

        //found a blocked tile
        if(is_blocked("x", x_axis, hero_ytop, hero_ybottom)){
            //adjust the hero position after being stopped by collision
            if(hero.dirx > 0){ //moving right
                hero.x = x_axis * tilesize - hero.width;
            }
            if(hero.dirx < 0){ //moving left
                hero.x = x_axis * tilesize + tilesize;
            }
        } else {
            //not blocked; continue moving
            hero.x += dx;
        }
    };

    var update = function()
    {
        movement();
        draw_hero();
    };

    draw_scene();
    setInterval(update, 24);

   </script>
   </body>
</html>

	<!DOCTYPE html>
	<html>
	<head>
	<title>Plataforma</title>
	<style>
	#scene, #hero {
	position: absolute;
	}
	#scene {
	top: 0;
	left: 0;
	z-index: 1;
	}
	#hero {
	z-index: 2;
	}
	</style>
	</head>

	<body>
	<canvas id="scene"></canvas>
	<canvas id="hero"></canvas>
	<script>
	var scene_canvas = document.getElementById("scene");
	var scene_ctx = scene_canvas.getContext("2d");

	var hero_canvas = document.getElementById("hero");
	var hero_ctx = hero_canvas.getContext("2d");

	var KEY_SPACE = 32;
	var KEY_LEFT = 37;
	var KEY_RIGHT = 39;
	var KEY_UP = 38;
	var KEY_DOWN = 40;

	var TILE_BLOCKED = 1;

	var grid = [
	[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
	[1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
	[1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
	[1, 1, 0, 0, 0, 0, 0, 0, 1, 1, 1, 0, 1, 0, 0, 0, 1],
	[1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
	[1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
	[1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 1],
	[1, 1, 1, 0, 0, 0, 0, 0, 0, 1, 1, 1, 0, 0, 1, 1, 1],
	[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1]
	];

	var tilesize = 50;

	var grid_cols = grid[0].length;
	var grid_rows = grid.length;

	scene_canvas.width = grid_cols * tilesize;
	scene_canvas.height = grid_rows * tilesize;

	var hero = {
	x: 200, y: 165,
	width: 60, height: 70,
	xspeed: 7, yspeed: 20,
	dirx: 0, diry: 1,
	moving: false, jumping: false
	};
	hero_canvas.width = hero.width;
	hero_canvas.height = hero.height;
	hero_canvas.style.left = hero.x + "px";
	hero_canvas.style.top = hero.y + "px";

	var GRAVITY = 20;
	var jump_speed = 0;
	var jumpcount = false; //avoids repeated jumps

	document.onkeydown = function(evt)
	{
	if(evt.keyCode == KEY_LEFT){
	hero.moving = true;
	hero.dirx = -1;
	}
	if(evt.keyCode == KEY_RIGHT){
	hero.moving = true;
	hero.dirx = 1;
	}
	if(evt.keyCode == KEY_SPACE && ! hero.jumping && !jumpcount){
	hero.jumping = true;
	hero.diry = -1;
	jump_speed = hero.yspeed;
	jumpcount = true;
	}
	};

	document.onkeyup = function(evt){
	if(evt.keyCode == KEY_LEFT \|\| evt.keyCode == KEY_RIGHT){
	hero.moving = false;
	hero.dirx = 0;
	}

	if(evt.keyCode == KEY_SPACE){
	//enables low jumping by pressing button fast
	//at jump = 0 it will start falling
	jump_speed = 0;
	jumpcount = false;
	}
	};

	var draw_scene = function(){
	//desenha o cenario
	for(var i = 0; i < grid_rows; i++){
	for(var j = 0; j < grid_cols; j++){
	scene_ctx.beginPath();
	scene_ctx.fillStyle = "black";
	scene_ctx.strokeStyle = "black";
	if (grid[i][j] === 0){
	scene_ctx.fillStyle = "white";
	scene_ctx.rect(jtilesize, itilesize, tilesize, tilesize);
	}
	if (grid[i][j] === TILE_BLOCKED){
	scene_ctx.rect(jtilesize, itilesize, tilesize, tilesize);
	}
	scene_ctx.fill();
	scene_ctx.stroke();
	}
	}
	};

	var draw_hero = function(){
	//desenha o personagem
	hero_canvas.style.left = hero.x + "px";
	hero_canvas.style.top = hero.y + "px";

	hero_ctx.clearRect(0, 0, hero.width, hero.height);
	hero_ctx.beginPath();
	hero_ctx.fillStyle = "blue";
	hero_ctx.rect(0, 0, hero.width, hero.height);
	hero_ctx.fill();
	};

	var hittest = function(x1, y1, w1, h1, x2, y2, w2, h2){
	var horizontal = x1 + w1 > x2 && x1 < x2 + w2;
	var vertical = y1 + h1 > y2 && y1 < y2 + h2;
	return horizontal && vertical;
	};

	//recebe um eixo fixo e uma variacao no outro eixo, verifica qual deles esta bloqueado
	var is_blocked = function(axis, tile_ref, first_tile, last_tile){
	var blocked = false;
	for(var tile_var = first_tile; tile_var <= last_tile; tile_var++){
	if(axis == "x")
	var grid_tile = grid[tile_var][tile_ref];
	else
	var grid_tile = grid[tile_ref][tile_var];

	if(grid_tile === TILE_BLOCKED){
	blocked = true;
	break;
	}
	}
	return blocked;
	}

	//returns the position in the grid
	var gridPosition = function(real_position){
	return Math.floor(real_position / tilesize);
	}

	var movement = function(){
	//Calculos da posição Y =======================================
	var dy = GRAVITY;
	var falling_decrease = 2;
	//if jumping
	if(hero.jumping){
	//if still going up
	if(jump_speed > 0){
	//update y and decrease jump speed
	dy = jump_speed * hero.diry;
	jump_speed -= falling_decrease;
	} else {
	//reached top of jumping, is falling
	hero.diry = 1;
	}
	}

	//is falling
	if(hero.diry > 0){
	var blocky = gridPosition(hero.y + hero.height + dy);
	hero.jumping = true; //prevent jumping while falling
	} else {
	//is jumping
	var blocky = gridPosition(hero.y + dy);
	}

	//X corners of hero
	var hero_xleft = gridPosition(hero.x);
	var hero_xright = gridPosition(hero.x + hero.width - 1);
	//found a blocked tile
	if(is_blocked("y", blocky, hero_xleft, hero_xright)){
	//hit floor - adjust position
	if(hero.diry > 0){
	hero.y = blocky * tilesize - hero.height;
	//disable jump while falling (enable: double jump)
	hero.jumping = false;
	}
	//collided with a roof, reset jump speed, it will start falling
	if (hero.diry < 0){
	hero.y = blocky * tilesize + tilesize;
	jump_speed = 0;
	}
	} else {
	hero.y += dy;
	}

	//Calculos da posição X =======================================
	if(! hero.moving){ return; }
	//distance moved
	var dx = hero.xspeed * hero.dirx;
	//is going right
	if(hero.dirx > 0){
	var x_axis = gridPosition(hero.x + hero.width + dx);
	}
	//is going left
	if(hero.dirx < 0){
	var x_axis = gridPosition(hero.x + dx);
	}

	//Y corners of hero
	var hero_ytop = gridPosition(hero.y);
	var hero_ybottom = gridPosition(hero.y + hero.height -1);

	//found a blocked tile
	if(is_blocked("x", x_axis, hero_ytop, hero_ybottom)){
	//adjust the hero position after being stopped by collision
	if(hero.dirx > 0){ //moving right
	hero.x = x_axis * tilesize - hero.width;
	}
	if(hero.dirx < 0){ //moving left
	hero.x = x_axis * tilesize + tilesize;
	}
	} else {
	//not blocked; continue moving
	hero.x += dx;
	}
	};

	var update = function()
	{
	movement();
	draw_hero();
	};

	draw_scene();
	setInterval(update, 24);

	</script>
	</body>
	</html>