AI game creator

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

No:36175

←

Prev Next

→

Block Breaker
Developer User16762｜Date and time 24/1/17 2:57:46
Build time 26.77 sec｜Game capacity 5.414KB｜

Script

Sure! Here's an example of a Block Breaker game implemented as a single HTML file using JavaScript:

This code will create a Block Breaker game where you control a paddle to bounce a ball and break bricks on the screen. You can control the paddle's position using the left and right arrow keys on a computer or by touch on a smartphone. The game ends when you miss the ball and it touches the bottom of the screen. Every time you break all the bricks, you win the game.

←

Prev　Next

→ 　

Back　

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

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

Sure! Here's an example of a Block Breaker game implemented as a single HTML file using JavaScript:

```html
<!DOCTYPE html>
<html>
<head>
  <title>Block Breaker Game</title>
  <style>
    canvas {
      border: 1px solid #000000;
      background: #F0F0F0;
      display: block;
      margin: 0 auto;
    }
  </style>
</head>
<body>
  <canvas id="gameCanvas" width="480" height="320"></canvas>
  <script>
    // Game initialization code
    let canvas = document.getElementById("gameCanvas");
    let ctx = canvas.getContext("2d");

let ball = {
      x: canvas.width / 2,
      y: canvas.height - 30,
      radius: 10,
      dx: 2,
      dy: -2
    };

let paddle = {
      width: 75,
      height: 10,
      x: (canvas.width - 75) / 2,
      dx: 7,
      touchX: null
    };

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

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

let score = 0;

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

function drawPaddle() {
      ctx.beginPath();
      ctx.rect(paddle.x, canvas.height - paddle.height, paddle.width, paddle.height);
      ctx.fillStyle = "#0095DD";
      ctx.fill();
      ctx.closePath();
    }

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

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

// Ball movement
      ball.x += ball.dx;
      ball.y += ball.dy;

// Wall collision
      if (ball.x + ball.radius > canvas.width || ball.x - ball.radius < 0) {
        ball.dx = -ball.dx;
      }
      if (ball.y - ball.radius < 0) {
        ball.dy = -ball.dy;
      }

// Paddle collision
      if (
        ball.y + ball.radius > canvas.height - paddle.height &&
        ball.x > paddle.x &&
        ball.x < paddle.x + paddle.width
      ) {
        ball.dy = -ball.dy;
      } else if (ball.y + ball.radius > canvas.height) {
        alert("Game Over!");
        document.location.reload();
      }

// Paddle movement
      if (paddle.touchX !== null) {
        paddle.x = paddle.touchX - paddle.width / 2;
      }
      if (
        (paddle.x < 0 && paddle.dx < 0) ||
        (paddle.x + paddle.width > canvas.width && paddle.dx > 0)
      ) {
        paddle.dx = 0;
      }
      paddle.x += paddle.dx;

requestAnimationFrame(draw);
    }

document.addEventListener("keyup", function (e) {
      if (e.keyCode === 37 || e.keyCode === 39) {
        paddle.dx = 0; // Stop moving
      }
    });

document.addEventListener("touchstart", function (e) {
      e.preventDefault();
      paddle.touchX = e.touches[0].clientX;
    });

document.addEventListener("touchmove", function (e) {
      e.preventDefault();
      paddle.touchX = e.touches[0].clientX;
    });

document.addEventListener("touchend", function (e) {
      e.preventDefault();
      paddle.touchX = null;
    });

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