Simple pong with bombs's game

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

No:51738

212

←

Prev Next

→

Simple pong with bombs
Developer User21066｜Date and time 24/3/16 5:11:14
Build time 13.473 sec｜Game capacity 3.843KB｜

Script

←

Prev　Next

→ 　

Back　

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

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

<html>
  <head>
    <style>
      canvas {
        border: 1px solid black;
      }
    </style>
  </head>
  <body>
    <canvas id="gameCanvas" width="400" height="400"></canvas>
    <script>
      let canvas = document.getElementById("gameCanvas");
      let ctx = canvas.getContext("2d");

let player1 = {
        x: 10,
        y: canvas.height / 2 - 50,
        width: 10,
        height: 100,
        color: "blue",
        score: 0
      };

let player2 = {
        x: canvas.width - 20,
        y: canvas.height / 2 - 50,
        width: 10,
        height: 100,
        color: "red",
        score: 0
      };

let ball = {
        x: canvas.width / 2,
        y: canvas.height / 2,
        radius: 10,
        dx: 5,
        dy: 5,
        color: "green"
      };

let bomb = {
        x: canvas.width / 2,
        y: canvas.height / 2,
        radius: 15,
        dx: -5,
        dy: -5,
        color: "black"
      };

function drawPaddle(x, y, width, height, color) {
        ctx.fillStyle = color;
        ctx.fillRect(x, y, width, height);
      }

function drawBall(x, y, radius, color) {
        ctx.beginPath();
        ctx.arc(x, y, radius, 0, Math.PI * 2);
        ctx.fillStyle = color;
        ctx.fill();
        ctx.closePath();
      }

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

drawPaddle(player1.x, player1.y, player1.width, player1.height, player1.color);
        drawPaddle(player2.x, player2.y, player2.width, player2.height, player2.color);

drawBall(ball.x, ball.y, ball.radius, ball.color);
        drawBall(bomb.x, bomb.y, bomb.radius, bomb.color);

ctx.font = "30px Arial";
        ctx.fillText(player1.score, 50, 50);
        ctx.fillText(player2.score, canvas.width - 70, 50);
      }

function update() {
        ball.x += ball.dx;
        ball.y += ball.dy;
        if (ball.y + ball.radius > canvas.height || ball.y - ball.radius < 0) {
          ball.dy *= -1;
        }

if (ball.x + ball.radius > player2.x && ball.y > player2.y && ball.y < player2.y + player2.height) {
          ball.dx *= -1;
        }

if (ball.x - ball.radius < player1.x + player1.width && ball.y > player1.y && ball.y < player1.y + player1.height) {
          ball.dx *= -1;
        }

if (ball.x + ball.radius > canvas.width) {
          player1.score++;
          resetBall();
        }

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

if (bomb.y + bomb.radius > canvas.height || bomb.y - bomb.radius < 0) {
          bomb.dy *= -1;
        }

if (bomb.x - bomb.radius < player1.x + player1.width && bomb.y > player1.y && bomb.y < player1.y + player1.height) {
          player2.score++;
          resetBall();
        }

bomb.x += bomb.dx;
        bomb.y += bomb.dy;

if (player1.score >= 5 || player2.score >= 5) {
          alert("Game Over!\nPlayer 1: " + player1.score + "\nPlayer 2: " + player2.score);
          document.location.reload();
        }
      }

function resetBall() {
        ball.x = canvas.width / 2;
        ball.y = canvas.height / 2;
      }

function keyDownHandler(e) {
        if (e.key === "ArrowUp" && player2.y > 0) {
          player2.y -= 10;
        } else if (e.key === "ArrowDown" && player2.y < canvas.height - player2.height) {
          player2.y += 10;
        }

if (e.key === "w" && player1.y > 0) {
          player1.y -= 10;
        } else if (e.key === "s" && player1.y < canvas.height - player1.height) {
          player1.y += 10;
        }
      }

document.addEventListener("keydown", keyDownHandler);

setInterval(() => {
        update();
        draw();
      }, 1000 / 60);
    </script>
  </body>
</html>
```