AI game creator

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

No:889

419

←

Prev Next

→

Mario plays tennis
Developer User3181｜Date and time 23/6/17 22:01:05
Build time 47.25 sec｜Game capacity 2.846KB｜

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>Mario Tennis</title>
  <style>
    #canvas {
      border: 1px solid black;
    }
  </style>
</head>

// ボールの初期位置
    let ballX = canvas.width / 2;
    let ballY = canvas.height / 2;

// ボールの速度と方向
    let ballSpeedX = -3;
    let ballSpeedY = 3;

// ラケットの初期位置
    let racketX = canvas.width / 2 - 25;
    const racketY = canvas.height - 40;

// ラケットの移動速度
    const racketSpeed = 10;

// タッチイベントでラケットを動かす
    canvas.addEventListener("touchmove", (e) => {
      const touchX = e.touches[0].clientX - canvas.getBoundingClientRect().left - racketX;
      if (touchX > 0 && touchX < 50) {
        racketX = e.touches[0].clientX - canvas.getBoundingClientRect().left - 25;
      }
    });

// ゲームループ
    function gameLoop() {
      // 画面をクリア
      ctx.clearRect(0, 0, canvas.width, canvas.height);

// ボールを描画
      ctx.beginPath();
      ctx.arc(ballX, ballY, 10, 0, Math.PI * 2, false);
      ctx.fillStyle = "red";
      ctx.fill();
      ctx.closePath();

// ラケットを描画
      ctx.beginPath();
      ctx.rect(racketX, racketY, 50, 10);
      ctx.fillStyle = "blue";
      ctx.fill();
      ctx.closePath();

// ボールの移動
      ballX += ballSpeedX;
      ballY += ballSpeedY;

// 左右の壁に当たったら反射
      if (ballX - 10 < 0 || ballX + 10 > canvas.width) {
        ballSpeedX = -ballSpeedX;
      }

// 上の壁に当たったら反射
      if (ballY - 10 < 0) {
        ballSpeedY = -ballSpeedY;
      }

// ラケットに当たったら反射
      if (ballY + 10 > racketY && ballX > racketX && ballX < racketX + 50) {
        ballSpeedY = -ballSpeedY;
      }

// ボールが下の壁に当たったらゲームオーバー
      if (ballY + 10 > canvas.height) {
        clearInterval(intervalId);
        alert("Game Over!");
      }
    }

// 33ミリ秒ごとにゲームループを実行する
    const intervalId = setInterval(gameLoop, 33);
  </script>
</body>

</html>