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

No:5870

908

←

Prev Next

→

Ramen noodle making game ①Make the dough. Cut the ..ALL
Developer もちきなこ｜Date and time 23/7/1 0:44:20
Build time 22.156 sec｜Game capacity 2.018KB｜

Script

了解です。ラーメンの麺を作るゲームを作成します。

ラーメンの麺を作るゲーム

このゲームでは、canvas要素を使用してラーメンの麺を作るプロセスを表示します。生地を作り、それを切り、茹で、そして最終的に「完成！」と表示します。各工程の処理が実行されるたびに、麺がcanvas上に描画されます。

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋ゲームアプリランキング

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

了解です。ラーメンの麺を作るゲームを作成します。

```html
<!DOCTYPE html>
<html>
<head>
  <title>ラーメンの麺を作るゲーム</title>
  <style>
    canvas {
      border: 1px solid black;
    }
  </style>
</head>
<body>
  <h1>ラーメンの麺を作るゲーム</h1>
  <canvas id="canvas" width="400" height="400"></canvas>

// 麺の描画関数
    function drawNoodle() {
      ctx.clearRect(0, 0, canvas.width, canvas.height); // 画面クリア

// 麺の色と太さの設定
      ctx.strokeStyle = 'black';
      ctx.lineWidth = 5;

// 麺の描画
      ctx.beginPath();
      ctx.moveTo(100, 200);
      ctx.lineTo(300, 200);
      ctx.stroke();
    }

// 生地作りのゲーム部分
    function makeDough() {
      // 生地作りの処理

// 生地の描画
      drawNoodle();

// 切りのゲーム部分を実行
      setTimeout(cutDough, 2000);
    }

// 生地切りのゲーム部分
    function cutDough() {
      // 切りの処理

// 生地の描画
      drawNoodle();

// 茹でのゲーム部分を実行
      setTimeout(boilDough, 2000);
    }

// 茹でのゲーム部分
    function boilDough() {
      // 茹での処理

// 生地の描画
      drawNoodle();

// 完成の表示
      setTimeout(() => {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        ctx.font = '24px Arial';
        ctx.fillText("完成！", 150, 200);
      }, 2000);
    }

// ゲームの実行開始
    makeDough();
  </script>
</body>
</html>
```