diff options
| author | pommicket <pommicket@gmail.com> | 2024-08-05 22:27:12 -0400 |
|---|---|---|
| committer | pommicket <pommicket@gmail.com> | 2024-08-05 22:27:12 -0400 |
| commit | 25d63bd25f692acce6c44068e89a2c44b314e703 (patch) | |
| tree | 2c5e4a844696eac4f8140a2406023e7a73250342 | |
| parent | e723397672f904587d7f5f09ece187e9d1f297b1 (diff) | |
Sounds
| -rw-r--r-- | connect.mp3 | bin | 0 -> 5947 bytes | |||
| -rw-r--r-- | game.html | 4 | ||||
| -rw-r--r-- | game.js | 25 | ||||
| -rw-r--r-- | solve.mp3 | bin | 0 -> 46567 bytes | |||
| -rw-r--r-- | style.css | 7 |
5 files changed, 25 insertions, 11 deletions
diff --git a/connect.mp3 b/connect.mp3 Binary files differnew file mode 100644 index 0000000..dc8b395 --- /dev/null +++ b/connect.mp3 @@ -7,12 +7,14 @@ <meta content="width=device-width,initial-scale=1" name="viewport"> <link rel="icon" href="favicon.ico"> <link rel="stylesheet" href="style.css"> - <script src="game.js"></script> + <script src="game.js" async></script> </head> <body> <div id="play-area"> </div> <div class="debug-relative"> </div> + <audio id="connect-audio" src="connect.mp3"></audio> + <audio id="solve-audio" src="solve.mp3"></audio> </body> </html> @@ -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 Binary files differnew file mode 100644 index 0000000..3d78d42 --- /dev/null +++ b/solve.mp3 @@ -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; |