Scribd
Upload
3K views14 pages

Block Blast Game HTML Code

Uploaded by

taggertallred
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
3K views14 pages

Block Blast Game HTML Code

Uploaded by

taggertallred
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

<!

DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Block Blast</title>
<style>
body {
display: flex;
flex-direction: column;
align-items: center;
background-color: #202124;
font-family: Arial, sans-serif;
color: #ffffff;
margin: 0;
}
#gameCanvas {
position: relative;
background-color: #333;
border: 4px solid #fff;
margin-top: 20px;
z-index: 0;
}
.score {
font-size: 20px;
margin-top: 10px;
}
#pieceSelection {
display: flex;
margin-top: 10px;
z-index: 1;
}
#explosionCanvas {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
pointer-events: none;
z-index: 1000;
display: block;
}
.particle {
position: absolute;
width: 10px; /* Particle size */
height: 10px; /* Particle size */
pointer-events: none; /* Particles should not block clicks */
opacity: 1;
}
.pieceCanvas {
cursor: pointer;
}
</style>
</head>
<body>
<h1>Block Blast</h1>
<canvas id="gameCanvas" width="400" height="400"></canvas>
<canvas id="explosionCanvas"></canvas>
<div class="score" id="scoreDisplay">Score: 0</div>
<div class="score" id="comboDisplay">Combo: 0</div>
<div id="pieceSelection">
<canvas class="pieceCanvas" width="150" height="150"></canvas>
<canvas class="pieceCanvas" width="150" height="150"></canvas>
<canvas class="pieceCanvas" width="150" height="150"></canvas>
</div>
<script>
const canvas = [Link]('gameCanvas');
const explosionCanvas = [Link]('explosionCanvas');
const ctx = [Link]('2d');
const exCtx = [Link]('2d');
const canvasRect = [Link]();
const canvasOffsetX = [Link];
const canvasOffsetY = [Link];
const gridSize = 8;
const blockSize = [Link] / gridSize;
const pieceSelection = [Link]('.pieceCanvas');
const colors = ['red', 'orange', 'yellow', 'lightBlue', 'blue', 'green'];

const tileBase64 = {
red:
'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c
6QAAAEtJREFUOE9j7GNg+M9AAWAEGSBFpgHPGBgY4AbokWjIJQYGBgwDNFNTiTLm+uzZDKMGjIYB7dIBUck
QqggjJZKiGaYWnhfI0QzTAwAtTFDhhlfQZwAAAABJRU5ErkJggg==',
orange:

'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c
6QAAAE1JREFUOE9j7HNn+M9AAWAEGSDFS54Jzz4zMMAN0BMnzZBLLxkYMAzQdE8lypTrO2czjBowGga0Swd
EJUOoIoyUSIpmmFp4XiBHM0wPAOlJb1G/bXKLAAAAAElFTkSuQmCC',
yellow:

'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c
6QAAAE1JREFUOE9j7Otj+M9AAWAEGSAlRZ4Jz54xMMAN0NMjzZBLlxgYMAzQ1EwlypTr12czjBowGga0Swd
EJUOoIoyUSIpmmFp4XiBHM0wPAKFnc8FrogqXAAAAAElFTkSuQmCC',
green:

'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c
6QAAAEtJREFUOE9jZOhj+M9AAWAEGyBFpgnPGBgQBuiRaMglBgYGdANSNVOJMmX29dkMDKMGjIYBzdIBUck
QpggjJZKkG6oYnhfI0QzVAwAKbFDho0eY4AAAAABJRU5ErkJggg==',
lightBlue:

'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c
6QAAAE1JREFUOE9jZOjr+89AAWAEGyAlRZ4Rz54xIAzQ0yPNkEuXGBjQDUjV1CTKkNnXrzMwjBowGgY0Swd
EJUOYIoyUSJJuqGJ4XiBHM1QPAFunc8EXIIv5AAAAAElFTkSuQmCC',
blue:
'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c
6QAAAEtJREFUOE9jZGDo+89AAWCEGCBFphHPGJAM0CPRkEsMDAxoBqSmahJlyOzZ1xkYGEYNGA0DWqUDopI
hXBFGSiRNO0Q1PC+QoxmiBwDnfVDhvca6CwAAAABJRU5ErkJggg==',
gray:
'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c
6QAAAE9JREFUOE9jjImJ+c9AAWAEGfDz50+yjGBnZ2eAG/
D161eSDOHm5mbAMODOnTtEGaKiosIwasBoGNAuHRCVDKGKMFIiKZphauF5gRzNMD0AUKWNQYb4lnEAAAAAS
UVORK5CYII=',
};
const tileImages = {
red: new Image(),
orange: new Image(),
yellow: new Image(),
green: new Image(),
lightBlue: new Image(),
blue: new Image(),
gray: new Image(),
};

