AI game creator

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

No:27776

←

Prev Next

→

Block Breaker
Developer User13833｜Date and time 23/12/9 1:41:10
Build time 56.261 sec｜Game capacity 4.666KB｜

Script

Sure! Here's a simple implementation of the classic game "Block Breaker" using HTML, JavaScript, and pictograms. Please note that due to character limitations, the game logic is implemented in a separate JavaScript file. Here is the HTML code for the game:

And here is the JavaScript code for the game (placed in a separate `blockbreaker.js` file): To play the game, you can save the HTML file and the JavaScript file in the same directory, then open the HTML file in any web browser. Use the left and right arrow keys, or the corresponding keys on a virtual keyboard (on a smartphone), to move the paddle and bounce the ball off the bricks. The objective is to destroy all the bricks using the ball without letting it touch the bottom edge. If the ball touches the bottom edge, the game will restart. I hope you enjoy playing the game!

←

Prev　Next

→ 　

Back　

[PR]現在の本の売れ筋ランキング

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

Here is the HTML code for the game:

```html
<!DOCTYPE html>
<html>
<head>
  <style>
    canvas {
      border: 1px solid #000;
      display: block;
      margin: 0 auto;
    }
  </style>
</head>
<body>
  <canvas id="gameCanvas" width="480" height="320"></canvas>

And here is the JavaScript code for the game (placed in a separate `blockbreaker.js` file):

```javascript
// Get the canvas and its context
var canvas = document.getElementById("gameCanvas");
var ctx = canvas.getContext("2d");

// Set initial variables
var ballX = canvas.width / 2;
var ballY = canvas.height - 30;
var ballRadius = 10;
var ballSpeedX = 2;
var ballSpeedY = -2;

var paddleWidth = 75;
var paddleHeight = 10;
var paddleX = (canvas.width - paddleWidth) / 2;

var rightPressed = false;
var leftPressed = false;

var brickRowCount = 3;
var brickColumnCount = 5;
var brickWidth = 75;
var brickHeight = 20;
var brickPadding = 10;
var brickOffsetTop = 30;
var brickOffsetLeft = 30;

var bricks = [];
for (var c = 0; c < brickColumnCount; c++) {
  bricks[c] = [];
  for (var r = 0; r < brickRowCount; r++) {
    bricks[c][r] = { x: 0, y: 0, status: 1 };
  }
}

// Event listeners for paddle movement
document.addEventListener("keydown", keyDownHandler, false);
document.addEventListener("keyup", keyUpHandler, false);

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

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

// Collision detection function
function collisionDetection() {
  for (var c = 0; c < brickColumnCount; c++) {
    for (var r = 0; r < brickRowCount; r++) {
      var b = bricks[c][r];
      if (b.status == 1) {
        if (
          ballX > b.x &&
          ballX < b.x + brickWidth &&
          ballY > b.y &&
          ballY < b.y + brickHeight
        ) {
          ballSpeedY = -ballSpeedY;
          b.status = 0;
        }
      }
    }
  }
}

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

// Draw bricks
  for (var c = 0; c < brickColumnCount; c++) {
    for (var r = 0; r < brickRowCount; r++) {
      if (bricks[c][r].status == 1) {
        var brickX = c * (brickWidth + brickPadding) + brickOffsetLeft;
        var brickY = r * (brickHeight + brickPadding) + brickOffsetTop;
        bricks[c][r].x = brickX;
        bricks[c][r].y = brickY;
        ctx.beginPath();
        ctx.rect(brickX, brickY, brickWidth, brickHeight);
        ctx.fillStyle = "#0095DD";
        ctx.fill();
        ctx.closePath();
      }
    }
  }

// Draw ball
  ctx.beginPath();
  ctx.arc(ballX, ballY, ballRadius, 0, Math.PI * 2);
  ctx.fillStyle = "#0095DD";
  ctx.fill();
  ctx.closePath();

// Draw paddle
  ctx.beginPath();
  ctx.rect(paddleX, canvas.height - paddleHeight, paddleWidth, paddleHeight);
  ctx.fillStyle = "#0095DD";
  ctx.fill();
  ctx.closePath();

// Ball movement
  ballX += ballSpeedX;
  ballY += ballSpeedY;

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

// Ball collision detection with walls
  if (ballX + ballSpeedX > canvas.width - ballRadius || ballX + ballSpeedX < ballRadius) {
    ballSpeedX = -ballSpeedX;
  }
  if (ballY + ballSpeedY < ballRadius) {
    ballSpeedY = -ballSpeedY;
  } else if (ballY + ballSpeedY > canvas.height - ballRadius) {
    if (ballX > paddleX && ballX < paddleX + paddleWidth) {
      ballSpeedY = -ballSpeedY;
    } else {
      alert("Game Over");
      document.location.reload();
    }
  }

collisionDetection();

requestAnimationFrame(draw);
}

// Start the game
draw();
```

To play the game, you can save the HTML file and the JavaScript file in the same directory, then open the HTML file in any web browser. Use the left and right arrow keys, or the corresponding keys on a virtual keyboard (on a smartphone), to move the paddle and bounce the ball off the bricks. The objective is to destroy all the bricks using the ball without letting it touch the bottom edge. If the ball touches the bottom edge, the game will restart.

I hope you enjoy playing the game!