Pouvez-vous compter les allumettes ?
Voir le code source au bas de la page.
Code source
<font size=4>
<B>Pouvez-vous compter les allumettes ?</B>
<BR><BR>
<FORM NAME="form1" action="allu.htm?">
Longueur : <INPUT TYPE="text" NAME="longueur" SIZE= "3" >
Largeur : <INPUT TYPE="text" NAME="largeur" SIZE="3" ><BR>
<font size=1>Entrez les valeurs dans les cases<font size=4><BR>
<input type="submit" value=" Afficher le résultat et les allumettes.">
<BR>
</FORM>
<HR>
<script language="JavaScript"> <!--
longueur=2;
largeur=2;
var requete = window.location.search ;
if (requete) {
requete=requete.substring(1) ;
requete = unescape(requete) ;
}
var elem = requete.split('&');
l1= elem[0];
l2 = elem[1];
var fin1 = l1.split('=');
var fin2 = l2.split('=');
longueur=fin1[1];
largeur=fin2[1];
if (longueur<2) {
longueur=2;
}
if (largeur<2) {
largeur=2;
}
var multih=(longueur*1)+1;
var multiv=(largeur*1)+1;
var horizontal=(longueur*multiv);
var vertical=(largeur*multih);
var total =horizontal + vertical;
document.write("Longueur : " + longueur + " ");
document.write("Largeur : " + largeur + " <BR>");
document.write(" <B><U>Nombre d'allumettes: </U></B><br> Horizontales: " + multiv + " fois " + longueur + " = " + horizontal + "<BR> Verticales : " + largeur + " fois "+ multih + " = " + vertical +" <BR> Donc en tout : " + horizontal + " + " + vertical + " = " + total + " <BR> Il faudra <b>" + total + " allumettes </B>pour composer un quadrillage de " + largeur + " fois " + longueur + " carreaux.<BR>");
if(longueur>20) {
longueur=2;
largeur=2;
document.write ("<font face=arial size=6 color=red><BR><BR>Nombre trop grand <br> Je ne peux pas afficher les allumettes<br>");
}
if(largeur>20) {
longueur=2;
largeur=2;
document.write ("<font face=arial size=6 color=red><BR><BR>Nombre trop grand <br> Je ne peux pas afficher les allumettes<BR>");
}
-->
</script>
<canvas id='id_canvas' width='1200' height='1200' >
Votre navigateur ne supporte pas canvas.<br>
Essayez avec Firefox, Safari, Chrome ou Opera.
</canvas>
<script type='text/javascript'>
var canvas = document.getElementById('id_canvas');
if (canvas.getContext) {
var ctx=canvas.getContext('2d');
var t1 = canvas.getContext("2d");
// t1.scale(3,3);
var v=0;
for (var j = 0; j < largeur; j++){
t1.translate(0,50);
var dist=(longueur*54)+10;
var piquet=((longueur*1)+1);
lf=(54*longueur);
ctx.font = "13pt arial";
ctx.fillStyle = "black";
ctx.fillText(longueur, dist,12);
ctx.fillText(piquet, dist,37);
ctx.fillText(longueur, dist,62);
var h=0;
t1.fillStyle = "lightblue";
t1.fillRect(0,0, lf,12);
t1.fillStyle = "pink";
t1.fillRect(0,12, lf,50);
t1.fillStyle = "lightblue";
t1.fillRect(0,55, lf,12);
for (var i = 0; i < longueur; i++){
t1.beginPath();
t1.lineWidth="0.25";
t1.strokeStyle="blue";
t1.fillStyle="yellow"
t1.arc((6+h),4, 3, 0, 2 * Math.PI);
t1.fill();
t1.stroke();
t1.fillStyle = "green";
t1.fillRect((8+h),2, 40,4);
t1.closePath()
t1.beginPath();
t1.lineWidth="0.25";
t1.strokeStyle="blue";
t1.fillStyle="yellow"
t1.arc((6+h),13, 3, 0, 2 * Math.PI);
t1.fill();
t1.stroke();
t1.fillStyle = "green";
t1.fillRect((4+h),15, 4,40);
t1.closePath()
h=h+50;
}
t1.beginPath();
t1.lineWidth="0.25";
t1.strokeStyle="blue";
t1.fillStyle="yellow"
t1.arc((6+h),13, 3, 0, 2 * Math.PI);
t1.fill();
t1.stroke();
t1.fillStyle = "green";
t1.fillRect((4+h),15, 4,40);
t1.closePath()
}
var h=0;
for (var i = 0; i < longueur; i++){
t1.beginPath();
t1.lineWidth="0.25";
t1.strokeStyle="blue";
t1.fillStyle="yellow"
t1.arc((6+h),62, 3, 0, 2 * Math.PI);
t1.fill();
t1.stroke();
t1.fillStyle = "green";
t1.fillRect((8+h),60, 40,4);
t1.closePath()
h=h+50;
}
}
</script>