AI game creator

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

No:38242

←

Prev Next

→

Block Breaker
Developer User17280｜Date and time 24/1/23 17:36:38
Build time 25.722 sec｜Game capacity 6.244KB｜

Script

Sure! Here's a simple implementation of a block breaker game using JavaScript, enclosed in script tags within a single HTML file. The game can be played on a smartphone and uses pictograms for a visual representation. Please note that this is a basic version, and you can enhance it further according to your requirements.

This HTML file contains a canvas element where the game is rendered. It includes JavaScript code that handles the game logic, such as ball movement, paddle control, collision detection, drawing blocks, and displaying messages. The game loop is executed using the `requestAnimationFrame` function, which ensures smooth animation.

←

Prev　Next

→ 　

Back　

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

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

```html
<!DOCTYPE html>
<html>
  <head>
    <title>Block Breaker</title>
    <style>
      canvas {
        border: 1px solid black;
      }
    </style>
  </head>
  <body>
    <canvas id="gameCanvas" width="400" height="500"></canvas>

// Paddle variables
      const paddleWidth = 80;
      const paddleHeight = 15;
      let paddleX = (canvas.width - paddleWidth) / 2;

// Ball variables
      const ballRadius = 10;
      let ballX = canvas.width / 2;
      let ballY = canvas.height - 30;
      let ballDx = 2;
      let ballDy = -2;

// Block variables
      const blockRowCount = 3;
      const blockColumnCount = 5;
      const blockWidth = 75;
      const blockHeight = 20;
      const blockPadding = 10;
      const blockOffsetTop = 30;
      const blockOffsetLeft = 30;

// Create blocks
      const blocks = [];
      for (let col = 0; col < blockColumnCount; col++) {
        blocks[col] = [];
        for (let row = 0; row < blockRowCount; row++) {
          blocks[col][row] = { x: 0, y: 0, status: 1 };
        }
      }

// Paddle controls
      let rightPressed = false;
      let leftPressed = false;

// Handle touch events
      document.addEventListener("touchstart", touchHandler, false);
      document.addEventListener("touchmove", touchHandler, false);
      document.addEventListener("touchend", touchHandler, false);

// Handle touch events
      function touchHandler(e) {
        const relativeX = e.touches[0].pageX - canvas.offsetLeft;
        if (relativeX > 0 && relativeX < canvas.width) {
          paddleX = relativeX - paddleWidth / 2;
        }
      }

// Handle keyboard events
      document.addEventListener("keydown", keyDownHandler, false);
      document.addEventListener("keyup", keyUpHandler, false);

// Key down event handler
      function keyDownHandler(e) {
        if (e.key === "ArrowRight" || e.key === "Right") {
          rightPressed = true;
        } else if (e.key === "ArrowLeft" || e.key === "Left") {
          leftPressed = true;
        }
      }

// Key up event handler
      function keyUpHandler(e) {
        if (e.key === "ArrowRight" || e.key === "Right") {
          rightPressed = false;
        } else if (e.key === "ArrowLeft" || e.key === "Left") {
          leftPressed = false;
        }
      }

// Collision detection
      function collisionDetection() {
        for (let col = 0; col < blockColumnCount; col++) {
          for (let row = 0; row < blockRowCount; row++) {
            let block = blocks[col][row];
            if (block.status === 1) {
              if (
                ballX > block.x &&
                ballX < block.x + blockWidth &&
                ballY > block.y &&
                ballY < block.y + blockHeight
              ) {
                ballDy = -ballDy;
                block.status = 0;
              }
            }
          }
        }
      }

// Draw paddle
      function drawPaddle() {
        ctx.beginPath();
        ctx.rect(paddleX, canvas.height - paddleHeight, paddleWidth, paddleHeight);
        ctx.fillStyle = "black";
        ctx.fill();
        ctx.closePath();
      }

// Draw ball
      function drawBall() {
        ctx.beginPath();
        ctx.arc(ballX, ballY, ballRadius, 0, Math.PI * 2);
        ctx.fillStyle = "black";
        ctx.fill();
        ctx.closePath();
      }

// Draw blocks
      function drawBlocks() {
        for (let col = 0; col < blockColumnCount; col++) {
          for (let row = 0; row < blockRowCount; row++) {
            if (blocks[col][row].status === 1) {
              const blockX =
                col * (blockWidth + blockPadding) + blockOffsetLeft;
              const blockY =
                row * (blockHeight + blockPadding) + blockOffsetTop;
              blocks[col][row].x = blockX;
              blocks[col][row].y = blockY;
              ctx.beginPath();
              ctx.rect(blockX, blockY, blockWidth, blockHeight);
              ctx.fillStyle = "black";
              ctx.fill();
              ctx.closePath();
            }
          }
        }
      }

// Game loop
      function draw() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        drawBlocks();
        drawBall();
        drawPaddle();
        collisionDetection();

// Ball movement
        ballX += ballDx;
        ballY += ballDy;

// Paddle movement
        if (rightPressed && paddleX < canvas.width - paddleWidth) {
          paddleX += 7;
        } else if (leftPressed && paddleX > 0) {
          paddleX -= 7;
        }

// Ball collision detection with walls
        if (ballX + ballDx > canvas.width - ballRadius || ballX + ballDx < ballRadius) {
          ballDx = -ballDx;
        }
        if (ballY + ballDy < ballRadius) {
          ballDy = -ballDy;
        } else if (ballY + ballDy > canvas.height - ballRadius) {
          if (ballX > paddleX && ballX < paddleX + paddleWidth) {
            ballDy = -ballDy;
          } else {
            showMessage("Game Over!");
            return;
          }
        }

requestAnimationFrame(draw);
      }

// Show message
      function showMessage(message) {
        ctx.font = "30px Arial";
        ctx.fillStyle = "black";
        ctx.fillText(message, canvas.width / 2 - 80, canvas.height / 2);
      }

// Start the game
      draw();
    </script>
  </body>
</html>
```