Click here for free DL of the app version that can save data.

No:20935

89

A jigsaw puzzle to reveal A picture
Developer User9184｜Date and time 23/10/12 4:51:22
Build time 146.86 sec｜Game capacity 6.12KB｜

Sure! Here's an example of a jigsaw puzzle game implemented as a single HTML file. It uses JavaScript and includes a picture as the final result. The game is designed to be played on a smartphone and utilizes pictograms as puzzle pieces.

Jigsaw Puzzle Game

In this game, there are four puzzle pieces represented by pictograms (`emozi_all/game.png`, `emozi_apple.png`, `emozi_bear.png`, `emozi_chicken.png`). You can replace these with your own pictograms. The puzzle pieces are initially shuffled, and the goal of the game is to drag and drop the pieces into their correct positions. Once the puzzle is solved, the player will receive a congratulatory message. The puzzle pieces are draggable by tapping and dragging on a touch screen or by clicking and dragging using a mouse. Please ensure to replace the pictogram image URLs (`url(pictogram1.png)`, `url(pictogram2.png)`, etc.) with the actual image URLs or filenames that you want to use for your jigsaw puzzle game. Remember to save this code in a file with a `.html` extension and ensure that the pictogram images are in the same directory as the HTML file.

→ 　

0　

0　

[PR]現在の人気グッズランキング

Click here for free DL of the app version that can save data.

(C)2023 HisashiApp

Sure! Here's an example of a jigsaw puzzle game implemented as a single HTML file. It uses JavaScript and includes a picture as the final result. The game is designed to be played on a smartphone and utilizes pictograms as puzzle pieces.

```html
<!DOCTYPE html>
<html>
<head>
    <title>Jigsaw Puzzle Game</title>
    <style>
        #puzzle-container {
            width: 300px;
            height: 300px;
            border: 1px solid #000;
            margin: 0 auto;
            position: relative;
            overflow: hidden;
        }
        .puzzle-piece {
            width: 100px;
            height: 100px;
            border: 1px solid #000;
            position: absolute;
            background-repeat: no-repeat;
        }
    </style>
</head>
<body>
    <h1>Jigsaw Puzzle Game</h1>
    <div id="puzzle-container">
        <div class="puzzle-piece" id="piece1" style="background-image: url(pictogram1.png);"></div>
        <div class="puzzle-piece" id="piece2" style="background-image: url(pictogram2.png);"></div>
        <div class="puzzle-piece" id="piece3" style="background-image: url(pictogram3.png);"></div>
        <div class="puzzle-piece" id="piece4" style="background-image: url(pictogram4.png);"></div>
    </div>

<script>
        // Puzzle piece positions
        const piecePositions = [
            { x: 0, y: 0 },
            { x: 100, y: 0 },
            { x: 200, y: 0 },
            { x: 0, y: 100 }
        ];

// Shuffle puzzle pieces
        shufflePieces();

// Make puzzle pieces draggable
        let pieces = document.getElementsByClassName('puzzle-piece');
        for (let i = 0; i < pieces.length; i++) {
            pieces[i].addEventListener('touchstart', startDrag);
            pieces[i].addEventListener('mousedown', startDrag);
        }

function startDrag(event) {
            event.preventDefault();
            this.style.zIndex = 10;
            this.style.border = "2px dashed #000";
            this.style.cursor = "move";

document.addEventListener('touchmove', drag);
            document.addEventListener('mousemove', drag);

let currentPosition = getPosition(this);
            let offsetX = event.clientX - currentPosition.x;
            let offsetY = event.clientY - currentPosition.y;

function drag(event) {
                let x = event.clientX - offsetX;
                let y = event.clientY - offsetY;
                this.style.transform = `translate(${x}px, ${y}px)`;
            }

function stopDrag() {
                document.removeEventListener('touchmove', drag);
                document.removeEventListener('mousemove', drag);
                this.style.zIndex = 0;
                this.style.border = "1px solid #000";
                this.style.cursor = "default";

let finalPosition = getFinalPosition(this);
                if (isInCorrectPosition(finalPosition, this.id)) {
                    this.style.transform = `translate(${finalPosition.x}px, ${finalPosition.y}px)`;
                    this.removeEventListener('touchstart', startDrag);
                    this.removeEventListener('mousedown', startDrag);

// Check if the puzzle is solved
                    if (isPuzzleSolved()) {
                        alert('Congratulations! You solved the puzzle!');
                    }
                } else {
                    this.style.transform = `translate(${currentPosition.x}px, ${currentPosition.y}px)`;
                }

document.removeEventListener('touchend', stopDrag);
                document.removeEventListener('mouseup', stopDrag);
            }

document.addEventListener('touchend', stopDrag);
            document.addEventListener('mouseup', stopDrag);
        }

function getPosition(element) {
            let rect = element.getBoundingClientRect();
            return {
                x: rect.left + window.scrollX,
                y: rect.top + window.scrollY
            };
        }

function getFinalPosition(element) {
            let index = Number(element.id.replace('piece', '')) - 1;
            return piecePositions[index];
        }

function isInCorrectPosition(position, id) {
            let element = document.getElementById(id);
            let rect = element.getBoundingClientRect();

return (
                position.x === rect.left + window.scrollX &&
                position.y === rect.top + window.scrollY
            );
        }

function isPuzzleSolved() {
            for (let i = 0; i < pieces.length; i++) {
                let finalPosition = getFinalPosition(pieces[i]);
                if (!isInCorrectPosition(finalPosition, pieces[i].id)) {
                    return false;
                }
            }
            return true;
        }

function shufflePieces() {
            for (let i = pieces.length - 1; i > 0; i--) {
                let j = Math.floor(Math.random() * (i + 1));
                let temp = pieces[i].style.transform;
                pieces[i].style.transform = pieces[j].style.transform;
                pieces[j].style.transform = temp;
            }
        }
    </script>
</body>
</html>
```

In this game, there are four puzzle pieces represented by pictograms (`pictogram1.png`, `pictogram2.png`, `pictogram3.png`, `pictogram4.png`). You can replace these with your own pictograms. The puzzle pieces are initially shuffled, and the goal of the game is to drag and drop the pieces into their correct positions.

Once the puzzle is solved, the player will receive a congratulatory message. The puzzle pieces are draggable by tapping and dragging on a touch screen or by clicking and dragging using a mouse.

Please ensure to replace the pictogram image URLs (`url(pictogram1.png)`, `url(pictogram2.png)`, etc.) with the actual image URLs or filenames that you want to use for your jigsaw puzzle game.

Remember to save this code in a file with a `.html` extension and ensure that the pictogram images are in the same directory as the HTML file.