html>
="en">

100
body {
margin: 0;
overflow: hidden;
background-color: #f0f0f0;
font-family: 'Arial', sans-serif;
}
#gameCanvas {
background-color: #ffffff;
border: 2px solid #000000;
display: block;
margin: 0 auto;
cursor: url('https://cur.cursors-4u.net/others/cur-9.cur'), auto; /* Old school mouse cursor */
}
.square {
position: absolute;
width: 50px;
height: 50px;
transition: transform 0.1s;
border-radius: 10%;
opacity: 0.9;
}
</style>

Merge 100
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
let squares = [];
let gravity = 0.1;

class Square {
constructor(x, y, level) {
this.x = x;
this.y = y;
this.level = level; // Level of the square
this.size = 50 + (level * 5); // Increase size based on level
this.color = hsl(${Math.random() * 360}, 100%, 50%);
this.vy = 0; // Velocity
}

draw() {
ctx.fillStyle = this.color;
ctx.fillRect(this.x, this.y, this.size, this.size);
}

update() {
this.vy += gravity;
this.y += this.vy;

if (this.y + this.size > canvas.height) {
this.y = canvas.height - this.size;
this.vy *= -0.5; // Bounce back
}
}
}

function spawnSquare(level) {
const x = Math.random() * (canvas.width - 50);
squares.push(new Square(x, 0, level));
}

canvas.addEventListener('mousedown', (e) => {
const x = e.clientX - canvas.offsetLeft;
const y = e.clientY - canvas.offsetTop;

for (let i = squares.length - 1; i >= 0; i--) {
const square = squares[i];
if (x >= square.x && x <= square.x + square.size && y >= square.y && y <= square.y + square.size) {
square.vy = -5; // Throw the square up
break;
}
}
});

function mergeSquares() {
const merged = [];

squares.forEach((square, index) => {
for (let j = index + 1; j < squares.length; j++) {
const otherSquare = squares[j];
if (square.level === otherSquare.level && checkCollision(square, otherSquare)) {
const newLevel = square.level + 1;
const newSquare = new Square((square.x + otherSquare.x) / 2, square.y, newLevel);
merged.push(newSquare);
squares.splice(j, 1); // Remove merged square
squares.splice(index, 1); // Remove this square
break;
}
}
});

merged.forEach(square => squares.push(square));
}

function checkCollision(square1, square2) {
return !(square1.x + square1.size < square2.x ||
square1.x > square2.x + square2.size ||
square1.y + square1.size < square2.y ||
square1.y > square2.y + square2.size);
}

function update() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
squares.forEach(square => {
square.update();
square.draw();
});
mergeSquares();

requestAnimationFrame(update);
}

// Spawn initial squares
for (let i = 0; i < 10; i++) {
spawnSquare(Math.floor(Math.random() * 5)); // Random level between 0 and 4
}

update();
</script>