it's buggy I know
A Pen by dimabelogurov on CodePen.
<canvas id="platform"></canvas> |
it's buggy I know
A Pen by dimabelogurov on CodePen.
// 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); | |
} |