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

No:7029

1072

←

Prev Next

→

Kamehameha vs. Garrick Gun
Developer User3958｜Date and time 23/7/4 23:12:01
Build time 20.026 sec｜Game capacity 2.188KB｜

Script

下記は、JavaScriptを使用した簡単なカメハメハvsギャリック砲というゲームの実装例です。

👦

このゲームでは、プレイヤーをスマホの向きを利用して移動させることで、カメハメハを放ちます。スペースキーを押すことで、ギャリック砲（💥絵文字）を放つことができます。プレイヤーは画面の中央に表示され、JavaScriptによって操作されます。ただし、スマホの向きを検知してプレイヤーを動かす部分など、一部スマートフォン専用の機能を利用しているため、デスクトップブラウザでは上手く動かない場合があります。スマートフォン上で試してみてください。

←

Prev　Next

→ 　

Back　

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

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

下記は、JavaScriptを使用した簡単なカメハメハvsギャリック砲というゲームの実装例です。

```html
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>カメハメハvsギャリック砲</title>
  <style>
    #player {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-size: 60px;
    }
  </style>
</head>
<body>
  <h1 id="player">👦</h1>

// プレイヤー移動
      if (event.key === "ArrowUp") {
        player.style.top = parseInt(player.style.top) - 10 + "%";
      } else if (event.key === "ArrowDown") {
        player.style.top = parseInt(player.style.top) + 10 + "%";
      } else if (event.key === "ArrowLeft") {
        player.style.left = parseInt(player.style.left) - 10 + "%";
      } else if (event.key === "ArrowRight") {
        player.style.left = parseInt(player.style.left) + 10 + "%";
      }

// 攻撃
      if (event.key === " ") {
        const projectile = document.createElement("span");
        projectile.innerText = "💥";
        projectile.style.position = "absolute";
        projectile.style.top = player.style.top;
        projectile.style.left = parseInt(player.style.left) + 150 + "px";

setTimeout(function() {
          projectile.remove();
        }, 1000);

document.body.appendChild(projectile);
      }
    });
  </script>
</body>
</html>
```

このゲームでは、プレイヤーをスマホの向きを利用して移動させることで、カメハメハを放ちます。スペースキーを押すことで、ギャリック砲（💥絵文字）を放つことができます。プレイヤーは画面の中央に表示され、JavaScriptによって操作されます。

ただし、スマホの向きを検知してプレイヤーを動かす部分など、一部スマートフォン専用の機能を利用しているため、デスクトップブラウザでは上手く動かない場合があります。スマートフォン上で試してみてください。