Space Invaders and Brick breaker's game

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

No:17334

←

Prev Next

→

Space Invaders and Brick breaker
Developer User7638｜Date and time 23/9/23 5:35:51
Build time 67.466 sec｜Game capacity 6.801KB｜

Script

Here is an example implementation of a game that combines elements of Space Invaders and Brick Breaker. The game is designed to be played on a smartphone and uses pictograms for visual elements.

This HTML file contains the necessary JavaScript code enclosed in script tags. It defines various game objects such as the paddle, ball, and bricks, and handles their movement and collision detection. The game is started when the user clicks on the screen, and the score is displayed at the top of the game window. The game over screen is shown when the ball falls below the paddle.

←

Prev　Next

→ 　

Back　

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

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

Here is an example implementation of a game that combines elements of Space Invaders and Brick Breaker. The game is designed to be played on a smartphone and uses pictograms for visual elements.

```html
<!DOCTYPE html>
<html>
<head>
  <title>Space Brick Invaders</title>
  <style>
    body {
      margin: 0;
      padding: 0;
      overflow: hidden;
    }
    
    .game-container {
      position: relative;
      width: 100%;
      height: 100vh;
    }
    
    .game-over {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-size: 24px;
      color: red;
    }
  </style>
</head>
<body>
  <div class="game-container">
    <canvas id="game"></canvas>
    <div class="game-over" id="gameOver"></div>
  </div>

// Game variables
      let ctx;
      let paddle;
      let ball;
      let bricks;
      let score;
      let gameStarted;
      let gameOver;

function Brick(x, y) {
        this.x = x;
        this.y = y;
        this.width = BRICK_WIDTH;
        this.height = BRICK_HEIGHT;
        this.color = BRICK_COLORS[Math.floor(Math.random() * BRICK_COLORS.length)];
        this.visible = true;
      }

Brick.prototype.draw = function() {
        ctx.beginPath();
        ctx.rect(this.x, this.y, this.width, this.height);
        ctx.fillStyle = this.visible ? this.color : 'transparent';
        ctx.fill();
        ctx.closePath();
      }

Brick.prototype.update = function() {
        if (collisionDetection(this, ball)) {
          ball.dy = -ball.dy;
          this.visible = false;
          score++;
          if (score === BRICK_ROW_COUNT * BRICK_COLUMN_COUNT) {
            gameOver = true;
          }
        }
      }

function Paddle() {
        this.width = PADDLE_WIDTH;
        this.height = PADDLE_HEIGHT;
        this.x = (GAME_WIDTH - this.width) / 2;
        this.y = GAME_HEIGHT - this.height - 10;
        this.dx = 0;
      }

Paddle.prototype.draw = function() {
        ctx.beginPath();
        ctx.rect(this.x, this.y, this.width, this.height);
        ctx.fillStyle = 'black';
        ctx.fill();
        ctx.closePath();
      }

Paddle.prototype.update = function() {
        if (gameStarted) {
          this.x += this.dx;
          if (this.x < 0) {
            this.x = 0;
          } else if (this.x + this.width > GAME_WIDTH) {
            this.x = GAME_WIDTH - this.width;
          }
        }
      }

function Ball() {
        this.x = GAME_WIDTH / 2;
        this.y = GAME_HEIGHT - PADDLE_HEIGHT - BALL_RADIUS - 10;
        this.dx = 2;
        this.dy = -2;
      }

Ball.prototype.draw = function() {
        ctx.beginPath();
        ctx.arc(this.x, this.y, BALL_RADIUS, 0, Math.PI * 2);
        ctx.fillStyle = 'black';
        ctx.fill();
        ctx.closePath();
      }

Ball.prototype.update = function() {
        if (gameStarted) {
          this.x += this.dx;
          this.y += this.dy;

if (this.x < BALL_RADIUS || this.x > GAME_WIDTH - BALL_RADIUS) {
            this.dx = -this.dx;
          }

if (this.y < BALL_RADIUS) {
            this.dy = -this.dy;
          }

if (collisionDetection(this, paddle)) {
            this.dy = -this.dy;
          }

if (this.y > GAME_HEIGHT + BALL_RADIUS) {
            gameOver = true;
          }
        }
      }

function collisionDetection(obj1, obj2) {
        return (
          obj1.x < obj2.x + obj2.width &&
          obj1.x + obj1.width > obj2.x &&
          obj1.y < obj2.y + obj2.height &&
          obj1.y + obj1.height > obj2.y
        );
      }

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

function draw() {
        ctx.clearRect(0, 0, GAME_WIDTH, GAME_HEIGHT);
        
        if (gameOver) {
          gameOverScreen();
          return;
        }
        
        paddle.draw();
        ball.draw();
        drawScore();

bricks.forEach(row => {
          row.forEach(brick => {
            brick.draw();
            brick.update();
          });
        });

paddle.update();
        ball.update();

requestAnimationFrame(draw);
      }

function gameOverScreen() {
        ctx.font = "32px Arial";
        ctx.fillStyle = "red";
        ctx.textAlign = "center";
        ctx.fillText("Game Over", GAME_WIDTH / 2, GAME_HEIGHT / 2);
      }

function startGame() {
        gameStarted = true;
        gameOver = false;
        score = 0;

ctx = document.getElementById('game').getContext('2d');
        paddle = new Paddle();
        ball = new Ball();

bricks = [];
        for (let row = 0; row < BRICK_ROW_COUNT; row++) {
          const brickRow = [];
          for (let col = 0; col < BRICK_COLUMN_COUNT; col++) {
            const brickX = col * (BRICK_WIDTH + BRICK_MARGIN) + BRICK_MARGIN;
            const brickY = row * (BRICK_HEIGHT + BRICK_MARGIN) + BRICK_MARGIN;
            brickRow.push(new Brick(brickX, brickY));
          }
          bricks.push(brickRow);
        }

draw();
      }

document.addEventListener('click', function() {
        if (!gameStarted || gameOver) {
          startGame();
        }
      });
      
      startGame();
    });
  </script>
</body>
</html>
```