1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93
| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Alien</title>
<h1 align="center" style="word-wrap:break-word">Une flotille d'aliens</h1>
<hr>
</head>
<script>
/*Défition des variables pour le canvas */
var canvas;
var context;
/*var unit = new Array (5,2,3,6,4);*/
var unit = 4 ;
var tableX = new Array (50, 150, 250, 350, 450, 500);
var tableY = new Array (35, 10, 60, 100, 50, 10);
var colors = ['#000000','#008000','#FF0000','#000080','#FFFF00','#D2691E'];
/*var table = new Array ();*/
function efface_alien (i) {
for (var j=0 ; j<tableX.length; j++) {
context.clearRect(tableX[i],tableY[i],11*unit,8*unit);
}
}
/*Fonction qui affiche l'alien dans le canevas */
function affiche_aliens (i) {
context.fillStyle = colors[i];//appelle le tableau de couleurs défini pour chaque alien
context.fillRect(tableX[i]+2*unit,tableY[i],unit,unit);
context.fillRect(tableX[i]+3*unit,tableY[i]+1*unit,unit,unit);
context.fillRect(tableX[i]+7*unit,tableY[i]+1*unit,unit,unit);
context.fillRect(tableX[i]+2*unit,tableY[i]+2*unit,7*unit,unit,unit);
context.fillRect(tableX[i]+1*unit,tableY[i]+3*unit,unit,unit);
context.fillRect(tableX[i]+2*unit,tableY[i]+3*unit,unit,unit);
context.fillRect(tableX[i]+4*unit,tableY[i]+3*unit,unit,unit);
context.fillRect(tableX[i]+5*unit,tableY[i]+3*unit,unit,unit);
context.fillRect(tableX[i]+6*unit,tableY[i]+3*unit,unit,unit);
context.fillRect(tableX[i]+8*unit,tableY[i]+3*unit,unit,unit);
context.fillRect(tableX[i]+9*unit,tableY[i]+3*unit,unit,unit);
context.fillRect(tableX[i]+0*unit,tableY[i]+5*unit,unit,unit);
context.fillRect(tableX[i]+0*unit,tableY[i]+6*unit,unit,unit);
context.fillRect(tableX[i]+2*unit,tableY[i]+5*unit,unit,unit);
context.fillRect(tableX[i]+2*unit,tableY[i]+6*unit,unit,unit);
context.fillRect(tableX[i]+8*unit,tableY[i]+5*unit,unit,unit);
context.fillRect(tableX[i]+8*unit,tableY[i]+6*unit,unit,unit);
context.fillRect(tableX[i]+8*unit,tableY[i],unit,unit);
context.fillRect(tableX[i],tableY[i]+4*unit,11*unit,unit);
context.fillRect(tableX[i]+10*unit,tableY[i]+6*unit,unit,unit);
context.fillRect(tableX[i]+10*unit,tableY[i]+5*unit,unit,unit);
}
function bouge_aliens () {
for(var i=0; i<tableX.length; i++) {
//pour chaque, on efface puis affiche chaque alien i parcourt chacun des aliens en leur donnant un numéro
efface_alien(i);
tableY[i]= tableY[i]+10;
if (tableY[i]>500) {
tableY[i]=0;
}
affiche_aliens(i);
}
}
function initialisations () {
canvas = document.getElementById("world");
context = canvas.getContext ("2d");
for (var i=0 ; i<tableX.length; i++) {
affiche_aliens(i);
}
setInterval('bouge_aliens();',200);
}
</script>
</head>
<body onload="initialisations();">
<canvas id="world" width="600" height="400" style="border: 2px solid #000" >
</canvas>
</body>
</html> |
Partager