Créer un mini jeu, relier des images entre elles à l'aide d'un "trait" [Résolu]

Signaler
Messages postés
74
Date d'inscription
mercredi 8 avril 2020
Statut
Membre
Dernière intervention
24 mai 2020
-
Messages postés
74
Date d'inscription
mercredi 8 avril 2020
Statut
Membre
Dernière intervention
24 mai 2020
-
Bonjour a tous, j'aimerais faire un mini jeu pour un projet en ISN, mais je ne vois pas du tout comment faire... J'aimerais disposer sur la page html 2 colonnes d'images où l'on pourrait les relier entre elles. Si une image n'est pas relier avec la bonne, alors la ligne ne peut se faire. Je ne sais pas si on peut faire ça avec un canvas ou alors il existe peut être des solutions plus simple ...
Merci d'avance pour votre aide

1 réponse

Messages postés
74
Date d'inscription
mercredi 8 avril 2020
Statut
Membre
Dernière intervention
24 mai 2020

Le projet fini :
<!doctype html>
<html>
<head>
  <title>Les Fresque du Climat par Erwan et Clara</title>
  <link rel="stylesheet" href="feuille de style.css" />
</head>

 <body>
  <h1> La Fresque du Climat</h1>
  <p>Pour lancer la presentation de la fresque du climat, cliquer sur le lien ci-dessous :</p>
  <p><a href = "javascript:run_python()"><font face = 'Cooper'>    Fresque du climat</font></a></p>
  <p>Pour vous exercez, voici un petit jeu :</p>
  <canvas id="canvas" width="1550" height="1420" style = "border:5px solid #000000;"></canvas>
  <p><img src="Conclusion.png"/></p>
  <p> Notre lycee : <a href="http://porte-normandie-lyc.spip.ac-rouen.fr/" : target="_blank" > Lycee Porte de Normandie</a></p>
	<script language="Javascript">
    
	var canvas = document.getElementById("canvas") ; //fait réf. au canvas//
	var ctx = canvas.getContext("2d");               //dessine sur le canvas en 2d//
    var img = new Image();                           // création d'image //
	img.src = "Fresque_05_bis.png";
	img.onload = function(){ 
		ctx.drawImage(img, 50, 1170);
   
	};
	var img2 = new Image(); 
	img2.src = "Fresque_07_bis.png";
	img2.onload = function(){ 
		ctx.drawImage(img2, 50, 590);
		
	};	
	 
	var img3 = new Image(); 
	img3.src = "Fresque_17_bis.png";
	img3.onload = function(){ 
		ctx.drawImage(img3, 50, 300);
		
	};	

    var img4 = new Image(); 
	img4.src = "Fresque_23_bis.png";
	img4.onload = function(){ 
		ctx.drawImage(img4, 50, 880);
		
	};	
	
	 var img5 = new Image(); 
	img5.src = "Fresque_25_bis.png";
	img5.onload = function(){ 
		ctx.drawImage(img5, 50, 10);
		
	};	
	
	
	 var img6 = new Image(); 
	img6.src = "Fresque_06_bis.png";
	img6.onload = function(){ 
		ctx.drawImage(img6, 1100, 880);
		
	};
	
	
	 var img7 = new Image(); 
	img7.src = "Fresque_08_bis.png";
	img7.onload = function(){ 
		ctx.drawImage(img7, 1100, 300);
		
	};
	
	
	 var img8 = new Image(); 
	img8.src = "Fresque_18_bis.png";
	img8.onload = function(){ 
		ctx.drawImage(img8, 1100, 590);
		
	};
	
	
	 var img9 = new Image(); 
	img9.src = "Fresque_26_bis.png";
	img9.onload = function(){ 
		ctx.drawImage(img9, 1100, 1170);
		
	};
	
	
	 var img10 = new Image(); 
	img10.src = "Fresque_24_bis.png";
	img10.onload = function(){ 
		ctx.drawImage(img10, 1100, 10);
		
	};
	

  function run_python()
   {
    var w = new ActiveXObject("WScript.Shell"); 
    w.run('cmd /c "python C:\\fresque\\Le_rechauffement_climatique.py"'); 
   }
	
  
	</script>
 
	<script type="text/javascript">
	window.onload = function() {
	var clicks = 0;
	var lastClick = [0, 0];

	var canvas = document.getElementById('canvas');

	canvas.addEventListener('click', draw, false);

	function verification(x1, y1, x2, y2){
        if ((((x1>60)&&(x1<460) ) && (y1>311)&&(y1<551)) && (((x2>1100)&&(x2<1500) ) && (y2>1512)&&(y2<1753))){
            console.log("ok");
            return [true, 450, 120, 1100, 1260];
        }
        if ((((x1>60)&&(x1<460) ) && (y1>602)&&(y1<842)) && (((x2>1100)&&(x2<1500) ) && (y2>891)&&(y2<1132))){
				console.log("ok");
				return [true,450,420,1100,710];
		}
		if ((((x1>60)&&(x1<460) ) && (y1>892)&&(y1<1132)) && (((x2>1100)&&(x2<1500) ) && (y2>602)&&(y2<842))){
				console.log("ok");
				return [true,450,710,1100,420];
			
		}	
		if ((((x1>60)&&(x1<460) ) && (y1>1182)&&(y1<1422)) && (((x2>1100)&&(x2<1500) ) && (y2>312)&&(y2<552))){
				console.log("ok");
				return [true,450,1000,1100,130];
			
		}	
		if ((((x1>60)&&(x1<460) ) && (y1>1443)&&(y1<1681)) && (((x2>1100)&&(x2<1500) ) && (y2>1152)&&(y2<1393))){
				console.log("ok");
				return [true,450,1290,1100,1000];
							
		}
		
		
		
		else {
            return [false, 0, 0, 0, 0];
        }
    }
function draw(e) {
        ctx = this.getContext('2d');

        x = getClick(e)[0]; // - this.offsetLeft;
        y = getClick(e)[1]; // - this.offsetTop;
        console.log(x,y);

        if (clicks != 1) {
            clicks++;
            console.log(clicks)
            lastClick = [x, y];
        } else {
            console.log(lastClick[0], lastClick[1], x, y);
            verif= verification(lastClick[0], lastClick[1], x, y)
            if (verif[0]) {

                ctx.strokeStyle = 'black';
                ctx.lineWidth=6;
                ctx.beginPath();
                ctx.moveTo(verif[1], verif[2]);
                ctx.lineTo(verif[3], verif[4]);

                ctx.stroke()

                clicks = 0;
            } else {
                clicks = 0;
            }

    }
    }

	function draw(e) {
        ctx = this.getContext('2d');

        x = getClick(e)[0]; // - this.offsetLeft;
        y = getClick(e)[1]; // - this.offsetTop;
        console.log(x,y);

        if (clicks != 1) {
            clicks++;
            console.log(clicks)
            lastClick = [x, y];
        } else {
            console.log(lastClick[0], lastClick[1], x, y);
            verif= verification(lastClick[0], lastClick[1], x, y)
            if (verif[0]) {

                ctx.strokeStyle = 'black';
                ctx.lineWidth=6;
                ctx.beginPath();
                ctx.moveTo(verif[1], verif[2]);
                ctx.lineTo(verif[3], verif[4]);

                ctx.stroke()

                clicks = 0;
            } else {
                clicks = 0;
            }

    }
    }
	function getClick(e) {
		var x, y;

		if (e.pageX != undefined && e.pageY != undefined) {
			x = e.pageX;
			y = e.pageY;
		} else {
			x = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
			y = e.clientY + document.body.scrollTop  + document.documentElement.scrollTop;
		}

		return [x, y];
	}
	}
	</script>
	

 </body>
</html>