JavascriptSandbox/dodgeGame/code.js

// Variables
	var posY, pos1, pos2, posX;
	var wSize, hSize;
	var dim;
	var bulletX, bulletY, bulletAcc = 0;
	var text = "Esquive !!!";
	var nbVague = 0;
	var division = 1;

//Fonctions de redimensionnement
function dimensionner() {
	
	if( typeof( window.innerHeight ) == 'number' )
		hSize = window.innerHeight;
	else if( document.documentElement && document.documentElement.clientHeight )
		hSize = document.documentElement.clientHeight;

	if( typeof( window.innerWidth ) == 'number' )
		wSize = window.innerWidth;
	else if( document.documentElement && document.documentElement.clientWidth )
		wSize = document.documentElement.clientHeight;

	document.getElementById("canvas").height = hSize;
	document.getElementById("canvas").width = wSize;

	// Etalonnage
	pos1 = hSize/4;
	pos2 = 3*hSize/4;
	dim = hSize / 8;
	posX = wSize / 4;
	division = wSize / 2000;

	// Réinitialisation
	posY = pos2;
	bulletX = wSize-dim/2;
	bulletY = pos1;
}

// Fonctions
function clear() {
	context.fillStyle = "black";
	context.clearRect(0, 0, wSize, hSize);
	context.fillRect(0, 0, wSize-dim/2, hSize-dim/2);
}

function drawPic(x, y) {
	context.fillStyle = "rgb(23, 167, 67)";
	context.beginPath();
	context.moveTo(x, y);// 1er point
	context.lineTo(x-dim, y+dim);// 2e point
	context.lineTo(x-2*dim, y+dim);// 3e
	context.lineTo(x-2*dim, y-dim);// 4e
	context.lineTo(x-dim, y-dim);// 5e
	context.closePath();
	context.fill();
}

function drawBullet(x, y) {
	if (bulletY == pos1) context.fillStyle = "rgb(223, 0, 182)";
	else context.fillStyle = "rgb(223, 182, 0)";
		
	context.beginPath();
	context.moveTo(x, y-dim);// 1er point
	context.lineTo(x+dim, y);// 2e point
	context.lineTo(x, y+dim);// 3e
	context.lineTo(x-dim, y);// 4e
	context.closePath();
	context.fill();
}

function drawText(x, y, text) {
	context.font = "bold 32pt Calibri, Geneva, Arial";
	context.fillStyle = "#fff";
	context.fillText(text, x, y);
}

// Gestion des évènements
	// Variation de tailles
	window.onload = function(){ dimensionner() };
	window.onresize = function(){ dimensionner() };

	// Actions
	function jump() {
		posY = pos1;
	}
	function down() {
		posY = pos2;
	}

	// Ordi
	document.addEventListener('mousedown', function(e) {
		jump();
	}, false);
	document.addEventListener('mouseup', function(e) {
		down();
	}, false);

	// Smartphone
	document.addEventListener('touchstart', function(e) {
		jump();
	}, false);
	document.addEventListener('touchend', function(e) {
		down();
	}, false);

// Propriétés
var canvas  = document.querySelector('#canvas');
var context = canvas.getContext('2d');

// Main
function mainLoop() {
	//Nettoyage
	clear();

	//Ennemi
	bulletX -= bulletAcc;
	bulletAcc *= 0.99;
	if (bulletX < posX) {
		if (bulletY == posY) { //Touché !
			text = "Game Over";
		}
		else if (text != "Game Over") { //Retire
			nbVague++;
			bulletX = wSize-dim/2;
			if (Math.floor(Math.random()*2) == 1) bulletY = pos1;
			else bulletY = pos2;
		}
	}
	else {
		bulletAcc += division;
	}

	//Affichage
	drawPic(posX, posY);
	drawBullet(Math.ceil(bulletX), bulletY);
	drawText(2, 34, text + " Vague n°" + nbVague);
}

//Loop
setInterval(mainLoop, 20);