Oden Maker in Canvas's game

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

No:6463

126

←

Prev Next

→

Oden Maker in Canvas
Developer User3882｜Date and time 23/7/2 14:06:48
Build time 23.767 sec｜Game capacity 2.453KB｜

Script

了解しました。おでんメーカーのゲームを作成しましょう。以下が実装例です。

上記のコードでは、canvasタグを使っておでんメーカーのゲームを実装しています。キャンバスをクリックすると、ランダムに選ばれたおでんの要素が表示されます。それぞれのおでんの要素には絵文字と価格が表示されます。なお、この実装ではおでんのメニューの要素をランダムに選んで表示するまでです。ゲーム性を持たせるためには、選んだメニューの価格に応じたスコア計算や、目標金額に合わせたイベントなどを追加することができます。

←

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>
        #canvas {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
        }
    </style>
</head>
<body>
    <canvas id="canvas"></canvas>

// おでんの要素の定義
        var ingredients = [
            { name: "かまぼこ", symbol: "🍢", price: 100 },
            { name: "牛すじ", symbol: "🍖", price: 200 },
            { name: "こんにゃく", symbol: "🍢", price: 100 },
            { name: "大根", symbol: "🍡", price: 150 },
            { name: "ちくわ", symbol: "🍢", price: 100 },
            { name: "卵", symbol: "🥚", price: 50 },
        ];

// 選択中のおでんの要素
        var selectedIngredient = null;

// キャンバスのクリックイベント
        canvas.addEventListener("click", function(event) {
            var x = event.clientX;
            var y = event.clientY;

// 選択中のおでんの要素を更新
            selectedIngredient = ingredients[Math.floor(Math.random() * ingredients.length)];

// おでんを描画
            context.font = "48px Arial";
            context.fillText(selectedIngredient.symbol, x, y);
            context.fillText("¥" + selectedIngredient.price, x, y + 50);
        });

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

上記のコードでは、canvasタグを使っておでんメーカーのゲームを実装しています。キャンバスをクリックすると、ランダムに選ばれたおでんの要素が表示されます。それぞれのおでんの要素には絵文字と価格が表示されます。

なお、この実装ではおでんのメニューの要素をランダムに選んで表示するまでです。ゲーム性を持たせるためには、選んだメニューの価格に応じたスコア計算や、目標金額に合わせたイベントなどを追加することができます。