Canvas Game
From http://codeninja.de/titanic/
by secretgspot
HTML
<!--// from http://codeninja.de/titanic/ //-->
<canvas id="c" width="640" height="480">your browser does not support the canvas tag</canvas>
CSS
body {
background-color:black;
color:#353535;
}
JavaScript
// from http://codeninja.de/titanic/
var c;
var b = 'rgb(0,0,0)';
var w = 'rgb(255,255,255)';
var mode = 0;
var tick = 0;
var shipx = 0;
function draw() {
c.fillStyle = b;
c.fillRect(0, 0, 640, 480);
c.beginPath();
c.strokeStyle = w;
c.moveTo(-1, 350);
var ampli = Math.sin(tick / 15) * 10;
for (var i = 0; i < 640; i++) {
y = 350 + (Math.sin((i + tick) / 15) * ampli);
c.lineTo(i, y)
}
c.stroke();
if (mode == 0) {
c.fillStyle = w;
c.font = "40px Courier";
c.fillText('TITANIC - THE GAME', 110, 150);
c.font = "20px Courier";
if (tick % 10 < 7) {
c.fillText('PRESS SPACE TO PLAY', 210, 250)
}
}
if (mode > 0) {
c.font = "20px Courier";
c.fillStyle = w;
c.fillText('Score:0', 10, 20);
c.fillText('Lives:' + (mode == 1 ? 1 : 0), 550, 20);
if (shipx == 0) {
c.font = "20px Courier";
c.fillStyle = w;
c.fillText('PRESS SPACE TO MOVE >', 0, 450)
}
drawShip(shipx, 15);
c.strokeStyle = w;
c.beginPath();
c.moveTo(640, 370);
c.lineTo(620, 320);
c.lineTo(610, 330);
c.lineTo(550, 200);
c.lineTo(500, 260);
c.lineTo(490, 250);
c.lineTo(470, 370);
c.stroke()
}
if (mode == 2) {
c.font = "40px Courier";
c.fillStyle = w;
c.fillText('GAME OVER', 210 + 5 * Math.random(), 150 + 5 * Math.random());
c.font = "15px Courier";
c.fillText("and btw... i'm leaving the company", 160, 200)
}
tick++;
window.setTimeout(draw, 50)
}
function drawShip(x, s) {
y = 290;
c.strokeStyle = w;
c.beginPath();
c.moveTo(x + 0 * s, y + 2 * s);
c.lineTo(x + 3 * s, y + 2 * s);
c.lineTo(x + 3 * s, y + 0 * s);
c.lineTo(x + 4 * s, y + 0 * s);
c.lineTo(x + 4 * s, y + 2 * s);
c.lineTo(x + 5 * s, y + 2 * s);
c.lineTo(x + 5 * s, y + 0 *...