17:31Testing Gemini 3.8 Flash on Real Coding Challenges (vs. other models)
Sep 2, 2026 · YouTube
17:37Tencent Hy4 Preview Tested: Is It Really Better Than Kimi K3 and GLM 5.3?
Aug 28, 2026 · YouTube
23:58Qwen 3.8 Flash Tested: UI, Coding, Physics & more - compared to Opus 5, Sol Pro, Grok
Aug 27, 2026 · YouTube
Build a memory game — also called concentration or pairs — as one self-contained HTML page.
The theme is fascinating animals. You choose the eight animals and the art style.
The player must be able to see how many moves they have made and how many pairs are left.
When a pair is matched, show that animal's fact.
When the game is won, say so clearly.
Clicking a card is the main interaction.
You may add exactly one button: New game.
Do not add:
Choose 8 animals that are genuinely fascinating — something about each one is strange, extreme, or surprising.
For each animal, provide:
The facts must be true. They will be checked.
Do not use the eight most obvious zoo animals. Lion, tiger, elephant, giraffe, panda, penguin, dolphin and zebra are all forbidden.
You do not create the artwork yourself. You write the prompts, and an image model draws them afterwards.
The art is delivered as one PNG:
art/cards.png
The file is a 2048×2048 3×3 contact sheet:
The grid layout, numbering, and background are fixed. Your job is to specify what belongs in each cell.
The path art/cards.png must appear exactly once in your HTML.
You may slice it with CSS background positioning, a canvas, clipped elements, or another technique.
Because the PNG has a black background, make sure the artwork sits properly on your card design.
The game must be playable before art/cards.png exists.
If the image cannot be loaded, each face-up card must show a readable fallback — the animal's name, a drawn shape, or a styled placeholder. Blank cards are not acceptable, because a memory game with blank faces cannot be played at all.
You may request one additional image, such as a table surface or background.
It must use the form art/<id>.png and it must be optional decoration — the page must look finished without it.
The page must support one URL mode.
#demoDeal a board where 7 of the 8 pairs are already matched and only one pair is left to find.
This exists so the win can be filmed without playing a whole game.
It must be a real board state that the normal game logic plays out — not a fake animation.
The game must be a single HTML file.
It must:
art/ filesDo not use:
localStoragesessionStorageindexedDBThe page must have no scrollbars at any window size. The board should scale to fit whatever space it is given.
Sound is optional. If you add any, generate it with the Web Audio API — no audio files.
Your response must contain exactly these four sections.
One line: what the game is called and what it looks like.
Provide exactly one fenced html code block containing the complete HTML page and nothing else.
Provide exactly one fenced json code block using this structure:
{
"game": { "name": "TURN TWO CARDS" },
"sheet": {
"style": "One paragraph, appended to every cell prompt below: medium, palette, lighting, line quality. This is what makes nine separate images look like one deck.",
"cells": [
{
"cell": 0,
"id": "axolotl",
"name": "Axolotl",
"role": "animal",
"prompt": "What to draw in this cell. One animal.",
"fact": "It regrows lost limbs, and even parts of its brain, without scarring."
},
{ "cell": 8, "id": "back", "name": "Card back", "role": "back", "prompt": "The pattern on the back of every card." }
]
},
"extras": [{ "id": "table", "aspect": "16:9", "prompt": "..." }]
}
Rules:
cells contains exactly 9 entries.cell values are 0–8 with no gaps or duplicates."role": "animal" and a fact."role": "back" and no fact.id is a single lowercase token and is unique.fact is 120 characters or fewer.extras may contain at most one entry, or be left out.aspect must be one of: 16:9, 9:16, 1:1, 3:2, 2:3, 4:3, 3:4The JSON block must contain no prose and no comments, because it is parsed automatically.
Four bullets:
art/cards.png is unavailable."Wild Memory" is a beautifully styled 4x4 memory card game featuring fascinating animals with vibrant illustrations and surprising facts revealed when pairs are matched.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Wild Memory</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
--bg-color: #1a1a2e;
--card-bg: #16213e;
--accent-color: #e94560;
--text-color: #f1f1f1;
--flip-duration: 0.6s;
--mismatch-delay: 1000ms;
}
body {
min-height: 100vh;
background-color: var(--bg-color);
color: var(--text-color);
font-family: 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
overflow: hidden;
display: flex;
flex-direction: column;
align-items: center;
padding: 1rem;
}
.game-header {
width: 100%;
max-width: 800px;
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1rem;
z-index: 10;
}
.game-title {
font-size: 1.8rem;
color: var(--accent-color);
}
.stat {
font-size: 1.1rem;
font-weight: 500;
}
.btn {
background-color: var(--accent-color);
color: var(--text-color);
border: none;
padding: 0.6rem 1.2rem;
border-radius: 6px;
font-size: 1rem;
font-weight: 600;
cursor: pointer;
transition: background-color 0.3s ease;
}
.btn:hover {
background-color: #ff6b81;
}
.grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0.6rem;
width: 90vmin;
max-width: 700px;
aspect-ratio: 1 / 1;
}
.card {
perspective: 1000px;
cursor: pointer;
}
.card.matched {
cursor: default;
pointer-events: none;
}
.card-inner {
position: relative;
width: 100%;
height: 100%;
transform-style: preserve-3d;
transition: transform var(--flip-duration) ease;
}
.card.flipped .card-inner {
transform: rotateY(180deg);
}
.card-face {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
border-radius: 10px;
border: 3px solid var(--text-color);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
background-color: var(--card-bg);
display: flex;
align-items: center;
justify-content: center;
background-size: 300% 300%;
}
.card-face--back {
background-image: url('art/cards.png');
}
.card-face--front {
background-image: url('art/cards.png');
transform: rotateY(180deg);
}
.fallback-name {
font-size: 1.1rem;
font-weight: bold;
text-align: center;
padding: 0.5rem;
color: var(--text-color);
}
body.no-art .card-face {
background-image: none;
}
body.no-art .card-face--front {
background: linear-gradient(135deg, #2c3e50 0%, #1a252f 100%);
}
body.no-art .card-face--back {
background: repeating-linear-gradient(
45deg,
var(--accent-color),
var(--accent-color) 10px,
#16213e 10px,
#16213e 20px
);
}
.fact-display {
position: fixed;
bottom: 2rem;
left: 50%;
transform: translateX(-50%);
max-width: 800px;
width: 90%;
background-color: rgba(0, 0, 0, 0.85);
padding: 1rem 1.5rem;
border-radius: 12px;
text-align: center;
opacity: 0;
transition: opacity 0.4s ease;
z-index: 8;
line-height: 1.5;
}
.fact-display.visible {
opacity: 1;
}
.win-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.75);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 1.5rem;
opacity: 0;
pointer-events: none;
transition: opacity 0.5s ease;
z-index: 5;
}
.win-overlay.active {
opacity: 1;
pointer-events: auto;
}
.win-message h2 {
font-size: 3rem;
color: var(--accent-color);
margin-bottom: 0.5rem;
}
.win-message p {
font-size: 1.3rem;
}
@media (max-width: 600px) {
.game-header {
flex-wrap: wrap;
gap: 0.5rem;
}
.game-title {
order: -1;
width: 100%;
text-align: center;
font-size: 1.5rem;
}
.stat, .btn {
font-size: 0.9rem;
}
.fallback-name {
font-size: 0.9rem;
}
.win-message h2 {
font-size: 2rem;
}
.win-message p {
font-size: 1rem;
}
}
</style>
</head>
<body>
<header class="game-header">
<div class="stat">Moves: <span id="moves">0</span></div>
<h1 class="game-title">Wild Memory</h1>
<div class="stat">Pairs Left: <span id="pairs-left">8</span></div>
<button id="new-game-btn" class="btn">New Game</button>
</header>
<div id="game-grid" class="grid"></div>
<div id="fact-display" class="fact-display"></div>
<div id="win-overlay" class="win-overlay">
<div class="win-message">
<h2>You Win!</h2>
<p>Completed in <span id="final-moves">0</span> moves</p>
</div>
</div>
<script>
const animals = [
{
id: 'axolotl',
name: 'Axolotl',
cell: 0,
fact: 'Can regenerate lost limbs, spinal cords, hearts, and even parts of their brains without scarring.'
},
{
id: 'narwhal',
name: 'Narwhal',
cell: 1,
fact: 'Their iconic "tusk" is actually a sensory tooth with up to 10 million nerve endings.'
},
{
id: 'platypus',
name: 'Platypus',
cell: 2,
fact: 'One of only two mammals that lay eggs, and males have venomous spurs on their hind legs.'
},
{
id: 'mantis-shrimp',
name: 'Mantis Shrimp',
cell: 3,
fact: 'Have the fastest punch in the animal kingdom, and can see 16 color channels (humans see 3).'
},
{
id: 'glass-frog',
name: 'Glass Frog',
cell: 4,
fact: 'Have transparent abdominal skin, allowing you to see their internal organs like the heart and liver.'
},
{
id: 'tardigrade',
name: 'Tardigrade',
cell: 5,
fact: 'Can survive in space, extreme temperatures, radiation, and decades without food or water.'
},
{
id: 'pistol-shrimp',
name: 'Pistol Shrimp',
cell: 6,
fact: 'Claws snap shut so fast they create a sonic bubble that stuns prey with a 218dB shockwave.'
},
{
id: 'lyrebird',
name: 'Lyrebird',
cell: 7,
fact: 'Can mimic almost any sound they hear, including chainsaws, camera shutters, and car alarms.'
}
];
let gameState = {
cards: [],
moves: 0,
pairsLeft: 8,
selectedCards: [],
isProcessing: false
};
const movesEl = document.getElementById('moves');
const pairsLeftEl = document.getElementById('pairs-left');
const gridEl = document.getElementById('game-grid');
const factDisplayEl = document.getElementById('fact-display');
const winOverlayEl = document.getElementById('win-overlay');
const finalMovesEl = document.getElementById('final-moves');
const newGameBtn = document.getElementById('new-game-btn');
function getCellPosition(cell) {
const row = Math.floor(cell / 3);
const col = cell % 3;
return { row, col };
}
function shuffle(array) {
let currentIndex = array.length, randomIndex;
while (currentIndex != 0) {
randomIndex = Math.floor(Math.random() * currentIndex);
currentIndex--;
[array[currentIndex], array[randomIndex]] = [array[randomIndex], array[currentIndex]];
}
return array;
}
function updateStats() {
movesEl.textContent = gameState.moves;
pairsLeftEl.textContent = gameState.pairsLeft;
}
function showFact(animal) {
factDisplayEl.innerHTML = `<strong>${animal.name}:</strong> ${animal.fact}`;
factDisplayEl.classList.add('visible');
setTimeout(() => {
factDisplayEl.classList.remove('visible');
}, 5000);
}
function checkWin() {
if (gameState.pairsLeft === 0) {
finalMovesEl.textContent = gameState.moves;
winOverlayEl.classList.add('active');
}
}
function resetSelected() {
gameState.selectedCards.forEach(card => {
card.element.classList.remove('flipped');
});
gameState.selectedCards = [];
gameState.isProcessing = false;
}
function checkMatch() {
const [card1, card2] = gameState.selectedCards;
gameState.moves++;
updateStats();
if (card1.animal.id === card2.animal.id) {
card1.element.classList.add('matched');
card2.element.classList.add('matched');
card1.data.isMatched = true;
card2.data.isMatched = true;
gameState.pairsLeft--;
updateStats();
showFact(card1.animal);
gameState.selectedCards = [];
gameState.isProcessing = false;
checkWin();
} else {
gameState.isProcessing = true;
setTimeout(resetSelected, 1000);
}
}
function flipCard(cardData, cardElement, animal) {
if (gameState.isProcessing ||
cardData.isFlipped ||
cardData.isMatched ||
gameState.selectedCards.length >= 2) {
return;
}
cardData.isFlipped = true;
cardElement.classList.add('flipped');
gameState.selectedCards.push({
data: cardData,
element: cardElement,
animal: animal
});
if (gameState.selectedCards.length === 2) {
checkMatch();
}
}
function createCardElement(cardData, index) {
const animal = cardData.animal;
const card = document.createElement('div');
card.className = 'card';
card.dataset.index = index;
const frontPos = getCellPosition(animal.cell);
const backPos = getCellPosition(8);
card.innerHTML = `
<div class="card-inner">
<div class="card-face card-face--back" style="--col: ${backPos.col}; --row: ${backPos.row};"></div>
<div class="card-face card-face--front" style="--col: ${frontPos.col}; --row: ${frontPos.row};">
<span class="fallback-name">${animal.name}</span>
</div>
</div>
`;
if (cardData.isFlipped) {
card.classList.add('flipped');
}
if (cardData.isMatched) {
card.classList.add('matched');
}
card.addEventListener('click', () => flipCard(cardData, card, animal));
return card;
}
function renderBoard() {
gridEl.innerHTML = '';
gameState.cards.forEach((cardData, index) => {
const cardEl = createCardElement(cardData, index);
gridEl.appendChild(cardEl);
});
}
function initGame(demo = false) {
gameState = {
cards: [],
moves: demo ? 15 : 0,
pairsLeft: demo ? 1 : 8,
selectedCards: [],
isProcessing: false
};
winOverlayEl.classList.remove('active');
factDisplayEl.classList.remove('visible');
animals.forEach(animal => {
for (let i = 0; i < 2; i++) {
gameState.cards.push({
animal: animal,
isFlipped: false,
isMatched: false
});
}
});
shuffle(gameState.cards);
if (demo) {
let matchedCount = 0;
for (let i = 0; i < gameState.cards.length && matchedCount < 14; i++) {
if (!gameState.cards[i].isMatched) {
const pairIndex = gameState.cards.findIndex((card, idx) =>
idx > i &&
card.animal.id === gameState.cards[i].animal.id &&
!card.isMatched
);
if (pairIndex !== -1 && matchedCount < 14) {
gameState.cards[i].isFlipped = true;
gameState.cards[i].isMatched = true;
gameState.cards[pairIndex].isFlipped = true;
gameState.cards[pairIndex].isMatched = true;
matchedCount += 2;
}
}
}
}
updateStats();
renderBoard();
}
function handleArtError() {
document.body.classList.add('no-art');
}
function checkDemoMode() {
if (window.location.hash === '#demo') {
initGame(true);
} else {
initGame(false);
}
}
const artCheck = new Image();
artCheck.onerror = handleArtError;
artCheck.src = 'art/cards.png';
newGameBtn.addEventListener('click', () => {
window.location.hash = '';
initGame(false);
});
window.addEventListener('hashchange', checkDemoMode);
checkDemoMode();
</script>
</body>
</html>
{
"game": { "name": "Wild Memory" },
"sheet": {
"style": "stylized digital illustration with bold black outlines, vibrant saturated colors, soft ambient lighting, smooth gradients, flat black background, centered composition, cartoon-realism style, high contrast",
"cells": [
{
"cell": 0,
"id": "axolotl",
"name": "Axolotl",
"role": "animal",
"prompt": "A cute pink axolotl with frilly gills, floating gently, big expressive eyes, detailed skin texture",
"fact": "Can regenerate lost limbs, spinal cords, hearts, and even parts of their brains without scarring."
},
{
"cell": 1,
"id": "narwhal",
"name": "Narwhal",
"role": "animal",
"prompt": "A narwhal with a long spiraled tusk, swimming in deep blue ocean, light filtering from above, smooth skin",
"fact": "Their iconic \"tusk\" is actually a sensory tooth with up to 10 million nerve endings."
},
{
"cell": 2,
"id": "platypus",
"name": "Platypus",
"role": "animal",
"prompt": "A platypus with a duck bill and beaver tail, waddling on green grass, webbed feet visible, soft fur",
"fact": "One of only two mammals that lay eggs, and males have venomous spurs on their hind legs."
},
{
"cell": 3,
"id": "mantis-shrimp",
"name": "Mantis Shrimp",
"role": "animal",
"prompt": "A colorful mantis shrimp with large club-like claws, bright red, blue, and green exoskeleton, detailed eyes",
"fact": "Have the fastest punch in the animal kingdom, and can see 16 color channels (humans see 3)."
},
{
"cell": 4,
"id": "glass-frog",
"name": "Glass Frog",
"role": "animal",
"prompt": "A small green glass frog sitting on a leaf, transparent belly showing visible heart and intestines, big eyes",
"fact": "Have transparent abdominal skin, allowing you to see their internal organs like the heart and liver."
},
{
"cell": 5,
"id": "tardigrade",
"name": "Tardigrade",
"role": "animal",
"prompt": "A microscopic tardigrade (water bear) with chubby body and eight legs, detailed texture, cute cartoonish look",
"fact": "Can survive in space, extreme temperatures, radiation, and decades without food or water."
},
{
"cell": 6,
"id": "pistol-shrimp",
"name": "Pistol Shrimp",
"role": "animal",
"prompt": "A pistol shrimp with one oversized claw, bright orange and yellow exoskeleton, claw in snapping position",
"fact": "Claws snap shut so fast they create a sonic bubble that stuns prey with a 218dB shockwave."
},
{
"cell": 7,
"id": "lyrebird",
"name": "Lyrebird",
"role": "animal",
"prompt": "A superb lyrebird with elaborate tail feathers spread in a display, brown plumage, standing on a forest floor",
"fact": "Can mimic almost any sound they hear, including chainsaws, camera shutters, and car alarms."
},
{
"cell": 8,
"id": "back",
"name": "Card back",
"role": "back",
"prompt": "Intricate symmetrical geometric pattern with interwoven stylized animal silhouettes in gold and deep purple, centered, bold outlines"
}
]
},
"extras": [
{
"id": "table",
"aspect": "16:9",
"prompt": "Dark green felt table surface texture, subtle woven pattern, soft lighting, even color, slight wear for a cozy game night feel"
}
]
}