Platformer game

index.html

<canvas id="platform"></canvas>

platformer-game.markdown

Platformer game

it's buggy I know

A Pen by dimabelogurov on CodePen.

License.

script.js

// Set up canvas

var canvas = document.getElementById('platform'), ctx = canvas.getContext('2d');


canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

var terrain = [], player, jumping = true, keys = [], lastBlock = 400;

// Create terrain, lava and player

function init() {
	generate();

	lava = {
		x: 0,
		y: canvas.height - 60,
		w: canvas.width,
		h: 60
	};

	player = {
		x: 210,
		y: 300,
		w: 40,
		h: 40,
		vx: 5,
		vy: 4
	};

	draw();
	setTimeout(tick, 3000);
}

// Generate terrain

function generate() {
    terrain.push({
        x: 0,
        y: 0,
        w: canvas.width,
        h: 60
    });

    // Define moving blocks here

    terrain.push({
        x: 400,
        y: 480,
        w: 60,
        h: 60
    });
    
    // Create a new block every second

    setTimeout(function(){
        setInterval(function(){
            lastBlock += 80;
            terrain.push({
                x: lastBlock,
                y: Math.floor(Math.random() * 300) + 200,
                w: 60,
                h: 60
            });
        }, 1000);
    }, 3000);
}

// Draw the objects

function draw() {
	ctx.clearRect(0,0,canvas.width,canvas.height);
	for (var i = 0, x = terrain.length; i < x; i++){
		var t = terrain[i];
		ctx.fillStyle = '#2c2e2d';
		ctx.fillRect(t.x, t.y, t.w, t.h);
	}

	ctx.fillStyle = '#2d8da5';
	ctx.fillRect(player.x, player.y, player.w, player.h);

	ctx.fillStyle = '#e93626';
	ctx.fillRect(lava.x, lava.y, lava.w, lava.h);
}

// Update player & object location

function update() {
    // Check what direction the player should go
    
	if (keys[38] || keys[87]){
	    if (!jumping){
			jumping = true;
			player.vy = -12;
		}
	}

	if (keys[37] || keys[65]){
		player.x -= player.vx;
	}

	if (keys[39] || keys[68]){
		player.x += player.vx;
	}
    
    // Making player fall

	player.y += player.vy;

	player.vy += 0.4;
    
    // Respawn player if out of canvas

	if (player.y > canvas.height){
		player.x = 210;
		player.y = 300;
		player.vy = 0;
		jumping = false;
	}

	if (player.x + player.w > canvas.width){
		player.x = canvas.width - player.w;
	}

	for (var j = 1, y = terrain.length; j < y; j++) {
		terrain[j].x -= 5;
		if (terrain[j].x < 0){
			// terrain.splice(j, 1);
		}
    }
    
    // Check for player/terrain collision
    
	for (var i = 0, x = terrain.length; i < x; i++) {
		var t = terrain[i];

		// Blocks collision

		// Bottom

		if (player.x < t.x + t.w &&
			player.x + player.w > t.x &&
			player.y < t.y + t.h &&
			player.y + player.h > t.y + t.h){
			player.y = t.y + t.h;
			player.vy = 8;
		}

		// Top

		if (player.x < t.x + t.w &&
			player.x + player.w > t.x &&
			player.y < t.y + t.h &&
			player.y + player.h > t.y){
			   jumping = false;
				 player.y = t.y - player.h;
          player.vy = 0;
          player.x -= 5;
		}

		// Left

		if (player.x + player.w + 5 > t.x &&
			player.x < t.x &&
			player.y < t.y + t.h &&
			player.y + player.h > t.y){
			console.log('hit left');
			player.x = t.x - player.w;
		}

		// Right

		if (player.x < t.x + t.w &&
			player.x + player.w > t.x &&
			player.y < t.y + t.h &&
			player.y + player.h > t.y){
			console.log('hit right');
			player.x = t.x + t.w;
		}
	}
}

// Listen for pressed buttons

document.body.addEventListener("keydown", function(e) {
	e.preventDefault();
    keys[e.keyCode] = true;
});

document.body.addEventListener("keyup", function(e) {
    keys[e.keyCode] = false;
});

init();

// Update and draw canvas

function tick() {
    draw();
    update();
	requestAnimationFrame(tick);
}