Vollständiges Spiel. Gib keine Erklärungen, nur den Code.'s game

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

No:33909

221

←

Prev Next

→

Vollständiges Spiel. Gib keine Erklärungen, nur de..ALL
Developer User14077｜Date and time 24/1/7 1:12:11
Build time 58.291 sec｜Game capacity 5.786KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在のフィギュア売れ筋ランキング

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

<!DOCTYPE html>
<html>
  <head>
    <title>Pictogram Game</title>
  </head>
  <body>
    <canvas id="gameCanvas" width="400" height="600"></canvas>
    <script>
      // Canvas and Context variables
      let canvas;
      let context;

// Game variables
      let paddle;
      let ball;
      let bricks;
      let score;

// Paddle properties
      const PADDLE_WIDTH = 80;
      const PADDLE_HEIGHT = 10;
      const PADDLE_COLOR = "#0095DD";
      let paddleX;

// Ball properties
      const BALL_RADIUS = 10;
      const BALL_SPEED = 2;
      let ballX;
      let ballY;
      let ballSpeedX;
      let ballSpeedY;

// Brick properties
      const BRICK_ROWS = 5;
      const BRICK_COLUMNS = 8;
      const BRICK_WIDTH = 45;
      const BRICK_HEIGHT = 15;
      const BRICK_COLOR = "#0095DD";
      const BRICK_PADDING = 10;
      const BRICK_OFFSET_TOP = 30;
      const BRICK_OFFSET_LEFT = 30;

// Key variables
      let rightPressed = false;
      let leftPressed = false;

// Initialize the game
      function initGame() {
        canvas = document.getElementById("gameCanvas");
        context = canvas.getContext("2d");

paddleX = (canvas.width - PADDLE_WIDTH) / 2;
      
        ballX = canvas.width / 2;
        ballY = canvas.height - 30;
        ballSpeedX = BALL_SPEED;
        ballSpeedY = -BALL_SPEED;

bricks = [];
        for (let column = 0; column < BRICK_COLUMNS; column++) {
          bricks[column] = [];
          for (let row = 0; row < BRICK_ROWS; row++) {
            bricks[column][row] = { x: 0, y: 0, status: 1 };
          }
        }

score = 0;

document.addEventListener("keydown", keyDownHandler);
        document.addEventListener("keyup", keyUpHandler);

setInterval(draw, 10);
      }

// Event listener for key press
      function keyDownHandler(event) {
        if (event.key === "ArrowRight") {
          rightPressed = true;
        } else if (event.key === "ArrowLeft") {
          leftPressed = true;
        }
      }

// Event listener for key release
      function keyUpHandler(event) {
        if (event.key === "ArrowRight") {
          rightPressed = false;
        } else if (event.key === "ArrowLeft") {
          leftPressed = false;
        }
      }

// Update paddle position based on key states
      function movePaddle() {
        if (rightPressed && paddleX < canvas.width - PADDLE_WIDTH) {
          paddleX += 7;
        } else if (leftPressed && paddleX > 0) {
          paddleX -= 7;
        }
      }

// Collision detection between ball and bricks
      function collisionDetection() {
        for (let column = 0; column < BRICK_COLUMNS; column++) {
          for (let row = 0; row < BRICK_ROWS; row++) {
            let brick = bricks[column][row];
            if (brick.status === 1) {
              if (
                ballX > brick.x &&
                ballX < brick.x + BRICK_WIDTH &&
                ballY > brick.y &&
                ballY < brick.y + BRICK_HEIGHT
              ) {
                ballSpeedY = -ballSpeedY;
                brick.status = 0;
                score++;
                if (score === BRICK_ROWS * BRICK_COLUMNS) {
                  alert("Congratulations! You won!");
                  document.location.reload();
                }
              }
            }
          }
        }
      }

// Draw paddle on canvas
      function drawPaddle() {
        context.beginPath();
        context.rect(paddleX, canvas.height - PADDLE_HEIGHT, PADDLE_WIDTH, PADDLE_HEIGHT);
        context.fillStyle = PADDLE_COLOR;
        context.fill();
        context.closePath();
      }

// Draw ball on canvas
      function drawBall() {
        context.beginPath();
        context.arc(ballX, ballY, BALL_RADIUS, 0, Math.PI * 2);
        context.fillStyle = PADDLE_COLOR;
        context.fill();
        context.closePath();
      }

// Draw bricks on canvas
      function drawBricks() {
        for (let column = 0; column < BRICK_COLUMNS; column++) {
          for (let row = 0; row < BRICK_ROWS; row++) {
            if (bricks[column][row].status === 1) {
              let brickX = column * (BRICK_WIDTH + BRICK_PADDING) + BRICK_OFFSET_LEFT;
              let brickY = row * (BRICK_HEIGHT + BRICK_PADDING) + BRICK_OFFSET_TOP;
              bricks[column][row].x = brickX;
              bricks[column][row].y = brickY;
              context.beginPath();
              context.rect(brickX, brickY, BRICK_WIDTH, BRICK_HEIGHT);
              context.fillStyle = BRICK_COLOR;
              context.fill();
              context.closePath();
            }
          }
        }
      }

// Draw score on canvas
      function drawScore() {
        context.font = "16px Arial";
        context.fillStyle = "#0095DD";
        context.fillText("Score: " + score, 8, 20);
      }

// Update canvas
      function draw() {
        context.clearRect(0, 0, canvas.width, canvas.height);
        drawPaddle();
        drawBricks();
        drawBall();
        drawScore();
        collisionDetection();

if (ballX + ballSpeedX > canvas.width - BALL_RADIUS || ballX + ballSpeedX < BALL_RADIUS) {
          ballSpeedX = -ballSpeedX;
        }

if (ballY + ballSpeedY < BALL_RADIUS) {
          ballSpeedY = -ballSpeedY;
        } else if (ballY + ballSpeedY > canvas.height - BALL_RADIUS) {
          if (ballX > paddleX && ballX < paddleX + PADDLE_WIDTH) {
            ballSpeedY = -ballSpeedY;
          } else {
            alert("Game Over!");
            document.location.reload();
          }
        }

movePaddle();

ballX += ballSpeedX;
        ballY += ballSpeedY;
      }

initGame();
    </script>
  </body>
</html>