const explosionColor = {
red: '255, 0, 0',
orange: '255, 127, 0',
yellow: '255, 255, 0',
green: '0, 255, 0',
lightBlue: '0, 255, 255',
blue: '0, 0, 255',
};

function loadImages() {
// Create an array of promises, one for each image
const imagePromises = [Link](tileImages).map((color) => {
return new Promise((resolve, reject) => {
tileImages[color].src = tileBase64[color];
tileImages[color].onload = resolve;
tileImages[color].onerror = () =>
reject(`Failed to load image for color: ${color}`);
});
});
return [Link](imagePromises);
}

// Call loadImages to load the images and halt further execution


loadImages()
.then(() => {
[Link]('All images loaded');
resizeCanvas();
resetGrid();
drawGrid();
renderPieceSelection();
})
.catch((error) => {
[Link](error); // Log any errors if an image fails to load
});

let lastFrameTime = 0;
let score = 0;
let grid,
selectedPiece,
combo = 0,
piecePos,
isDragging = false,
movesWithoutClear = 0,
currentPieceIndex = -1;
let pieceColors = Array([Link]).fill(null);

const pieces = [
[[1, 1, 1, 1]],
[
[1, 1],
[1, 1],
],
[
[1, 1, 1],
[0, 1, 0],
],
[
[1, 0, 0],
[1, 1, 1],
],
[
[0, 0, 1],
[1, 1, 1],
],
[
[0, 1, 1],
[1, 1, 0],
],
[
[1, 1, 0],
[0, 1, 1],
],
[[1, 1, 1, 1, 1]],
[[1, 1, 1]],
[
[1, 1, 1],
[1, 1, 1],
],
[
[1, 1, 1],
[0, 0, 1],
[0, 0, 1],
],
[
[1, 1],
[0, 1],
],
[
[0, 1],
[1, 0],
],
[[1]],
[[1, 1]],
];

/* Initialize particle object */


class Particle {
constructor(x, y, color, radius) {
this.x = x;
this.y = y;
[Link] = radius;
[Link] = color;
[Link] = ([Link]() - 0.5) * 720; // Units per second
[Link] = ([Link]() - 5) * 120; // Units per second
[Link] = 1200; // Units per second squared
[Link] = 1;
[Link] = 0.18; // Alpha reduction per second
[Link] = 0.3; // Bounce energy retention
}

update(deltaTime) {
// Convert deltaTime to seconds for easier calculations
const dt = deltaTime / 1000;
const containerWidth = [Link];
const containerHeight = [Link];

// Apply gravity first


[Link] += [Link] * dt;

// Apply air resistance


[Link] *= [Link](0.98, dt * 60);

// Update position
let newX = this.x + [Link] * dt;
let newY = this.y + [Link] * dt;

// Handle horizontal bounds


if (newX - [Link] < 0) {
newX = [Link];
[Link] = [Link]([Link]) * [Link];
} else if (newX + [Link] > containerWidth) {
newX = containerWidth - [Link];
[Link] = -[Link]([Link]) * [Link];
}

// Handle vertical bounds


if (newY + [Link] > containerHeight) {
newY = containerHeight - [Link];
// Only bounce if moving downward
if ([Link] > 0) {
[Link] = -[Link]([Link]) * [Link];
}
} else if (newY - [Link] < 0) {
newY = [Link];
[Link] = [Link]([Link]) * [Link];
}

// Update position after collision checks


this.x = newX;
this.y = newY;

// Update alpha
[Link] -= [Link] * dt;

// Draw the particle


[Link] = [Link];
[Link](
[Link],
this.x - [Link],
this.y - [Link],
[Link],
[Link]
);
[Link] = 1;
}
}

let particles = [];

// Generate a new set of particles for the explosion


