janvier 13, 2025 / NSI

NSI : JS et HTML , evolution du tic-tac-toe

Un cours à connaître :

Javascript-HTML-et-CSSTélécharger

Télcharger les images suivantes :

Le html

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <link rel="stylesheet" href="style.css">
  <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Bowlby+One&display=swap" rel="stylesheet">
  <title>Pente</title>
  </head>
<body>
<div id="plateau">
<h1 id="texte">Cliquer pour commencer</h1>
<p>Il faut aligner 4 pierres pour gagner</p>
</div>
    </body>
	<script src="script.js"></script>
	</html>

le .css

#plateau {
    width: 33%;
    margin-left: 33%;
    margin-top:50px;
}
h1 {
	color: #FF5733;
	font-size: 30px;
	width: 50%;
    margin-left: 25%;
	font-family: "Bowlby One", sans-serif;
  font-weight: 400;
  font-style: normal;
  text-align: center;
}
p {
	color: #FF5733;
	font-size: 20px;
	text-align: center;
	width: 80%;
    margin-left: 10%;
	font-family: "Bowlby One", sans-serif;
  font-weight: 400;
  font-style: normal;
}
img {
    width: 9%;
}

le JS

var mon_plateau=document.getElementById("plateau");

for ( var i=0;i<121;i++){
	var mon_image=document.createElement("img");
mon_image.src="images/bouton_vide.png";
mon_image.addEventListener("mousedown",changer_image,false)
	mon_plateau.appendChild(mon_image);
}

var joueur=1;
var texte=document.getElementById("texte");

function changer_image(evt){
	
	if (this.getAttribute("src")=="images/bouton_vide.png"){
		if (joueur==1) {
		this.src="images/bouton_1.png";
	joueur=2;
	texte.textContent="Au joueur 2 de jouer";
	}
	else {
		this.src="images/bouton_2.png";
		joueur=1;
		texte.textContent="Au joueur 1 de jouer";
	}	
	}
	}

CatégoriesNSI