diff --git a/favicon.ico b/favicon.ico new file mode 100644 index 0000000..9757db6 Binary files /dev/null and b/favicon.ico differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..012c52b --- /dev/null +++ b/index.html @@ -0,0 +1,34 @@ + + + + + Tour de Hanoï + + + + +
+

Tour de Hanoï

+
+
+
1
+
2
+
3
+
4
+
5
+
6
+
7
+
8
+
9
+
10
+
+
+
+ +
+ +
+ + + + diff --git a/script.js b/script.js new file mode 100644 index 0000000..ba90ad2 --- /dev/null +++ b/script.js @@ -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'; + }); +} \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..53509d1 --- /dev/null +++ b/style.css @@ -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; +}