function createExplosion(x, y, width, height, color) {
const particleCount = 4;
const offsetX = x + canvasOffsetX;
const offsetY = y + canvasOffsetY;

const particlesPerRow = [Link]([Link](particleCount));


const particlesPerColumn = [Link](particleCount / particlesPerRow);

const xSpacing = width / particlesPerRow;


const ySpacing = height / particlesPerColumn;

for (let row = 0; row < particlesPerColumn; row++) {


for (let col = 0; col < particlesPerRow; col++) {
const particleX = offsetX + col * xSpacing + xSpacing / 2;
const particleY = offsetY + row * ySpacing + ySpacing / 2;
const radius = blockSize / particlesPerRow;
[Link](new Particle(particleX, particleY, color, radius));
}
}

// Start animation with proper timing


lastFrameTime = [Link]();
requestAnimationFrame(animateParticles);
}

function animateParticles(currentTime) {
// Calculate deltaTime
const deltaTime = currentTime - lastFrameTime;
lastFrameTime = currentTime;

const particlesToRemove = [];


[Link](0, 0, [Link], [Link]);

// Update particles with deltaTime


[Link]((particle, index) => {
[Link](deltaTime);
if ([Link] <= 0.02) {
[Link](index);
}
});

// Remove dead particles


[Link]().forEach((index) => {
[Link](index, 1);
});

if ([Link] > 0) {
requestAnimationFrame(animateParticles);
}
}

function resetGrid() {
grid = [Link]({ length: gridSize }, () =>
Array(gridSize).fill('gray')
);
}

function drawGrid() {
[Link](0, 0, [Link], [Link]);
for (let row = 0; row < gridSize; row++) {
for (let col = 0; col < gridSize; col++) {
[Link](
tileImages[grid[row][col]],
col * blockSize,
row * blockSize,
blockSize,
blockSize
);
}
}
}

function generateRandomPiece() {
while (true) {
const piece = pieces[[Link]([Link]() * [Link])];
const rotations = [Link]([Link]() * 4); // Randomly decide on 0,
90, 180, or 270 degree rotation
let fit = rotatePiece(piece, rotations);
for (let row = 0; row < gridSize; row++) {
for (let col = 0; col < gridSize; col++) {
if (placePiece(fit, col, row, 'gray', true)) {
return fit;
}
}
}
}
}

function rotatePiece(piece, rotations) {


let rotatedPiece = piece;
for (let i = 0; i < rotations; i++) {
rotatedPiece = rotatedPiece[0].map((_, colIndex) =>
[Link]((row) => row[colIndex]).reverse()
);
}
return rotatedPiece;
}

function assignColors() {
for (let i = 0; i < [Link]; i++) {
pieceColors[i] = colors[[Link]([Link]() * [Link])];
}
}

function renderPieceSelection() {
[Link]((canvas, index) => {
const ctx = [Link]('2d');
[Link](0, 0, [Link], [Link]);
const piece = generateRandomPiece();
pieceSelection[index].piece = piece;
const color = colors[[Link]([Link]() * [Link])];
pieceColors[index] = color;
const adjustedBlockSize = [Link] / 5;

// Calculate the size of the piece grid in pixels


const pieceWidth = piece[0].length * adjustedBlockSize;
const pieceHeight = [Link] * adjustedBlockSize;

// Calculate the starting x and y positions to center the piece


const startX = ([Link] - pieceWidth) / 2;
const startY = ([Link] - pieceHeight) / 2;

// Image has fully loaded, now draw it


[Link]((row, rowIndex) => {
[Link]((cell, colIndex) => {
if (cell) {
[Link](
tileImages[color],
startX + ((colIndex * adjustedBlockSize)),
startY + ((rowIndex * adjustedBlockSize)),
adjustedBlockSize,
adjustedBlockSize
);
}
});
});
});
}

function drawPiece(piece, x, y, color, shadow = false) {


[Link] = shadow ? 0.5 : 1.0;
// Ensure the image is loaded before drawing
[Link]((row, rowIndex) => {
[Link]((cell, colIndex) => {
if (cell) {
// Draw the image at the corresponding grid location
[Link](
tileImages[color],
(x + colIndex) * blockSize,
(y + rowIndex) * blockSize,
blockSize,
blockSize
);
}
});
});
[Link] = 1.0;
}

