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

No:6437

154

←

Prev Next

→

The Great Naval Era
Developer User3884｜Date and time 23/7/2 12:57:01
Build time 25.335 sec｜Game capacity 2.605KB｜

Script

了解です。以下に、「大航海時代」というゲームを部分的にゲーム化したプログラムを提供します。このプログラムでは、スマホ操作に対応しており、絵文字も使用しています。

大航海時代

🚢

このプログラムでは、`game-board`というidを持つ要素を作成し、その中に船の絵文字である🚢を表示しています。スマホで画面上の船をタッチし、スワイプすることによって船の位置が移動します。船の初期位置は画面の左上になっており、タップした位置に応じて移動します。

←

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>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
        }
        #game-board {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 300px;
            height: 300px;
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <h1>大航海時代</h1>
    <div id="game-board">
        🚢
    </div>

// ゲームボード要素の参照を取得
        const gameBoard = document.getElementById('game-board');

// ゲームボード要素をタッチしたときのイベントハンドラ
        gameBoard.addEventListener('touchstart', (e) => {
            // タッチ位置を取得
            const touchX = e.touches[0].clientX;
            const touchY = e.touches[0].clientY;

// プレイヤー位置を更新
            positionX = touchX - gameBoard.offsetLeft;
            positionY = touchY - gameBoard.offsetTop;

// プレイヤー位置を反映
            gameBoard.style.transform = `translate(${positionX}px, ${positionY}px)`;
        });

// ゲームボード要素をスワイプしたときのイベントハンドラ
        gameBoard.addEventListener('touchmove', (e) => {
            // スワイプ量を取得
            const swipeX = e.touches[0].clientX - e.changedTouches[0].clientX;
            const swipeY = e.touches[0].clientY - e.changedTouches[0].clientY;

// プレイヤー位置を更新
            positionX -= swipeX;
            positionY -= swipeY;

// プレイヤー位置を反映
            gameBoard.style.transform = `translate(${positionX}px, ${positionY}px)`;
        });
    </script>
</body>
</html>
```