Game with destruction and awesome physics's game

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

No:36065

←

Prev Next

→

Game with destruction and awesome physics
Developer User16722｜Date and time 24/1/16 12:21:46
Build time 23.2 sec｜Game capacity 4.989KB｜

Script

Sure! Here's a simple game that involves destruction and physics using JavaScript. It's designed to be played on a smartphone and incorporates pictograms for a visual experience. Remember to enclose the whole code within script tags in your HTML file.

To make this game work, you need to have two image files: `emozi_all/game.png` for the blocks and `emozi_all/ball.png` for the ball. You can replace them with appropriate pictograms of your choice. Remember to save the image files and the HTML file in the same folder. When you open the HTML file in a web browser, it will start the game on your smartphone. Tap and swipe the ball to interact with the blocks and experience the destruction and physics.

←

Prev　Next

→ 　

Back　

[PR]現在の人気グッズランキング

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

```html
<!DOCTYPE html>
<html>
<head>
<title>Physics Destruction Game</title>
<style>
canvas {
  border: 1px solid black;
}
</style>
</head>
<body>
<canvas id="gameCanvas" width="400" height="600"></canvas>
<script>
  const canvas = document.getElementById('gameCanvas');
  const ctx = canvas.getContext('2d');

// Game variables
  const blockSize = 20; // Size of each block
  const blockRows = 10; // Number of rows
  const blockColumns = 20; // Number of columns
  const gravity = 0.1; // Gravity value
  const friction = 0.9; // Friction value
  const particleSpeed = 2; // Speed of particles
  const particleCount = 40; // Number of particles created on destruction
  let gameObjects = []; // Array to store all game objects

// Pictograms
  const wallImg = new Image();
  wallImg.src = 'wall.png';
  const ballImg = new Image();
  ballImg.src = 'ball.png';

// Block object
  function Block(x, y) {
    this.x = x;
    this.y = y;
    this.width = blockSize;
    this.height = blockSize;

this.draw = function() {
      ctx.drawImage(wallImg, this.x, this.y, this.width, this.height);
    }
  }

// Ball object
  function Ball(x, y, dx, dy) {
    this.x = x;
    this.y = y;
    this.dx = dx;
    this.dy = dy;
    this.radius = blockSize / 2;

this.draw = function() {
      ctx.drawImage(ballImg, this.x - this.radius, this.y - this.radius, this.radius * 2, this.radius * 2);
    }

this.update = function() {
      this.x += this.dx;
      this.y += this.dy;

// Check collision with walls
      if (this.x - this.radius < 0 || this.x + this.radius > canvas.width) {
        this.dx = -this.dx;
      }
      if (this.y - this.radius < 0 || this.y + this.radius > canvas.height) {
        this.dy = -this.dy;
      }

// Apply gravity and friction
      this.dy += gravity;
      this.dy *= friction;
      this.dx *= friction;

this.draw();
    }
  }

// Particle object (created on block destruction)
  function Particle(x, y) {
    this.x = x;
    this.y = y;
    this.radius = blockSize / 4;
    this.dx = (Math.random() - 0.5) * particleSpeed;
    this.dy = (Math.random() - 0.5) * particleSpeed;
    this.alpha = 1;

this.draw = function() {
      ctx.beginPath();
      ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false);
      ctx.fillStyle = `rgba(255, 0, 0, ${this.alpha})`;
      ctx.fill();
    }

this.update = function() {
      this.x += this.dx;
      this.y += this.dy;

this.alpha -= 0.01;

this.draw();
    }
  }

// Initialization function
  function init() {
    gameObjects = []; // Clear game objects

// Create block grid
    for (let i = 0; i < blockRows; i++) {
      for (let j = 0; j < blockColumns; j++) {
        gameObjects.push(new Block(j * blockSize, i * blockSize));
      }
    }

// Create ball
    const initialX = canvas.width / 2;
    const initialY = canvas.height / 2;
    const initialDX = Math.random() * 2 - 1; // Random horizontal velocity
    const initialDY = Math.random() * 4 - 2; // Random vertical velocity
    gameObjects.push(new Ball(initialX, initialY, initialDX, initialDY));
  }

// Update function
  function update() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);

for (let i = 0; i < gameObjects.length; i++) {
      gameObjects[i].update();

// Check collision with blocks
      if (gameObjects[i] instanceof Ball) {
        for (let j = 0; j < gameObjects.length; j++) {
          if (gameObjects[j] instanceof Block) {
            if (
              gameObjects[i].x + gameObjects[i].radius > gameObjects[j].x &&
              gameObjects[i].x - gameObjects[i].radius < gameObjects[j].x + gameObjects[j].width &&
              gameObjects[i].y + gameObjects[i].radius > gameObjects[j].y &&
              gameObjects[i].y - gameObjects[i].radius < gameObjects[j].y + gameObjects[j].height
            ) {
              // Block destruction
              gameObjects.splice(j, 1);

// Create particles
              for (let k = 0; k < particleCount; k++) {
                gameObjects.push(new Particle(gameObjects[j].x, gameObjects[j].y));
              }
            }
          }
        }
      }
    }

requestAnimationFrame(update);
  }

// Start game
  init();
  update();
</script>
</body>
</html>
```

To make this game work, you need to have two image files: `wall.png` for the blocks and `ball.png` for the ball. You can replace them with appropriate pictograms of your choice.

Remember to save the image files and the HTML file in the same folder. When you open the HTML file in a web browser, it will start the game on your smartphone. Tap and swipe the ball to interact with the blocks and experience the destruction and physics.