function placePiece(piece, x, y, color, gameOverCheck = false) {


for (let row = 0; row < [Link]; row++) {
for (let col = 0; col < piece[row].length; col++) {
if (
piece[row][col] &&
(x + col >= gridSize ||
y + row >= gridSize ||
grid[y + row][x + col] !== 'gray')
) {
return false;
}
}
}
[Link]((row, rowIndex) => {
[Link]((cell, colIndex) => {
if (cell) {
grid[y + rowIndex][x + colIndex] = color;
if (!gameOverCheck) {
score++;
}
}
});
});
checkClearLines(gameOverCheck);
return true;
}

function checkClearLines(gameOverCheck = false) {


let clearedRows = new Set();
let clearedCols = new Set();

// Identify rows to clear


for (let row = 0; row < gridSize; row++) {
if (grid[row].every((cell) => cell !== 'gray')) {
[Link](row);
}
}

// Identify columns to clear


for (let col = 0; col < gridSize; col++) {
if ([Link]((row) => row[col] !== 'gray')) {
[Link](col);
}
}
linesCleared = [Link] + [Link];

// Clear identified rows and columns


if (linesCleared > 0) {
// Clear the lines and shift cells down
[Link]((row, rowIndex) => {
for (let col = 0; col < gridSize; col++) {
createExplosion(
col * blockSize,
rowIndex * blockSize,
blockSize,
blockSize,
tileImages[grid[row][col]]
);
}
});

[Link]((col, colIndex) => {


for (let row = 0; row < gridSize; row++) {
createExplosion(
colIndex * blockSize,
row * blockSize,
blockSize,
blockSize,
tileImages[grid[row][col]]
);
}
});

[Link]((row, rowIndex) => {


for (let col = 0; col < gridSize; col++) {
grid[row][col] = 'gray';
}
});

[Link]((col, colIndex) => {


for (let row = 0; row < gridSize; row++) {
grid[row][col] = 'gray';
}
});

combo += linesCleared;
// Calculate combo score: each cleared line earns additional points based
on the combo multiplier
let comboScore = 0;
for (let i = 0; i < linesCleared; i++) {
comboScore += 10 * (combo - linesCleared + 1 + i); // Incremental combo
multiplier
}

// Update score
score += comboScore;

movesWithoutClear = 0; // Reset moves counter because lines were cleared


} else if (!gameOverCheck && combo > 0) {
movesWithoutClear++; // Increment moves counter if no lines were cleared

if (movesWithoutClear >= 3) {
combo = 0; // Reset combo if 3 moves without a clear
}
}

// Update the score and combo displays


[Link]('scoreDisplay').textContent = `Score: ${score}`;
[Link]('comboDisplay').textContent = `Combo: ${combo}`;
drawGrid();
}

function checkGameOver() {
for (const piece of [Link](
pieceSelection,
(canvas) => [Link]
)) {
if (piece) {
for (let row = 0; row < gridSize; row++) {
for (let col = 0; col < gridSize; col++) {
if (placePiece(piece, col, row, 'gray', true)) {
return false;
}
}
}
}
}
drawGrid();
alert('Game Over! Final Score: ' + score);
resetGrid();
drawGrid();
renderPieceSelection();
particles = [];
score = 0;
combo = 0;
checkClearedLines(true);
}

function resizeCanvas() {
[Link] = [Link];
[Link] = [Link];
}

[Link]((canvas, index) => {


[Link]('click', () => {
selectedPiece = pieceSelection[index].piece;
piecePos = pieceColors[index];
currentPieceIndex = index;
isDragging = true;
});
});

[Link]('mousemove', (e) => {


if (isDragging && selectedPiece) {
drawGrid();
const x = [Link]([Link] / blockSize);
const y = [Link]([Link] / blockSize);
drawPiece(selectedPiece, x, y, piecePos, true);
}
});

[Link]('click', (e) => {


if (isDragging && selectedPiece) {
const x = [Link]([Link] / blockSize);
const y = [Link]([Link] / blockSize);
if (placePiece(selectedPiece, x, y, piecePos, false)) {
drawGrid();
selectedPiece = null;
isDragging = false;
pieceSelection[currentPieceIndex].piece = null;
pieceSelection[currentPieceIndex]
.getContext('2d')
.clearRect(0, 0, 150, 150);
if ([Link](pieceSelection).every((canvas) => ![Link])) {
renderPieceSelection();
}
checkGameOver();
}
}

});
[Link]('resize', resizeCanvas);
</script>
</body>
</html>

You might also like