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

No:3048

3830

←

Prev Next

→

Debunking the King of Debate Game
Developer User3657｜Date and time 23/6/23 14:51:54
Build time 31.66 sec｜Game capacity 3.702KB｜

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>
      body {
        font-family: "Arial", sans-serif;
        text-align: center;
        margin: 0;
      }

canvas {
        border: 2px solid black;
      }
    </style>
  </head>
  <body>
    <h1>論破王を論破するゲーム</h1>
    <p>論破王があなたに向かって論破してきます。あなたは言葉で論破し返しましょう！</p>
    <canvas id="canvas" width="400" height="400"></canvas>
    <script>
      const canvas = document.getElementById("canvas");
      const ctx = canvas.getContext("2d");

const player = {
        x: canvas.width / 2,
        y: canvas.height - 50,
        width: 50,
        height: 50,
        speed: 10,
        dx: 0,
        dy: 0,
      };

const enemy = {
        x: canvas.width / 2 - 25,
        y: 20,
        width: 50,
        height: 50,
        speed: 5,
        dx: 5,
        dy: 5,
      };

let isGameOver = false;

function detectCollision(obj1, obj2) {
        return (
          obj1.x < obj2.x + obj2.width &&
          obj1.x + obj1.width > obj2.x &&
          obj1.y < obj2.y + obj2.height &&
          obj1.y + obj1.height > obj2.y
        );
      }

function drawPlayer() {
        ctx.fillStyle = "yellow";
        ctx.fillRect(player.x, player.y, player.width, player.height);
      }

function drawEnemy() {
        ctx.fillStyle = "red";
        ctx.fillRect(enemy.x, enemy.y, enemy.width, enemy.height);
      }

function movePlayer() {
        if (player.x + player.dx > 0 && player.x + player.dx < canvas.width) {
          player.x += player.dx;
        }

if (player.y + player.dy > 0 && player.y + player.dy < canvas.height) {
          player.y += player.dy;
        }
      }

function moveEnemy() {
        enemy.x += enemy.dx;
        enemy.y += enemy.dy;

if (enemy.x + enemy.width > canvas.width || enemy.x < 0) {
          enemy.dx *= -1;
        }

if (enemy.y < 0) {
          enemy.dy *= -1;
        }

if (detectCollision(player, enemy)) {
          gameOver();
        }

if (enemy.y + enemy.height > canvas.height) {
          victory();
        }
      }

function setupKeyboardListeners() {
        document.addEventListener("keydown", (event) => {
          if (event.key === "ArrowLeft") {
            player.dx = -player.speed;
          }

if (event.key === "ArrowRight") {
            player.dx = player.speed;
          }

if (event.key === "ArrowUp") {
            player.dy = -player.speed;
          }

if (event.key === "ArrowDown") {
            player.dy = player.speed;
          }
        });

document.addEventListener("keyup", (event) => {
          if (event.key === "ArrowLeft" || event.key === "ArrowRight") {
            player.dx = 0;
          }

if (event.key === "ArrowUp" || event.key === "ArrowDown") {
            player.dy = 0;
          }
        });
      }

function gameOver() {
        isGameOver = true;
        alert("あなたの負けです！");
        document.location.reload();
      }

function victory() {
        isGameOver = true;
        alert("あなたの勝ちです！");
        document.location.reload();
      }

function draw() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);

drawPlayer();
        drawEnemy();

movePlayer();
        moveEnemy();

if (!isGameOver) {
          requestAnimationFrame(draw);
        }
      }

setupKeyboardListeners();
      draw();
    </script>
  </body>
</html>