// 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);