<html><head><base href="https://crypto-block-game.com/">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Crypto Block Game</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f0f0f0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.game-container {
background-color: white;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
padding: 20px;
text-align: center;
}
.game-board {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 10px;
margin-bottom: 20px;
}
.block {
width: 60px;
height: 60px;
border: 2px solid #ddd;
border-radius: 5px;
display: flex;
justify-content: center;
align-items: center;
font-weight: bold;
cursor: pointer;
transition: background-color 0.3s;
}
.block:hover {
background-color: #f0f0f0;
}
.selected {
background-color: #e0e0e0;
}
.controls {
margin-top: 20px;
}
button {
padding: 10px 20px;
font-size: 16px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
margin: 0 10px;
}
button:hover {
background-color: #45a049;
}
.score {
font-size: 24px;
margin-bottom: 20px;
}
</style>
</head>
<body>
<div class="game-container">
<h1>Crypto Block Game</h1>
<div class="score">Score: <span id="score">0</span></div>
<div class="game-board" id="gameBoard"></div>
<div class="controls">
<button id="shuffleBtn">Shuffle</button>
<button id="resetBtn">Reset</button>
</div>
</div>
<script>
const cryptoSymbols = ['BTC', 'ETH', 'ADA', 'SOL', 'DOGE', 'QQ', 'NO', 'PEPE', 'GF', 'PANDA', 'YAYA', 'SATOSHI', 'CAT', 'ORD', 'CLOWN', 'YY', 'JUMP', 'DONALD', 'A', 'MIMI', 'MIQI', 'RABBIT', 'SHEEP', 'SNAKE', 'PEACE', 'RAT', 'MONKEY', 'DRAGON', 'X', 'SEAL', 'COW', 'OTTER', 'ORD(', 'ORD{', 'ORD%', 'ORD<'];
let score = 0;
let selectedBlocks = [];
const gameBoard = document.getElementById('gameBoard');
const scoreElement = document.getElementById('score');
const shuffleBtn = document.getElementById('shuffleBtn');
const resetBtn = document.getElementById('resetBtn');
function createBlock(symbol) {
const block = document.createElement('div');
block.className = 'block';
block.textContent = symbol;
block.addEventListener('click', () => selectBlock(block));
return block;
}
function initializeGame() {
gameBoard.innerHTML = '';
const shuffledSymbols = [...cryptoSymbols, ...cryptoSymbols].sort(() => Math.random() - 0.5);
shuffledSymbols.forEach(symbol => {
gameBoard.appendChild(createBlock(symbol));
});
}
function selectBlock(block) {
if (selectedBlocks.length < 2 && !selectedBlocks.includes(block) && !block.classList.contains('matched')) {
block.classList.add('selected');
selectedBlocks.push(block);
if (selectedBlocks.length === 2) {
setTimeout(checkMatch, 500);
}
}
}
function checkMatch() {
const [block1, block2] = selectedBlocks;
if (block1.textContent === block2.textContent) {
block1.classList.add('matched');
block2.classList.add('matched');
score += 10;
scoreElement.textContent = score;
} else {
block1.classList.remove('selected');
block2.classList.remove('selected');
}
selectedBlocks = [];
if (document.querySelectorAll('.matched').length === gameBoard.children.length) {
alert('Congratulations! You\'ve matched all the blocks!');
}
}
function shuffleBoard() {
const blocks = Array.from(gameBoard.children);
blocks.sort(() => Math.random() - 0.5);
blocks.forEach(block => gameBoard.appendChild(block));
}
shuffleBtn.addEventListener('click', shuffleBoard);
resetBtn.addEventListener('click', () => {
score = 0;
scoreElement.textContent = score;
initializeGame();
});
initializeGame();
</script>
</body></html>
