AI game creator

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

No:39857

103

←

Prev Next

→

パズル
Developer 食べる鶏と熱いタバスコ｜Date and time 24/1/30 17:58:42
Build time 16.165 sec｜Game capacity 3.832KB｜

Script

了解です。以下に、絵文字を用いたパズルの例を示します。

以上のコードを1枚のHTMLファイルとして実装することで、絵文字パズルを楽しむことができます。スマートフォンで操作することを前提としており、クリック操作で絵文字を動かすことができます。また、ゲームがクリアされるとおめでとうのメッセージが表示されます。

←

Prev　Next

→ 　

Back　

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

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

了解です。以下に、絵文字を用いたパズルの例を示します。

```html

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Emoji Puzzle Game</title>
    <style>
        body {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100vh;
            font-size: 3rem;
        }
    </style>
</head>

// ゲームボードを描画する関数
        function renderGameBoard() {
            const gameBoardDiv = document.getElementById('gameBoard');
            gameBoardDiv.innerHTML = '';

gameBoard.forEach((emoji, index) => {
                const emojiDiv = document.createElement('div');
                emojiDiv.textContent = emoji;
                emojiDiv.classList.add('emoji');
                emojiDiv.setAttribute('data-index', index);
                emojiDiv.addEventListener('click', handleEmojiClick);
                gameBoardDiv.appendChild(emojiDiv);
            });
        }

// 絵文字をランダムに並び替える関数
        function shuffleGameBoard() {
            for (let i = gameBoard.length - 1; i > 0; i--) {
                const j = Math.floor(Math.random() * (i + 1));
                [gameBoard[i], gameBoard[j]] = [gameBoard[j], gameBoard[i]];
            }
        }

// 絵文字のクリック時の処理を行う関数
        function handleEmojiClick(event) {
            const clickedIndex = parseInt(event.target.getAttribute('data-index'));
            const emptyIndex = gameBoard.indexOf('');

if (isAdjacent(clickedIndex, emptyIndex)) {
                [gameBoard[clickedIndex], gameBoard[emptyIndex]] = [gameBoard[emptyIndex], gameBoard[clickedIndex]];
                renderGameBoard();
                checkGameComplete();
            }
        }

// クリックされた絵文字の位置と空きマスの位置が隣り合っているかを判定する関数
        function isAdjacent(clickedIndex, emptyIndex) {
            const row = Math.floor(clickedIndex / 3);
            const column = clickedIndex % 3;
            const adjacentIndices = [
                emptyIndex - 3, emptyIndex + 3,
                emptyIndex - 1, emptyIndex + 1
            ];

return (
                (clickedIndex === adjacentIndices[0] && row !== 0) ||
                (clickedIndex === adjacentIndices[1] && row !== 2) ||
                (clickedIndex === adjacentIndices[2] && column !== 0) ||
                (clickedIndex === adjacentIndices[3] && column !== 2)
            );
        }

// ゲームがクリアされたかを確認する関数
        function checkGameComplete() {
            if (gameBoard.join('') === '😊😄😀😅😂🙃😉😇') {
                alert('Congratulations! You completed the puzzle!');
            }
        }

// 初期化
        shuffleGameBoard();
        renderGameBoard();
    </script>
</body>

</html>
```