Colorful Memory Game
About this app
Play a fun and colorful memory matching game to challenge your memory skills! Match pairs of colors and try to complete the game in the least moves.
Colorful Adventure Game Colorful Adventure Game Use arrow keys to move and collect treasures!
Related apps
IPTV M3U8 & EPG Generator Studio | Image to M3U Playlist & Guide
Image to IPTV Converter & M3U Playlist Generator
Image to IPTV Converter & M3U Playlist Generator
Image to M3U Playlist Converter | IPTV & Media Stream Generator
Roulette Row Predictor Pro - Live Pattern & Trend Stats Analyzer
Video to Repeated Sequence Generator - Rhythm & Glitch Loop Maker
LoopCraft - Video to Repeated Sequence Converter
LoopMatrix - Video Sequence Repeater & Stutter Maker
MuffleFX - Video & Audio Low-Pass Filter Studio
Seeding Rate Calculator
Irrigation Set Time Calculator
Fertilizer Nutrient Units Calculator
Put this on your site
Source
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Colorful Adventure Game</title>
<meta name="description" content="Embark on a whimsical adventure to collect treasures while avoiding obstacles. How many treasures can you collect?">
<meta name="keywords" content="adventure game, fun game, colorful game, collect treasures, pixel art, game">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.min.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.6.0/css/fontawesome.min.css" crossorigin="anonymous">
<script type="text/javascript">
try {
document.addEventListener("DOMContentLoaded", function () {
const uniqueColors = ['#FF5733', '#33FF57', '#3357FF', '#F1C40F', '#8E44AD'];
let playerPosition = { x: 50, y: 50 };
let treasuresCollected = 0;
let obstacles = [];
const treasureColors = shuffleArray(uniqueColors);
const gameBoard = document.createElement('div');
gameBoard.className = 'game-board';
document.getElementById('main-container').appendChild(gameBoard);
function createGameBoard() {
for (let i = 0; i < 20; i++) {
for (let j = 0; j < 20; j++) {
const cell = document.createElement('div');
cell.className = 'cell';
cell.dataset.x = i;
cell.dataset.y = j;
if (Math.random() < 0.2) {
cell.classList.add('obstacle');
obstacles.push(cell);
} else if (Math.random() < 0.1) {
cell.classList.add('treasure');
cell.style.backgroundColor = treasureColors[Math.floor(Math.random() * treasureColors.length)];
}
gameBoard.appendChild(cell);
}
}
movePlayer();
}
function movePlayer() {
const player = document.createElement('div');
player.className = 'player';
player.style.left = `${playerPosition.x * 25}px`;
player.style.top = `${playerPosition.y * 25}px`;
gameBoard.appendChild(player);
document.onkeydown = (event) => {
if (event.key === 'ArrowUp') move(-1, 0);
if (event.key === 'ArrowDown') move(1, 0);
if (event.key === 'ArrowLeft') move(0, -1);
if (event.key === 'ArrowRight') move(0, 1);
};
}
function shuffleArray(array) {
return array.sort(() => Math.random() - 0.5);
}
function move(dx, dy) {
const newX = playerPosition.x + dx;
const newY = playerPosition.y + dy;
if (newX >= 0 && newX < 20 && newY >= 0 && newY < 20) {
playerPosition.x = newX;
playerPosition.y = newY;
checkForTreasure();
renderPlayer();
}
}
function checkForTreasure() {
const cell = document.querySelector(`[data-x="${playerPosition.x}"][data-y="${playerPosition.y}"]`);
if (cell.classList.contains('treasure')) {
cell.classList.remove('treasure');
treasuresCollected++;
alert(`You collected a treasure! Total: ${treasuresCollected}`);
}
}
function renderPlayer() {
const playerElements = document.querySelectorAll('.player');
playerElements.forEach(el => el.remove());
movePlayer();
}
const startButton = document.createElement('button');
startButton.innerText = 'Start Adventure';
startButton.className = 'btn btn-success my-3';
startButton.onclick = () => {
gameBoard.innerHTML = '';
createGameBoard();
startButton.remove();
};
document.getElementById('main-container').appendChild(startButton);
});
} catch (error) {
throw error;
}
</script>
<style>
body {
background: linear-gradient(to right, #ff8a00, #e52e71);
color: white;
font-family: 'Comic Sans MS', cursive, sans-serif;
overflow: hidden;
}
.game-board {
display: grid;
grid-template-columns: repeat(20, 25px);
grid-template-rows: repeat(20, 25px);
position: relative;
}
.cell {
width: 25px;
height: 25px;
border: 1px solid #fff;
box-sizing: border-box;
position: relative;
}
.obstacle {
background-color: #7f8c8d;
}
.treasure {
border-radius: 50%;
}
.player {
background-color: #2ecc71;
width: 25px;
height: 25px;
position: absolute;
transition: left 0.1s, top 0.1s;
border-radius: 50%;
}
</style>
</head>
<body>
<div id="main-container" class="container text-center">
<h1 class="my-4">Colorful Adventure Game</h1>
<p>Use arrow keys to move and collect treasures!</p>
</div>
</body>
</html>
NEW APPS
These are apps made by the community!