diff options
| author | pommicket <pommicket@gmail.com> | 2024-08-04 17:16:39 -0400 |
|---|---|---|
| committer | pommicket <pommicket@gmail.com> | 2024-08-04 17:16:39 -0400 |
| commit | 5ddf9193b68e6ef82e15deef538572b8e47a2c19 (patch) | |
| tree | b075fd427fa2ad813e404159e93bb721d03e48d1 | |
| parent | 765015f112b1799e410d6b7fbb598b471e7115bc (diff) | |
pieces
| -rw-r--r-- | game.html | 16 | ||||
| -rw-r--r-- | game.js | 36 | ||||
| -rw-r--r-- | style.css | 22 |
3 files changed, 74 insertions, 0 deletions
diff --git a/game.html b/game.html new file mode 100644 index 0000000..3d63ae5 --- /dev/null +++ b/game.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<html lang="en"> + +<head> + <title>jigsaw</title> + <meta charset="utf-8"> + <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> +</head> +<body> + <div id="play-area"> + </div> +</body> +</html> @@ -0,0 +1,36 @@ +window.addEventListener('load', function () { + const getById = (id) => document.getElementById(id); + const playArea = getById("play-area"); + const scale = 0.2; + let draggingPiece = null; + class Piece { + constructor(id, u, v, x, y) { + this.id = id; + this.u = u; + this.v = v; + const element = this.element = document.createElement('div'); + element.classList.add('piece'); + element.style.backgroundPositionX = (-u) + 'px'; + element.style.backgroundPositionY = (-v) + 'px'; + element.style.left = x + 'px'; + element.style.top = y + 'px'; + element.addEventListener('click', function() { + draggingPiece = this; + }); + playArea.appendChild(element); + } + } + window.addEventListener('mouseup', function() { + draggingPiece = null; + }); + window.addEventListener('mousemove', function(e) { + e.movementX; + + }); + const pieces = []; + for (let y = 0; y < 12; y++) { + for (let x = 0; x < 19; x++) { + pieces.push(new Piece(pieces.length, x * 40, y * 40, x * 50, y * 50)); + } + } +}); diff --git a/style.css b/style.css new file mode 100644 index 0000000..13a9840 --- /dev/null +++ b/style.css @@ -0,0 +1,22 @@ +body { + font-family: sans-serif; + --piece-size: 40px; + --image: url("https://upload.wikimedia.org/wikipedia/commons/0/09/Croatia_Opatija_Maiden_with_the_Seagull_BW_2014-10-10_10-35-13.jpg"); + --view-width: 800px; + --view-height: 480px; +} + +#play-area { + width: 100vw; + height: 100vh; + position: relative; +} + +.piece { + position: absolute; + width: var(--piece-size); + height: var(--piece-size); + background-image: var(--image); + background-size: var(--view-width) var(--view-height); + clip-path: path("M0 0 L40 0 L30 40 L0 40 Z"); +} |