CODE:
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tower Stack Game v5.1</title>
<style>
body {
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #87CEEB;
font-family: Arial, sans-serif;
}
#gameCanvas {
border: 2px solid #000;
}
#gameInfo {
position: absolute;
top: 10px;
left: 10px;
background-color: rgba(255,255,255,0.8);
padding: 10px;
border-radius: 5px;
}
#gameOver, #tutorial {
display: none;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: rgba(255,255,255,0.9);
padding: 20px;
border-radius: 10px;
text-align: center;
}
button {
margin-top: 10px;
padding: 10px 20px;
font-size: 16px;
}
</style>
</head>
<body>
<canvas id="gameCanvas" width="400" height="600"></canvas>
<div id="gameInfo">
<div id="score">Score: 0</div>
<div id="highScore">High Score: 0</div>
<div id="level">Level: 1</div>
</div>
<div id="gameOver">
Game Over
<button id="restartButton">Restart</button>
</div>
<div id="tutorial">
<h2>Welcome to Tower Stack!</h2>
<p>Click or press Space to place blocks.</p>
<p>Build the highest tower you can!</p>
<button id="startButton">Start Game</button>
</div>
<script>
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
const scoreElement = document.getElementById('score');
const highScoreElement = document.getElementById('highScore');
const levelElement = document.getElementById('level');
const gameOverElement = document.getElementById('gameOver');
const tutorialElement = document.getElementById('tutorial');
const restartButton = document.getElementById('restartButton');
const startButton = document.getElementById('startButton');
let score = 0;
let highScore = 0;
let level = 1;
let gameOver = false;
let tower = [];
let currentBlock = { x: 0, y: 0, width: 150, height: 20, speed: 1, color: '' };
let direction = 1;
let colors = ['#FF4136', '#FF851B', '#FFDC00', '#2ECC40', '#0074D9', '#B10DC9'];
let initialBlockWidth;
let initialBlockSpeed;
function drawBlock(block) {
ctx.fillStyle = block.color;
ctx.fillRect(block.x, block.y, block.width, block.height);
}
function updateGame() {
if (gameOver) return;
ctx.clearRect(0, 0, canvas.width, canvas.height);
tower.forEach(drawBlock);
currentBlock.x += currentBlock.speed * direction;
if (currentBlock.x + currentBlock.width >= canvas.width) {
currentBlock.x = canvas.width - currentBlock.width;
direction = -1;
} else if (currentBlock.x <= 0) {
currentBlock.x = 0;
direction = 1;
}
drawBlock(currentBlock);
requestAnimationFrame(updateGame);
}
function startGame() {
score = 0;
level = 1;
gameOver = false;
tower = [];
initialBlockWidth = canvas.width / 2;
initialBlockSpeed = 0.5;
currentBlock = {
x: 0,
y: canvas.height - 20,
width: initialBlockWidth,
height: 20,
speed: initialBlockSpeed,
color: colors[Math.floor(Math.random() * colors.length)]
};
gameOverElement.style.display = 'none';
tutorialElement.style.display = 'none';
updateScore();
updateLevel();
updateGame();
}
function updateScore() {
score++;
scoreElement.textContent = `Score: ${score}`;
if (score > highScore) {
highScore = score;
highScoreElement.textContent = `High Score: ${highScore}`;
}
}
function updateLevel() {
levelElement.textContent = `Level: ${level}`;
}
function getRandomColor(currentColor) {
let newColor;
do {
newColor = colors[Math.floor(Math.random() * colors.length)];
} while (newColor === currentColor);
return newColor;
}
function placeBlock() {
if (gameOver) return;
let lastBlock = tower[tower.length - 1] || { x: 0, y: canvas.height, width: canvas.width };
let overlap = Math.min(currentBlock.x + currentBlock.width, lastBlock.x + lastBlock.width) -
Math.max(currentBlock.x, lastBlock.x);
if (overlap > 0) {
let newBlock = {
x: Math.max(currentBlock.x, lastBlock.x),
y: lastBlock.y - currentBlock.height,
width: overlap,
height: currentBlock.height,
color: currentBlock.color
};
tower.push(newBlock);
updateScore();
let placementError = Math.abs(lastBlock.width - overlap) / lastBlock.width;
if (newBlock.y <= 0) {
level++;
updateLevel();
tower = [{ x: 0, y: canvas.height, width: canvas.width }];
currentBlock = {
x: 0,
y: canvas.height - 20,
width: initialBlockWidth,
height: 20,
speed: initialBlockSpeed * Math.pow(1.25, level - 1), // Increase speed by 25% for each level
color: getRandomColor(currentBlock.color)
};
} else {
currentBlock = {
x: 0,
y: newBlock.y - currentBlock.height,
width: overlap,
height: currentBlock.height,
speed: currentBlock.speed,
color: placementError <= 0.05 ? currentBlock.color : getRandomColor(currentBlock.color)
};
}
} else {
gameOver = true;
gameOverElement.style.display = 'block';
}
}
canvas.addEventListener('click', placeBlock);
document.addEventListener('keydown', (e) => {
if (e.code === 'Space') placeBlock();
});
restartButton.addEventListener('click', startGame);
startButton.addEventListener('click', startGame);
tutorialElement.style.display = 'block';
</script>
</body>
</html>