🏆 Challenge: 50 🏅
🎯 Steps: 0 | 🏅 Score: 0
```html
<!DOCTYPE html>
<html>
<head>
<style>
@keyframes sparkle {
0% { transform: scale(1); }
50% { transform: scale(1.5); }
100% { transform: scale(1); }
}
@keyframes bounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-20px); }
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
</style>
</head>
<body>
<div style="width: 400px; height: 400px; margin: auto; position: relative; background-color: #f0f8ff; border: 2px solid #000; overflow: hidden;">
<div id="header" style="text-align: center; font-size: 24px; margin: 10px;">
🏆 Challenge: <span id="target">50</span> 🏅
</div>
<canvas id="gameCanvas" width="400" height="300" style="display: block; margin: auto; background-color: #fff;"></canvas>
<div id="controls" style="text-align: center; margin-top: 10px;">
<button onclick="operation('+')" style="font-size: 20px; padding: 5px 10px; margin: 2px;">➕</button>
<button onclick="operation('-')" style="font-size: 20px; padding: 5px 10px; margin: 2px;">➖</button>
<button onclick="operation('×')" style="font-size: 20px; padding: 5px 10px; margin: 2px;">✖️</button>
<button onclick="operation('÷')" style="font-size: 20px; padding: 5px 10px; margin: 2px;">➗</button>
</div>
<div id="footer" style="text-align: center; font-size: 18px; margin-top: 10px;">
🎯 Steps: <span id="steps">0</span> | 🏅 Score: <span id="score">0</span>
</div>
</div>
<script>
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
const targetDisplay = document.getElementById('target');
const stepsDisplay = document.getElementById('steps');
const scoreDisplay = document.getElementById('score');
const width = 10;
const height = 10;
const cellSize = 30;
let grid = [];
let target = Math.floor(Math.random() * 100);
let steps = 0;
let score = 0;
let selected = [];
function initGrid() {
grid = [];
for(let y=0; y<height; y++) {
let row = [];
for(let x=0; x<width; x++) {
row.push(Math.floor(Math.random() * 10));
}
grid.push(row);
}
target = Math.floor(Math.random() * 100);
targetDisplay.textContent = target;
steps = 0;
stepsDisplay.textContent = steps;
drawGrid();
}
function drawGrid() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
for(let y=0; y<height; y++) {
for(let x=0; x<width; x++) {
ctx.strokeStyle = '#000';
ctx.strokeRect(x*cellSize, y*cellSize, cellSize, cellSize);
ctx.font = '20px Arial';
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.fillText(grid[y][x], x*cellSize + cellSize/2, y*cellSize + cellSize/2);
}
}
}
function operation(op) {
// Placeholder for operation logic
steps++;
stepsDisplay.textContent = steps;
animateAction();
// Update score logic here
score += 10;
scoreDisplay.textContent = score;
}
function animateAction() {
const emoji = ['✨','🎉','🔥','💥','🌟'][Math.floor(Math.random()*5)];
ctx.font = '30px Arial';
ctx.fillText(emoji, canvas.width/2, canvas.height/2);
ctx.animate([
{ opacity: 1, transform: 'scale(1)' },
{ opacity: 0, transform: 'scale(2)' }
], {
duration: 500,
iterations: 1
});
}
canvas.addEventListener('click', function(event) {
const rect = canvas.getBoundingClientRect();
const x = Math.floor((event.clientX - rect.left) / cellSize);
const y = Math.floor((event.clientY - rect.top) / cellSize);
selected.push({x, y});
if(selected.length === 2){
// Example operation between two cells
const a = grid[selected[0].y][selected[0].x];
const b = grid[selected[1].y][selected[1].x];
grid[selected[0].y][selected[0].x] = 0;
grid[selected[1].y][selected[1].x] = 0;
steps++;
stepsDisplay.textContent = steps;
score += Math.abs(a - b);
scoreDisplay.textContent = score;
selected = [];
drawGrid();
animateAction();
}
});
initGrid();
</script>
</body>
</html>
```