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

No:8437

6576

←

Prev Next

→

Rosetta Stone
Developer anonymous｜Date and time 70/1/1 9:41:29
Build time unknown sec｜Game capacity 2.489KB｜

Script

了解しました。以下に、ブラウザ上で遊べるシンプルな「ロゼッタストーン」ゲームの実装例を示します。

ロゼッタストーン

この実装では、指定された8種類の絵文字をランダムに表示し、各タイルをクリックするたびに新しい絵文字に変更します。ブラウザの表示領域に9つのタイルが表示され、クリックすると絵文字が切り替わる仕組みです。スマートフォンでの操作に適した実装となっています。

←

Prev　Next

→ 　

Back　

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

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

了解しました。以下に、ブラウザ上で遊べるシンプルな「ロゼッタストーン」ゲームの実装例を示します。

```html
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>ロゼッタストーン</title>
    <style>
        #board {
            display: flex;
            justify-content: center;
            align-items: center;
            flex-wrap: wrap;
            width: 300px;
            height: 300px;
            border: 1px solid black;
            margin: 20px auto;
        }
        .tile {
            font-size: 3em;
            cursor: pointer;
            width: 33%;
            height: 33%;
            text-align: center;
        }
    </style>
</head>
<body>
    <h1>ロゼッタストーン</h1>
    <div id="board"></div>

const board = document.getElementById('board');

// 初期化
        const setup = () => {
            for (let i = 0; i < boardSize; i++) {
                const tile = document.createElement('div');
                tile.className = 'tile';
                tile.innerHTML = tiles[Math.floor(Math.random() * tiles.length)];
                tile.addEventListener('click', handleClick);
                board.appendChild(tile);
            }
        };

// クリックイベントハンドラ
        const handleClick = (event) => {
            const target = event.target;
            const newTile = document.createElement('div');
            newTile.className = 'tile';
            newTile.innerHTML = tiles[Math.floor(Math.random() * tiles.length)];
            newTile.addEventListener('click', handleClick);
            board.replaceChild(newTile, target);
        };

setup();
    </script>
</body>
</html>
```