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

No:38710

Physics sim where you can destroy buildings in a c..ALL
Developer User17421｜Date and time 24/1/25 7:59:29
Build time 17.63 sec｜Game capacity 4.674KB｜

Script

Sure! Here's an example of a simple physics simulation game where you can destroy buildings in a city, similar to City Smash. The game utilizes JavaScript and is implemented as a single HTML file enclosed in script tags:

City Smash Simulator

In this game, buildings are randomly generated within the city. You can click and drag buildings to move them around. When a building collides with another building, it gets destroyed and turns red for a brief moment before being removed from the simulation. Please note that this is just a simplified example and you can further enhance the game by adding more features, graphics, sound effects, levels, etc., based on your requirements and creativity.

←

Prev　Next

→ 　

Back　

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

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

```html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>City Smash Simulator</title>
    <style>
      #gameCanvas {
        border: 1px solid black;
        background-color: #f0f0f0;
        height: 400px;
        width: 600px;
      }
    </style>
  </head>
  <body>
    <h1>City Smash Simulator</h1>
    <canvas id="gameCanvas"></canvas>

canvas.width = 600;
      canvas.height = 400;

const gravity = 0.2;
      const buildings = [];
      let selectedBuilding = null;

class Building {
        constructor(x, y, width, height) {
          this.x = x;
          this.y = y;
          this.width = width;
          this.height = height;
          this.isDestroyed = false;
        }

draw() {
          ctx.fillStyle = this.isDestroyed ? '#FF0000' : '#808080';
          ctx.fillRect(this.x, this.y, this.width, this.height);
        }
      }

function createBuildings() {
        const buildingWidth = 80;
        const buildingHeightRange = [180, 320];
        const buildingGapRange = [50, 100];
        const numBuildings = Math.floor(canvas.width / (buildingWidth + buildingGapRange[1]));

for (let i = 0; i < numBuildings; i++) {
          const buildingHeight = Math.random() * (buildingHeightRange[1] - buildingHeightRange[0]) + buildingHeightRange[0];
          const buildingX = i * (buildingWidth + buildingGapRange[1]);
          const buildingY = canvas.height - buildingHeight;

buildings.push(new Building(buildingX, buildingY, buildingWidth, buildingHeight));
        }
      }

function drawBuildings() {
        buildings.forEach(building => building.draw());
      }

function checkCollision() {
        buildings.forEach(building => {
          if (!building.isDestroyed && selectedBuilding !== building) {
            if (
              selectedBuilding.x < building.x + building.width &&
              selectedBuilding.x + selectedBuilding.width > building.x &&
              selectedBuilding.y < building.y + building.height &&
              selectedBuilding.y + selectedBuilding.height > building.y
            ) {
              destroyBuilding(building);
            }
          }
        });
      }

function destroyBuilding(building) {
        building.isDestroyed = true;
        setTimeout(() => {
          buildings.splice(buildings.indexOf(building), 1);
        }, 2000);
      }

function update() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        drawBuildings();
        if (selectedBuilding) {
          selectedBuilding.x = Math.min(Math.max(selectedBuilding.x, 0), canvas.width - selectedBuilding.width);
          selectedBuilding.y = Math.min(Math.max(selectedBuilding.y, 0), canvas.height - selectedBuilding.height);
          checkCollision();
        }
        requestAnimationFrame(update);
      }

canvas.addEventListener('mousedown', e => {
        const rect = canvas.getBoundingClientRect();
        const mouseX = e.clientX - rect.left;
        const mouseY = e.clientY - rect.top;

buildings.forEach(building => {
          if (
            mouseX >= building.x &&
            mouseX <= building.x + building.width &&
            mouseY >= building.y &&
            mouseY <= building.y + building.height
          ) {
            selectedBuilding = building;
          }
        });
      });

canvas.addEventListener('mousemove', e => {
        if (selectedBuilding) {
          const rect = canvas.getBoundingClientRect();
          selectedBuilding.x = e.clientX - rect.left - (selectedBuilding.width / 2);
          selectedBuilding.y = e.clientY - rect.top - (selectedBuilding.height / 2);
        }
      });

canvas.addEventListener('mouseup', () => {
        selectedBuilding = null;
      });

createBuildings();
      update();
    </script>
  </body>
</html>
```

Please note that this is just a simplified example and you can further enhance the game by adding more features, graphics, sound effects, levels, etc., based on your requirements and creativity.