Kuniokuns Breaking Down's game

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

No:4446

1306

←

Prev Next

→

Kuniokuns Breaking Down
Developer User1006｜Date and time 23/6/28 1:11:27
Build time 33.549 sec｜Game capacity 2.596KB｜

Script

町の中をくにおくんが走り回り、障害物を回避しながら進むゲームを作ります。必要な絵文字：🏃 （くにおくん）、🚧 （障害物）以下が具体的な実装方法です。 1. HTMLファイルを作成します。

2. JavaScriptファイルを作成し、ゲームのロジックを実装します。 3. 画像ファイルを用意します。kunio.pngとobstacle.pngという名前でgame.jsと同じフォルダに保存します。 4. 実際にゲームを遊びます。・スマホの場合画面をタップするとくにおくんがジャンプします。・PCの場合 ArrowUpキーでジャンプ、ArrowDownキーで下がります。障害物に当たったらゲームオーバーです。再度遊ぶにはページを再読み込みしてください。以上が、くにおくんのブレイキングダウンの部分的なゲーム化の実装方法です。

←

Prev　Next

→ 　

Back　

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

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

町の中をくにおくんが走り回り、障害物を回避しながら進むゲームを作ります。

必要な絵文字：🏃 （くにおくん）、🚧 （障害物）

以下が具体的な実装方法です。

1. HTMLファイルを作成します。

```
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>くにおくんのブレイキングダウン</title>
</head>
<body>
  <canvas id="gameCanvas"></canvas>
  <script src="game.js"></script>
</body>
</html>
```

2. JavaScriptファイルを作成し、ゲームのロジックを実装します。

```
const canvas = document.getElementById("gameCanvas");
const context = canvas.getContext("2d");

let kunioImage;
let obstacleImage;
let kunioX = 50;
let kunioY = canvas.height / 2;
let obstacleX = canvas.width - 50;
let obstacleY = canvas.height / 2;
let isGameOver = false;

function gameLoop() {
  if (isGameOver) {
    return;
  }

obstacleX -= 5;

if (obstacleX < 0) {
    obstacleX = canvas.width - 50;
    obstacleY = Math.random() * canvas.height;
  }

context.clearRect(0, 0, canvas.width, canvas.height);
  context.drawImage(kunioImage, kunioX, kunioY, 50, 50);
  context.drawImage(obstacleImage, obstacleX, obstacleY, 50, 50);

if (Math.abs(kunioX - obstacleX) < 50 && Math.abs(kunioY - obstacleY) < 50) {
    gameOver();
  }
}

function gameOver() {
  isGameOver = true;
  context.fillStyle = "red";
  context.font = "40px Arial";
  context.textAlign = "center";
  context.fillText("GAME OVER", canvas.width / 2, canvas.height / 2);
}

document.addEventListener("keydown", (event) => {
  if (event.key === "ArrowUp") {
    kunioY -= 10;
  } else if (event.key === "ArrowDown") {
    kunioY += 10;
  }
});

loadImage();
```

3. 画像ファイルを用意します。kunio.pngとobstacle.pngという名前でgame.jsと同じフォルダに保存します。

4. 実際にゲームを遊びます。

・スマホの場合

画面をタップするとくにおくんがジャンプします。

・PCの場合

ArrowUpキーでジャンプ、ArrowDownキーで下がります。

障害物に当たったらゲームオーバーです。再度遊ぶにはページを再読み込みしてください。

以上が、くにおくんのブレイキングダウンの部分的なゲーム化の実装方法です。