1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
/**
* This val implements a Dino Code Adventure game using React.
* It uses client-side React for the game logic and UI, and
* includes a server-side endpoint for storing high scores.
*/
/** @jsxImportSource https://esm.sh/react */
import React, { useState, useEffect, useCallback } from "https://esm.sh/react";
import { createRoot } from "https://esm.sh/react-dom/client";
const GRID_SIZE = 5;
const MAX_MOVES = 10;
const ANIMATION_SPEED = 1000; // 1 second per move
const CELL_CONTENTS = {
EMPTY: '',
DINO: '🦕',
ELEPHANT: '🐘',
GIRAFFE: '🦒',
LION: '🦁',
MONKEY: '🐒',
HIPPO: '🦛',
TREE: '🌳',
TELEPORTER: '🌀',
PATH: '👣',
};
const MOVE_TYPES = {
UP: 'U',
DOWN: 'D',
LEFT: 'L',
RIGHT: 'R',
};
const initialGrid = () => {
const grid = Array(GRID_SIZE).fill().map(() => Array(GRID_SIZE).fill(CELL_CONTENTS.EMPTY));
const animals = [CELL_CONTENTS.ELEPHANT, CELL_CONTENTS.GIRAFFE, CELL_CONTENTS.LION, CELL_CONTENTS.MONKEY, CELL_CONTENTS.HIPPO];
// Place dino
grid[0][0] = CELL_CONTENTS.DINO;
// Place animals
animals.forEach(animal => {
let x, y;
do {
x = Math.floor(Math.random() * GRID_SIZE);
y = Math.floor(Math.random() * GRID_SIZE);
} while (grid[y][x] !== CELL_CONTENTS.EMPTY);
grid[y][x] = animal;
});
// Place trees and teleporter
for (let i = 0; i < 2; i++) {
let x, y;
do {
x = Math.floor(Math.random() * GRID_SIZE);
y = Math.floor(Math.random() * GRID_SIZE);
} while (grid[y][x] !== CELL_CONTENTS.EMPTY);
grid[y][x] = CELL_CONTENTS.TREE;
}
let tx, ty;
do {
tx = Math.floor(Math.random() * GRID_SIZE);
ty = Math.floor(Math.random() * GRID_SIZE);
} while (grid[ty][tx] !== CELL_CONTENTS.EMPTY);
grid[ty][tx] = CELL_CONTENTS.TELEPORTER;
return grid;
};
function App() {
const [grid, setGrid] = useState(initialGrid);
const [moves, setMoves] = useState([]);
const [score, setScore] = useState(0);
const [gameOver, setGameOver] = useState(false);
const [message, setMessage] = useState("Welcome to Dino Code Adventure!");
const [showPreview, setShowPreview] = useState(false);
const [previewGrid, setPreviewGrid] = useState(null);
const [isAnimating, setIsAnimating] = useState(false);
const [highScores, setHighScores] = useState([]);
useEffect(() => {
fetchHighScores();
}, []);
const fetchHighScores = async () => {
const response = await fetch('/highscores');
const scores = await response.json();
setHighScores(scores);
};
const addMove = (move) => {
if (moves.length < MAX_MOVES && !gameOver && !isAnimating) {
setMoves([...moves, move]);
setShowPreview(false);
}
};
const deleteMove = (index) => {
if (!isAnimating) {