Skip to content

Instantly share code, notes, and snippets.

@beagleknight
Created November 8, 2013 23:07
Show Gist options
  • Save beagleknight/7379113 to your computer and use it in GitHub Desktop.
Save beagleknight/7379113 to your computer and use it in GitHub Desktop.
Simple game for my tumblr
var CANVAS_WIDTH = 200,
CANVAS_HEIGHT = 100,
canvas = document.getElementById("microgame"),
ctx = canvas.getContext("2d"),
player = {
x: 30,
y: CANVAS_HEIGHT - 20,
w: 20,
h: 20,
score: 0,
jumping: false,
jumpingTimer: 0,
falling: false,
gliding: false
},
enemies = [],
spawnEnemyTimer = 0,
nextEnemySpawn = 1,
lastUpdate = +new Date;
canvas.width = CANVAS_WIDTH;
canvas.height = CANVAS_HEIGHT;
function quadsCollision(quad_1, quad_2) {
var x1_1, y1_1, x1_2, y1_2,
x2_1, y2_1, x2_2, y2_2;
x1_1 = quad_1.x;
y1_1 = quad_1.y;
x2_1 = quad_1.x + quad_1.w;
y2_1 = quad_1.y + quad_1.h;
x1_2 = quad_2.x;
y1_2 = quad_2.y;
x2_2 = quad_2.x + quad_2.w;
y2_2 = quad_2.y + quad_2.h;
return (x1_1 < x2_2) && (x2_1 > x1_2) && (y1_1 < y2_2) && (y2_1 > y1_2);
}
function update(dt) {
var i, l, toRemove = [];
if (player.jumping) {
player.y -= 150 * dt;
player.jumpingTimer += dt;
if (player.jumpingTimer > 0.35) {
player.falling = true;
player.jumping = false;
}
} else {
var vy = player.gliding ? 25 : 100;
player.y = player.y >= canvas.height - 20 ? canvas.height - 20 : player.y + vy * dt;
if (player.falling && player.y === canvas.height - 20) {
player.falling = false;
player.gliding = false;
}
}
for (i = 0, l = enemies.length; i < l; i += 1) {
enemies[i].x += enemies[i].vx * dt;
if (quadsCollision(player, enemies[i])) {
reset();
return;
}
if (enemies[i].x < -20) {
player.score += 1;
toRemove.push(i);
}
}
for (i = 0, l = toRemove.length; i < l; i += 1) {
enemies.splice(toRemove[i], 1);
}
spawnEnemyTimer += dt;
if (spawnEnemyTimer > nextEnemySpawn) {
var enemy = {
x: canvas.width,
vx: -90 - 10 * Math.random(),
y: canvas.height - 20,
w: 20,
h: 20,
inverted: false
};
if (Math.round(Math.random() % 2) === 0) {
enemy.y = canvas.height - 50;
enemy.inverted = true;
}
enemies.push(enemy);
spawnEnemyTimer = 0;
nextEnemySpawn = 0.5 + Math.random() * 1 ;
}
}
function draw() {
var i, l;
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = "black";
ctx.fillRect(player.x, player.y, player.w, player.h);
ctx.fillStyle = "white";
for (i = 0, l = enemies.length; i < l; i += 1) {
ctx.save();
ctx.translate(enemies[i].x, enemies[i].y);
ctx.beginPath();
if (enemies[i].inverted) {
ctx.moveTo(0, 0);
ctx.lineTo(20, 0);
ctx.lineTo(10, 20);
} else {
ctx.moveTo(0, 20);
ctx.lineTo(20, 20);
ctx.lineTo(10, 0);
}
ctx.stroke();
ctx.fill();
ctx.restore();
//ctx.strokeRect(enemies[i].x, enemies[i].y, 20, 20);
}
ctx.font = "15px Courier";
ctx.fillText("Score: " + player.score, 0, 10);
}
function loop() {
var now = +new Date,
dt = (now - lastUpdate) / 1000;
update(dt);
draw();
lastUpdate = now;
window.requestAnimationFrame(loop);
}
function reset() {
enemies = [];
player.score = 0;
player.y = CANVAS_HEIGHT - 20;
player.jumping = false;
spawnEnemyTimer = 0;
}
window.addEventListener("keydown", function (event) {
if (event.keyCode == 32) {
if (player.falling) {
player.gliding = true;
} else if (!player.jumping) {
player.jumping = true;
player.jumpingTimer = 0;
}
}
event.preventDefault();
});
window.addEventListener("keyup", function (event) {
if (event.keyCode == 32) {
if (player.falling) {
player.gliding = false;
}
}
});
canvas.addEventListener("mousedown", function (event) {
console.log(event);
});
loop();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment