AI game creator

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

No:844

376

←

Prev Next

→

Mario.
Developer User3099｜Date and time 23/6/17 20:17:26
Build time 164.872 sec｜Game capacity 3.696KB｜

Script

のようなサイドスクロールアクションゲームを作りましょう！以下はサンプルコードです。

スマホで操作： ← → ↑

このサンプルコードでは、マリオがブロックに乗っている時に上キーを押すとジャンプします。ブロックの上にいるかどうかは、あたり判定で判断しています。右キーと左キーを押すと、それぞれ右に進むと左に進みます。スマホで操作する場合は、タッチイベントを使って、指をスライドすることで動かすことができます。また、アプリっぽくするために、絵文字を多用しています。マリオやブロックを絵文字で表現しています。

←

Prev　Next

→ 　

Back　

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

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

のようなサイドスクロールアクションゲームを作りましょう！

以下はサンプルコードです。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>マリオ！</title>
    <style>
      canvas {
        border: 1px solid black;
      }
    </style>
  </head>
  <body>
    <p>スマホで操作： ← → ↑</p>
    <canvas id="myCanvas"></canvas>
    <script>
      const canvas = document.getElementById("myCanvas");
      const ctx = canvas.getContext("2d");

// マリオの情報
      const mario = {
        x: canvas.width / 2 - 25,
        y: canvas.height - 80,
        width: 50,
        height: 80,
        speed: 5,
        isJumping: false,
        jumpSpeed: 10,
        jumpHeight: 200,
        isFalling: false
      };

// ジャンプ処理
      function jump() {
        if (!mario.isJumping && !mario.isFalling) {
          mario.isJumping = true;
          mario.jumpHeight = mario.y - 200;
        }
      }

// 上下左右の処理
      function move(direction) {
        if (direction === "left") {
          mario.x -= mario.speed;
        } else if (direction === "right") {
          mario.x += mario.speed;
        } else if (direction === "up") {
          jump();
        }
      }

// ダウンキーを押している最中の処理
      function handleKeyDown(event) {
        if (event.key === "ArrowLeft") {
          move("left");
        } else if (event.key === "ArrowRight") {
          move("right");
        } else if (event.key === "ArrowUp") {
          move("up");
        }
      }

// ブロックの情報
      const block = {
        x: 0,
        y: canvas.height - 50,
        width: canvas.width,
        height: 50
      };

// ゲームループ
      function gameLoop() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);

// マリオの描画
        ctx.fillStyle = "red";
        ctx.fillRect(mario.x, mario.y, mario.width, mario.height);

// ブロックの描画
        ctx.fillStyle = "brown";
        ctx.fillRect(block.x, block.y, block.width, block.height);

// マリオのジャンプ処理
        if (mario.isJumping) {
          mario.y -= mario.jumpSpeed;
          if (mario.y <= mario.jumpHeight) {
            mario.isFalling = true;
            mario.isJumping = false;
          }
        }

// マリオの落下処理
        if (mario.isFalling) {
          mario.y += mario.jumpSpeed;
          if (mario.y >= canvas.height - mario.height) {
            mario.isFalling = false;
          }
        }

// あたり判定
        if (mario.x < block.x + block.width &&
            mario.x + mario.width > block.x &&
            mario.y < block.y + block.height &&
            mario.y + mario.height > block.y) {
          mario.isFalling = false;
          mario.y = block.y - mario.height;
        }

requestAnimationFrame(gameLoop);
      }

gameLoop();

// イベント設定
      document.addEventListener("keydown", handleKeyDown);
    </script>
  </body>
</html>

このサンプルコードでは、マリオがブロックに乗っている時に上キーを押すとジャンプします。ブロックの上にいるかどうかは、あたり判定で判断しています。右キーと左キーを押すと、それぞれ右に進むと左に進みます。スマホで操作する場合は、タッチイベントを使って、指をスライドすることで動かすことができます。

また、アプリっぽくするために、絵文字を多用しています。マリオやブロックを絵文字で表現しています。