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

No:22220

←

Prev Next

→

田舎館村
Developer User10286｜Date and time 23/10/21 19:13:41
Build time 76.595 sec｜Game capacity 3.932KB｜

Script

了解です。以下に田舎館村というゲームのサンプルプログラムを記述します。

田舎館村

このプログラムでは、サイズが5x5のマップでプレイヤーを操作するゲームを実装しています。プレイヤーは赤い色で表示されます。プレイヤーは矢印キーで上下左右に移動することができます。移動先のマスには、灰色のセルが表示されます。プログラムを実行すると、ブラウザ上でゲームが表示され、キーボードの矢印キーを押すことでプレイヤーが移動します。なお、このプログラムはスマートフォンでも操作可能ですが、タッチイベントを利用する場合は、`keydown`イベントの代わりに`mousedown`や`mouseup`などのタッチイベントを使用する必要があります。

←

Prev　Next

→ 　

Back　

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

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>
        #map {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            grid-template-rows: repeat(5, 1fr);
            gap: 5px;
            width: 300px;
        }
        .cell {
            background-color: lightgray;
            text-align: center;
            padding: 10px;
            font-size: 20px;
        }
        #player {
            background-color: red;
        }
    </style>
</head>
<body>
    <h1>田舎館村</h1>
    <div id="map">
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell player" id="player"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
    </div>

function moveLeft() {
            if (currentPosition % 5 !== 0) {
                var targetCell = document.getElementsByClassName("cell")[currentPosition - 1];
                targetCell.appendChild(player);
                currentPosition--;
            }
        }

function moveRight() {
            if (currentPosition % 5 !== 4) {
                var targetCell = document.getElementsByClassName("cell")[currentPosition + 1];
                targetCell.appendChild(player);
                currentPosition++;
            }
        }

function moveUp() {
            if (currentPosition >= 5) {
                var targetCell = document.getElementsByClassName("cell")[currentPosition - 5];
                targetCell.appendChild(player);
                currentPosition -= 5;
            }
        }

function moveDown() {
            if (currentPosition < 15) {
                var targetCell = document.getElementsByClassName("cell")[currentPosition + 5];
                targetCell.appendChild(player);
                currentPosition += 5;
            }
        }

このプログラムでは、サイズが5x5のマップでプレイヤーを操作するゲームを実装しています。プレイヤーは赤い色で表示されます。プレイヤーは矢印キーで上下左右に移動することができます。移動先のマスには、灰色のセルが表示されます。

プログラムを実行すると、ブラウザ上でゲームが表示され、キーボードの矢印キーを押すことでプレイヤーが移動します。

なお、このプログラムはスマートフォンでも操作可能ですが、タッチイベントを利用する場合は、`keydown`イベントの代わりに`touchstart`や`touchend`などのタッチイベントを使用する必要があります。