From 25d63bd25f692acce6c44068e89a2c44b314e703 Mon Sep 17 00:00:00 2001 From: pommicket Date: Mon, 5 Aug 2024 22:27:12 -0400 Subject: Sounds --- connect.mp3 | Bin 0 -> 5947 bytes game.html | 4 +++- game.js | 25 +++++++++++++++++++------ solve.mp3 | Bin 0 -> 46567 bytes style.css | 7 +++---- 5 files changed, 25 insertions(+), 11 deletions(-) create mode 100644 connect.mp3 create mode 100644 solve.mp3 diff --git a/connect.mp3 b/connect.mp3 new file mode 100644 index 0000000..dc8b395 Binary files /dev/null and b/connect.mp3 differ diff --git a/game.html b/game.html index 1c2f4e4..4bc233c 100644 --- a/game.html +++ b/game.html @@ -7,12 +7,14 @@ - +

diff --git a/game.js b/game.js index 4329f34..81c3816 100644 --- a/game.js +++ b/game.js @@ -2,12 +2,15 @@ window.addEventListener('load', function () { const getById = (id) => document.getElementById(id); const playArea = getById("play-area"); + const connectAudio = getById("connect-audio"); + const solveAudio = getById("solve-audio"); + let solved = false; const connectRadius = 5; let pieceZIndexCounter = 1; let draggingPiece = null; let nibSize = 12; - let puzzleWidth = 8; - let puzzleHeight = 5; + let puzzleWidth = 4; + let puzzleHeight = 3; let imageUrl = "https://upload.wikimedia.org/wikipedia/commons/0/09/Croatia_Opatija_Maiden_with_the_Seagull_BW_2014-10-10_10-35-13.jpg"; let pieceWidth = 70; let pieceHeight; @@ -219,8 +222,8 @@ window.addEventListener('load', function () { playArea.appendChild(element); } updateUV() { - this.element.style.backgroundPositionX = (-this.u) + 'px'; - this.element.style.backgroundPositionY = (-this.v) + 'px'; + this.element.style.backgroundPositionX = (nibSize - this.u) + 'px'; + this.element.style.backgroundPositionY = (nibSize - this.v) + 'px'; } updatePosition() { this.element.style.left = this.x + 'px'; @@ -229,7 +232,9 @@ window.addEventListener('load', function () { } window.addEventListener('mouseup', function() { if (draggingPiece) { + let anyConnected = false; for (const piece of draggingPiece.connectedComponent) { + if (solved) break; const col = piece.id % puzzleWidth; const row = Math.floor(piece.id / puzzleWidth); const bbox = piece.element.getBoundingClientRect(); @@ -254,12 +259,19 @@ window.addEventListener('load', function () { piece2.y -= diff[1]; piece2.updatePosition(); } + anyConnected = true; connectPieces(piece, neighbour); } } } + if (!solved && draggingPiece.connectedComponent.length === puzzleWidth * puzzleHeight) { + solveAudio.play(); + solved = true; + } draggingPiece.element.style.removeProperty('cursor'); draggingPiece = null; + if (anyConnected) + connectAudio.play(); } }); window.addEventListener('mousemove', function(e) { @@ -277,17 +289,18 @@ window.addEventListener('load', function () { }); image.addEventListener('load', function () { -// (pieceHeight * puzzleHeight) / (pieceWidth * puzzleWidth) === image.height / image.width; pieceHeight = pieceWidth * puzzleWidth * image.height / (puzzleHeight * image.width); document.body.style.setProperty('--piece-width', (pieceWidth + 2 * nibSize) + 'px'); document.body.style.setProperty('--piece-height', (pieceHeight + 2 * nibSize) + 'px'); + document.body.style.setProperty('--image-width', (pieceWidth * puzzleWidth) + 'px'); + document.body.style.setProperty('--image-height', (pieceHeight * puzzleHeight) + 'px'); let positions = []; for (let y = 0; y < puzzleHeight; y++) { for (let x = 0; x < puzzleWidth; x++) { positions.push([x, y, Math.random()]); } } - positions.sort((x, y) => x[2] - y[2]); + //positions.sort((x, y) => x[2] - y[2]); // shuffle pieces for (let y = 0; y < puzzleHeight; y++) { for (let x = 0; x < puzzleWidth; x++) { let nibTypes = [null, null, null, null]; diff --git a/solve.mp3 b/solve.mp3 new file mode 100644 index 0000000..3d78d42 Binary files /dev/null and b/solve.mp3 differ diff --git a/style.css b/style.css index 2fea6ab..03d4a56 100644 --- a/style.css +++ b/style.css @@ -3,8 +3,8 @@ body { --piece-width: 50px; --piece-height: 50px; --image: url(""); - --view-width: 640px; - --view-height: 480px; + --image-width: 640px; + --image-height: 480px; margin: 0; position: relative; } @@ -22,8 +22,7 @@ body { width: var(--piece-width); height: var(--piece-height); background-image: var(--image); - background-size: var(--view-width) var(--view-height); - /* clip-path: path("M0 0 L40 0 L40 40 L0 40 Z"); */ + background-size: var(--image-width) var(--image-height); } .debug-point { position: absolute; -- cgit v1.2.3