JSFiddle - React, Tailwind, and code Playground

by Simon Hi

HTML

<div class="main">
<canvas id="canvas">
</canvas>
</div>
<em>By parsimonhi & dinolam</em>

CSS

canvas {background:black;}

JavaScript

var canvas, context;
var largeur=610, hauteur=500;
var alien_largeur=50, alien_hauteur=25, marge=10;
function calcule_x_coord (x) {return marge + x*(alien_largeur+marge);}
function calcule_y_coord (y) {return marge + y*(alien_hauteur+marge);}
var aliens = [
				{ x:calcule_x_coord(0), y:calcule_y_coord(0), bras_en_bas:true },
				{ x:calcule_x_coord(1), y:calcule_y_coord(0), bras_en_bas:true },
			    { x:calcule_x_coord(2), y:calcule_y_coord(0), bras_en_bas:true },
			    { x:calcule_x_coord(3), y:calcule_y_coord(0), bras_en_bas:true },
			    { x:calcule_x_coord(4), y:calcule_y_coord(0), bras_en_bas:true },
			    { x:calcule_x_coord(5), y:calcule_y_coord(0), bras_en_bas:true },
			    { x:calcule_x_coord(6), y:calcule_y_coord(0), bras_en_bas:true },
			    { x:calcule_x_coord(7), y:calcule_y_coord(0), bras_en_bas:true },
			    { x:calcule_x_coord(8), y:calcule_y_coord(0), bras_en_bas:true },
			    { x:calcule_x_coord(9), y:calcule_y_coord(0), bras_en_bas:true }
			];
function alien_le_plus_bas () {
	var alien = aliens[0];
    var ymax = alien.y;
    for (var i = 1; i < aliens.length ; i++) {
        if (aliens[ i ].y > ymax) {
            ymax = aliens[ i ].y;
            alien = aliens[ i ];
        }
    }
    return alien;
}
function affiche_alien (alien) {
	var leader = alien_le_plus_bas();
	context.lineWidth = 2;
	if (alien == leader) context.fillStyle = "red";
	else  context.fillStyle = "blue";
	context.fillRect(alien.x, alien.y, alien_largeur, alien_hauteur);
	context.strokeStyle = "yellow";
	context.strokeRect(alien.x, alien.y, alien_largeur, alien_hauteur);
}
function efface_alien (alien) {
	context.clearRect(alien.x-2.5, alien.y-2.5, alien_largeur+5, alien_hauteur+5);
}
function affiche_aliens () {
	var i, alien;
    for ( i = 0; i < aliens.length; i++ ) {
        affiche_alien(aliens[ i ]);
    }
}
function animate_aliens () {
	var i;
    for ( i = 0; i < aliens.length; i++ ) {
    	efface_alien(aliens[ i ]);
    	aliens[ i ].y = aliens[ i ].y +...