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 creates a Flappy Bird game with a slot machine feature that randomly activates
// and adds new features throughout the game. It uses React for rendering the UI and
// manages game state on the client-side. The game logic is implemented using
// requestAnimationFrame for smooth animation.
/** @jsxImportSource https://esm.sh/react */
import React, { useState, useEffect, useRef } from "https://esm.sh/react";
import { createRoot } from "https://esm.sh/react-dom/client";
const GAME_WIDTH = 400;
const GAME_HEIGHT = 600;
const GRAVITY = 0.5;
const JUMP_STRENGTH = -10;
const PIPE_WIDTH = 60;
const PIPE_GAP = 200;
function Bird({ y, invincible }) {
return (
<div style={{
position: 'absolute',
left: '50px',
top: `${y}px`,
width: '30px',
height: '30px',
backgroundColor: invincible ? 'gold' : 'yellow',
borderRadius: '50%',
transition: 'background-color 0.3s',
cursor: 'pointer',
}}>
🐤
</div>
);
}
function Pipe({ x, height, isTop, isGhost }) {
return (
<div style={{
position: 'absolute',
left: `${x}px`,
[isTop ? 'top' : 'bottom']: '0',
width: `${PIPE_WIDTH}px`,
height: `${height}px`,
backgroundColor: isGhost ? 'rgba(0, 255, 0, 0.5)' : 'green',
transition: 'background-color 0.3s',
}} />
);
}
function GameOver({ score, onRestart }) {
return (
<div style={{
position: 'absolute',
top: '50%',
left: '50%',
transform: 'translate(-50%, -50%)',
textAlign: 'center',
}}>
<h2>Game Over</h2>
<p>Score: {score}</p>
<button onClick={onRestart}>Restart</button>
</div>
);
}
function BloodEffect({ x, y }) {
return (
<div style={{
position: 'absolute',
left: `${x}px`,
top: `${y}px`,
width: '50px',
height: '50px',
backgroundColor: 'red',
borderRadius: '50%',
opacity: 0.7,
animation: 'expand 0.5s ease-out',
}} />
);
}
function SlotMachine({ spinning, result, onSpin }) {
return (
<div style={{
position: 'absolute',
top: '10px',
right: '10px',
backgroundColor: 'rgba(0, 0, 0, 0.8)',
padding: '5px',
borderRadius: '5px',
color: 'white',
textAlign: 'center',
width: '120px',
}}>
<div style={{ fontSize: '24px', marginBottom: '5px' }}>🎰</div>
{spinning ? (
<div style={{ fontSize: '14px' }}>Spinning...</div>
) : (
<>
<div style={{ fontSize: '14px', marginBottom: '5px' }}>
{result ? `Result: ${result}` : 'Spin the slot!'}