Scribd
Upload
17 views4 pages

Explosioninc

The document is an HTML file that creates a grid-based game called 'Explosion INC' where users can place explosives on different types of blocks (dirt, grass, stone, air) and detonate them. It includes a control panel for selecting weapons with varying blast powers and a function to reset the game grid. The game utilizes JavaScript for functionality, including the creation of the grid, handling explosions, and updating the visual representation of the blocks.

Uploaded by

steven.bombard
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
17 views4 pages

Explosioninc

The document is an HTML file that creates a grid-based game called 'Explosion INC' where users can place explosives on different types of blocks (dirt, grass, stone, air) and detonate them. It includes a control panel for selecting weapons with varying blast powers and a function to reset the game grid. The game utilizes JavaScript for functionality, including the creation of the grid, handling explosions, and updating the visual representation of the blocks.

Uploaded by

steven.bombard
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 4

<!

DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Explosion INC</title>
<style>
body {
display: flex;
font-family: Arial, sans-serif;
margin: 0;
}
#game-container {
display: grid;
grid-template-columns: repeat(100, 20px);
grid-template-rows: repeat(100, 20px);
border: 1px solid #000;
}
.block {
width: 20px;
height: 20px;
}
.dirt {
background-color: #885600;
}
.grass {
background-color: #1c8e00;
}
.stone {
background-color: #6e6e6e;
}
.air {
background-color: transparent;
}
#controls {
margin-left: 10px;
display: flex;
flex-direction: column;
gap: 10px;
}
button {
padding: 10px;
font-size: 16px;
cursor: pointer;
}
.weapon {
display: flex;
align-items: center;
gap: 5px;
}
.weapon-color {
width: 20px;
height: 20px;
border: 1px solid #000;
}
</style>
</head>
<body>
<div id="game-container"></div>
<div id="controls">
<div>
<h3>Weapons</h3>
<div id="weapon-list"></div>
</div>
<button onclick="detonate()">Detonate</button>
<button onclick="resetMap()">Clear</button>
</div>

<script>
const blocks = {
dirt: { blastRes: 1, color: '#885600' },
grass: { blastRes: 1, color: '#1c8e00' },
stone: { blastRes: 2, color: '#6e6e6e' },
air: { blastRes: 0, color: 'transparent' }
};

const weapons = {
Firecracker: { blastPower: 1, color: '#ff6161' },
Dynamite: { blastPower: 2, color: '#ff2300' },
TNT: { blastPower: 3, color: '#ff0000' },
Bomb: { blastPower: 5, color: '#3b3b3b' },
TNTurtle: { blastPower: 7, color: '#03c700' },
Volcano: { blastPower: 0, color: '#d25300' },
ButterChicken: { blastPower: 0, color: '#b14e00' },
Thermonuclear: { blastPower: 10, color: '#0013ff' },
Nuclear: { blastPower: 15, color: '#ccc900' },
Atomic: { blastPower: 20, color: '#0032ff' },
Hydrogen: { blastPower: 25, color: '#00f0ff' },
Tsar: { blastPower: 35, color: '#000000' }
World End Bomb: { blastPower: 696969696969, color: '#b19d00
};

const grid = [];


const gridSize = 100;
const gameContainer = document.getElementById('game-container');
const weaponList = document.getElementById('weapon-list');

function createGrid() {
gameContainer.innerHTML = '';
for (let y = 0; y < gridSize; y++) {
grid[y] = [];
for (let x = 0; x < gridSize; x++) {
const blockType = Math.random() < 0.8 ? (Math.random() < 0.5 ?
'dirt' : 'grass') : 'stone';
const block = document.createElement('div');
block.classList.add('block', blockType);
block.dataset.type = blockType;
block.dataset.x = x;
block.dataset.y = y;
grid[y][x] = blockType;
gameContainer.appendChild(block);
}
}
}

function displayWeapons() {
for (const [name, { color }] of Object.entries(weapons)) {
const weaponDiv = document.createElement('div');
weaponDiv.classList.add('weapon');

const colorDiv = document.createElement('div');


colorDiv.classList.add('weapon-color');
colorDiv.style.backgroundColor = color;

const label = document.createElement('span');


label.textContent = name;

weaponDiv.appendChild(colorDiv);
weaponDiv.appendChild(label);
weaponDiv.onclick = () => placeExplosive(name);

weaponList.appendChild(weaponDiv);
}
}

function placeExplosive(weapon) {
gameContainer.onclick = (e) => {
if (e.target.classList.contains('block')) {
const block = e.target;
block.style.backgroundColor = weapons[weapon].color;
block.dataset.weapon = weapon;
}
};
}

function calculateExplosionPattern(power) {
const pattern = [];
for (let y = -power; y <= power; y++) {
const row = [];
for (let x = -power; x <= power; x++) {
const distance = Math.abs(x) + Math.abs(y);
row.push(distance <= power ? power - distance : 0);
}
pattern.push(row);
}
return pattern;
}

function detonate() {
const changes = [];

for (let y = 0; y < gridSize; y++) {


for (let x = 0; x < gridSize; x++) {
const block = document.querySelector(`[data-x='${x}'][data-y='$
{y}']`);
const weapon = block.dataset.weapon;

if (weapon) {
const power = weapons[weapon].blastPower;
const pattern = calculateExplosionPattern(power);
const center = Math.floor(pattern.length / 2);

for (let dy = 0; dy < pattern.length; dy++) {


for (let dx = 0; dx < pattern[dy].length; dx++) {
const nx = x + (dx - center);
const ny = y + (dy - center);
if (nx >= 0 && nx < gridSize && ny >= 0 && ny <
gridSize) {
const target = document.querySelector(`[data-
x='${nx}'][data-y='${ny}']`);
const blockType = target.dataset.type;
const blastPower = pattern[dy][dx];

if (blastPower > 0 &&


blocks[blockType].blastRes < blastPower) {
changes.push({ x: nx, y: ny, type:
'air' });
}
}
}
}
}
}
}

changes.forEach(({ x, y, type }) => {


const block = document.querySelector(`[data-x='${x}'][data-y='$
{y}']`);
block.className = `block ${type}`;
block.dataset.type = type;
block.style.backgroundColor = blocks[type].color;
});
}

function resetMap() {
createGrid();
}

createGrid();
displayWeapons();
</script>
</body>
</html>

You might also like