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

No:38730

←

Prev Next

→

It tag
Developer User17425｜Date and time 24/1/25 8:40:17
Build time 21.403 sec｜Game capacity 5.751KB｜

Script

Sure, here's a simple example of a game implemented as a single HTML file using JavaScript and enclosed in script tags:

Picture Puzzle Game

In this game, you will see a canvas with a grid of cells containing random pictograms. The objective of the game is to rearrange the pictograms by clicking on adjacent cells, until they are back in their original order. Once the puzzle is solved, a congratulatory message will be displayed. Please note that this is a basic example and can be expanded upon to add more features and complexity as desired.

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋Kindle本ランキング

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

Sure, here's a simple example of a game implemented as a single HTML file using JavaScript and enclosed in script tags:

```html
<!DOCTYPE html>
<html>
<head>
    <title>Picture Puzzle Game</title>
</head>
<body>
    <h1>Picture Puzzle Game</h1>
    <canvas id="gameCanvas" width="400" height="400"></canvas>

// Define pictograms/images for the game
        const pictograms = [
            '🐶', '🐱', '🐭', '🐰', '🐢', '🐸'
        ];
        
        // Shuffle pictograms randomly
        const shuffledPictograms = shuffle(pictograms);

// Create a new game board
        const gameBoard = document.getElementById('gameCanvas');
        const context = gameBoard.getContext('2d');

// Set cell width and height
        const cellSize = 80;
        const puzzleSize = Math.sqrt(pictograms.length);
        
        // Store the current state of the puzzle
        let puzzleState = createEmptyPuzzle();

// Render the initial game board
        renderGameBoard();
        
        // Listen for clicks on the canvas
        gameBoard.addEventListener('click', handleClick);
        
        // Function to handle click events
        function handleClick(event) {
            const rect = gameBoard.getBoundingClientRect();   
            const x = event.clientX - rect.left;
            const y = event.clientY - rect.top;

// Calculate the cell clicked based on coordinates
            const clickedCell = {
                x: Math.floor(x / cellSize),
                y: Math.floor(y / cellSize)
            };

// Check if the clicked cell is adjacent to the empty cell
            if (isAdjacent(clickedCell, emptyCell())) {
                // Swap the clicked cell with the empty cell
                swapCells(clickedCell, emptyCell());
                
                // Re-render the game board
                renderGameBoard();

// Check if the puzzle is solved
                if (isPuzzleSolved()) {
                    alert('Congratulations, you solved the puzzle!');
                }
            }
        }

// Function to render the game board
        function renderGameBoard() {
            context.clearRect(0, 0, gameBoard.width, gameBoard.height);
            
            for (let x = 0; x < puzzleSize; x++) {
                for (let y = 0; y < puzzleSize; y++) {
                    renderCell({x, y}, puzzleState[x][y]);
                }
            }
        }
        
        // Function to render an individual cell
        function renderCell(position, pictogram) {
            const x = position.x * cellSize;
            const y = position.y * cellSize;

context.fillStyle = 'lightgray';
            context.fillRect(x, y, cellSize, cellSize);

context.font = '40px Arial';
            context.fillStyle = 'black';
            context.fillText(pictogram, x + cellSize / 2, y + cellSize / 2, cellSize);
        }

// Function to create an empty puzzle state
        function createEmptyPuzzle() {
            const puzzle = [];
            
            for (let x = 0; x < puzzleSize; x++) {
                const row = [];
                
                for (let y = 0; y < puzzleSize; y++) {
                    row.push(shuffledPictograms[x * puzzleSize + y]);
                }
                
                puzzle.push(row);
            }
            
            return puzzle;
        }

// Function to shuffle an array randomly
        function shuffle(array) {
            const newArray = array.slice();
            
            for (let i = newArray.length - 1; i > 0; i--) {
                const j = Math.floor(Math.random() * (i + 1));
                [newArray[i], newArray[j]] = [newArray[j], newArray[i]];
            }
            
            return newArray;
        }
        
        // Function to check if two cells are adjacent
        function isAdjacent(cell1, cell2) {
            const xDiff = Math.abs(cell1.x - cell2.x);
            const yDiff = Math.abs(cell1.y - cell2.y);
            
            return (xDiff === 0 && yDiff === 1) || (xDiff === 1 && yDiff === 0);
        }
        
        // Function to swap two cells
        function swapCells(cell1, cell2) {
            [puzzleState[cell1.x][cell1.y], puzzleState[cell2.x][cell2.y]] = [puzzleState[cell2.x][cell2.y], puzzleState[cell1.x][cell1.y]];
        }
        
        // Function to get the empty cell position
        function emptyCell() {
            for (let x = 0; x < puzzleSize; x++) {
                for (let y = 0; y < puzzleSize; y++) {
                    if (puzzleState[x][y] === '') {
                        return {x, y};
                    }
                }
            }
        }
        
        // Function to check if the puzzle is solved
        function isPuzzleSolved() {
            let count = 1;
            
            for (let x = 0; x < puzzleSize; x++) {
                for (let y = 0; y < puzzleSize; y++) {
                    if (puzzleState[x][y] !== shuffledPictograms[count - 1]) {
                        return false;
                    }
                    
                    count++;
                }
            }
            
            return true;
        }

</script>
</body>
</html>
```

Please note that this is a basic example and can be expanded upon to add more features and complexity as desired.