Add files via upload

2026-06-16 08:12:50 +02:00 · 2023-12-07 18:56:57 +01:00
parent ea54a64a1a
commit 2469d601f2
4 changed files with 174 additions and 0 deletions
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+  <meta charset="UTF-8">
+  <title>Tour de Hanoï</title>
+  <link rel="stylesheet" href="style.css">
+  <link rel="icon" href="favicon.ico">
+</head>
+<body>
+  <div class="container">
+    <h1>Tour de Hanoï</h1>
+    <div class="game">
+      <div id="tower1" class="towers">
+        <div id="disk1" class="disks">1</div>
+        <div id="disk2" class="disks">2</div>
+        <div id="disk3" class="disks">3</div>
+        <div id="disk4" class="disks">4</div>
+        <div id="disk5" class="disks">5</div>
+        <div id="disk6" class="disks">6</div>
+        <div id="disk7" class="disks">7</div>
+        <div id="disk8" class="disks">8</div>
+        <div id="disk9" class="disks">9</div>
+        <div id="disk10" class="disks">10</div>
+      </div>
+      <div id="tower2" class="towers"></div>
+      <div id="tower3" class="towers"></div>
+
+    </div>
+    <button onclick="location.reload()">Recommencer</button>
+  </div>
+
+  <script src="script.js"></script>
+</body>
+</html>
@@ -0,0 +1,53 @@
+const towers = document.getElementsByClassName('towers');
+const body = document.querySelector('body');
+let selectedDisk = null;
+
+for (let i = 0; i < towers.length; i++) {
+  towers[i].addEventListener('click', function() {
+    if (selectedDisk === null && towers[i].firstElementChild !== null) {
+      selectedDisk = towers[i].firstElementChild;
+      moveElementWithMouse();
+      selectedDisk.remove();
+      body.prepend(selectedDisk);
+      selectedDisk.style.display = 'none';
+      for (let j = 0; j < towers.length; j++) {
+        if (towers[j].childElementCount > 0) {
+        towers[j].style.paddingTop = 510 - (towers[j].childElementCount * 50) + 'px';
+        }
+      }
+    } else if (selectedDisk !== null && canPlaceDisk(i)) {
+      towers[i].prepend(selectedDisk);
+      selectedDisk.style.position = '';
+      selectedDisk = null;
+      for (let j = 0; j < towers.length; j++) {
+        if (towers[j].childElementCount > 0) {
+        towers[j].style.paddingTop = 510 - (towers[j].childElementCount * 50) + 'px';
+        }
+      }
+      // verifier si on a gagné
+      if (towers[2].childElementCount === 10) {
+        alert('You win!');
+      }
+    } 
+  });
+}
+
+function canPlaceDisk(towersIndex) {
+  if (towers[towersIndex].firstElementChild === null || towers[towersIndex].firstElementChild.clientWidth > selectedDisk.clientWidth) {
+    return true;
+  } else {
+    return false;
+  }
+}
+
+function moveElementWithMouse() {
+  document.addEventListener('mousemove', function(event) {
+    if (!selectedDisk) {
+      return;
+    }
+    selectedDisk.style.position = 'absolute';
+    selectedDisk.style.display = 'flex';
+    selectedDisk.style.left = event.clientX - (0.5 * selectedDisk.clientWidth) + 'px';
+    selectedDisk.style.top = event.clientY - (1.2 * selectedDisk.clientHeight) + 'px';
+  });
+}
@@ -0,0 +1,87 @@
+.container {
+  text-align: center;
+  margin-top: 50px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.game {
+  margin-top: 20px;
+  display: flex;
+  justify-content: space-around;
+  height: 540px;
+}
+
+.towers {
+  display: flex;
+  flex-direction: column;
+  background-color: #3498db56;
+  border-radius: 30px 30px 5px 5px;
+  width: 200px;
+  margin: 10px;
+  padding: 10px;
+  align-items: center;
+  cursor: pointer;
+}
+
+.disks {
+  vertical-align:baseline;
+  font-size: 30px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 50px;
+  background-color: #3498db;
+  border-radius: 5px;
+}
+
+#disk1 {
+  background-color: #FF6B6B;
+  width: 20px;
+}
+
+#disk2 {
+  background-color: #6BFF6B;
+  width: 40px;
+}
+
+#disk3 {
+  background-color: #6B6BFF;
+  width: 60px;
+}
+
+#disk4 {
+  background-color: #FF6BFF;
+  width: 80px;
+}
+
+#disk5 {
+  background-color: #FFFF6B;
+  width: 100px;
+}
+
+#disk6 {
+  background-color: #6BFFFF;
+  width: 120px;
+}
+
+#disk7 {
+  background-color: #FFA500;
+  width: 140px;
+}
+
+#disk8 {
+  background-color: #9400D3;
+  width: 160px;
+}
+
+#disk9 {
+  background-color: #32CD32;
+  width: 180px;
+}
+
+#disk10 {
+  background-color: #663399;
+  width: 200px;
+}