ma-dino-game 0.1.4 → 0.1.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/components/DinoGame/dino.css +231 -0
- package/build/components/DinoGame/index.d.ts +5 -0
- package/build/components/DinoGame/index.d.ts.map +1 -0
- package/build/components/DinoGame/index.js +112 -0
- package/build/lib.d.ts +3 -0
- package/build/lib.d.ts.map +1 -0
- package/build/lib.js +10 -0
- package/package.json +19 -14
|
@@ -0,0 +1,231 @@
|
|
|
1
|
+
/* $border-color: #333; */
|
|
2
|
+
/* $bg-color: #fff;
|
|
3
|
+
50px: 50px;
|
|
4
|
+
$cactus-color: red; */
|
|
5
|
+
|
|
6
|
+
.game {
|
|
7
|
+
width: 600px;
|
|
8
|
+
height: 200px;
|
|
9
|
+
border: 2px solid #333;
|
|
10
|
+
margin: 100px auto;
|
|
11
|
+
position: relative;
|
|
12
|
+
overflow: hidden;
|
|
13
|
+
background: #fff;
|
|
14
|
+
|
|
15
|
+
.dino {
|
|
16
|
+
width: 50px;
|
|
17
|
+
height: 50px;
|
|
18
|
+
position: absolute;
|
|
19
|
+
bottom: 0;
|
|
20
|
+
left: 50px;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
.cactus {
|
|
24
|
+
width: 50px;
|
|
25
|
+
position: absolute;
|
|
26
|
+
bottom: 0;
|
|
27
|
+
left: 600px;
|
|
28
|
+
animation: moveCactus 2s linear infinite;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
.score {
|
|
32
|
+
position: absolute;
|
|
33
|
+
top: 10px;
|
|
34
|
+
left: 10px;
|
|
35
|
+
font-weight: bold;
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
@keyframes moveCactus {
|
|
39
|
+
from {
|
|
40
|
+
left: 600px;
|
|
41
|
+
}
|
|
42
|
+
to {
|
|
43
|
+
left: -20px;
|
|
44
|
+
}
|
|
45
|
+
}
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
|
|
49
|
+
.game {
|
|
50
|
+
position: relative;
|
|
51
|
+
width: 600px;
|
|
52
|
+
height: 200px;
|
|
53
|
+
margin: 100px auto;
|
|
54
|
+
overflow: hidden;
|
|
55
|
+
border: 2px solid #333;
|
|
56
|
+
background: #cceffc; /* Light sky */
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
/* Ground bar */
|
|
60
|
+
.ground {
|
|
61
|
+
position: absolute;
|
|
62
|
+
bottom: 0;
|
|
63
|
+
width: 100%;
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
/* Cloud base style */
|
|
67
|
+
.cloud {
|
|
68
|
+
position: absolute;
|
|
69
|
+
width: 80px;
|
|
70
|
+
height: 40px;
|
|
71
|
+
background: #fff;
|
|
72
|
+
border-radius: 50px;
|
|
73
|
+
opacity: 0.7;
|
|
74
|
+
animation: moveCloud 30s linear infinite;
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
.cloud::before,
|
|
78
|
+
.cloud::after {
|
|
79
|
+
content: '';
|
|
80
|
+
position: absolute;
|
|
81
|
+
background: #fff;
|
|
82
|
+
border-radius: 50%;
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
.cloud::before {
|
|
86
|
+
width: 40px;
|
|
87
|
+
height: 40px;
|
|
88
|
+
top: -10px;
|
|
89
|
+
left: 10px;
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
.cloud::after {
|
|
93
|
+
width: 30px;
|
|
94
|
+
height: 30px;
|
|
95
|
+
top: 0;
|
|
96
|
+
left: 40px;
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
/* Different starting positions */
|
|
100
|
+
.cloud1 {
|
|
101
|
+
top: 20px;
|
|
102
|
+
left: 100%;
|
|
103
|
+
animation-delay: 0s;
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
.cloud2 {
|
|
107
|
+
top: 60px;
|
|
108
|
+
left: 150%;
|
|
109
|
+
animation-delay: 10s;
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
/* Cloud movement */
|
|
113
|
+
@keyframes moveCloud {
|
|
114
|
+
0% {
|
|
115
|
+
left: 100%;
|
|
116
|
+
}
|
|
117
|
+
100% {
|
|
118
|
+
left: -100px;
|
|
119
|
+
}
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
|
|
123
|
+
.mountains {
|
|
124
|
+
position: absolute;
|
|
125
|
+
bottom: 0px; /* just above ground */
|
|
126
|
+
width: 100%;
|
|
127
|
+
height: 100px;
|
|
128
|
+
pointer-events: none;
|
|
129
|
+
}
|
|
130
|
+
|
|
131
|
+
/* Common mountain styles */
|
|
132
|
+
.mountain {
|
|
133
|
+
position: absolute;
|
|
134
|
+
bottom: 0;
|
|
135
|
+
width: 120px;
|
|
136
|
+
height: 100px;
|
|
137
|
+
background: #99b3cc; /* mountain color */
|
|
138
|
+
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
|
|
139
|
+
opacity: 0.8;
|
|
140
|
+
}
|
|
141
|
+
|
|
142
|
+
.mountain1 {
|
|
143
|
+
left: 100px;
|
|
144
|
+
height: 90px;
|
|
145
|
+
width: 120px;
|
|
146
|
+
background: #89aacc;
|
|
147
|
+
}
|
|
148
|
+
|
|
149
|
+
.mountain2 {
|
|
150
|
+
left: 300px;
|
|
151
|
+
height: 50px;
|
|
152
|
+
width: 50px;
|
|
153
|
+
background: #7799bb;
|
|
154
|
+
}
|
|
155
|
+
|
|
156
|
+
|
|
157
|
+
.tree {
|
|
158
|
+
position: absolute;
|
|
159
|
+
bottom: 0px; /* sit on ground */
|
|
160
|
+
width: 10px;
|
|
161
|
+
height: 20px;
|
|
162
|
+
background: #3e6131; /* Tree trunk color */
|
|
163
|
+
animation: moveTree 12s linear infinite;
|
|
164
|
+
z-index: 0;
|
|
165
|
+
}
|
|
166
|
+
|
|
167
|
+
/* Tree foliage (just using ::before) */
|
|
168
|
+
.tree::before {
|
|
169
|
+
content: '';
|
|
170
|
+
position: absolute;
|
|
171
|
+
bottom: 15px;
|
|
172
|
+
left: -10px;
|
|
173
|
+
width: 30px;
|
|
174
|
+
height: 25px;
|
|
175
|
+
background: #4caf50;
|
|
176
|
+
border-radius: 50%;
|
|
177
|
+
z-index: -1;
|
|
178
|
+
}
|
|
179
|
+
|
|
180
|
+
/* Individual tree positions */
|
|
181
|
+
.tree1 {
|
|
182
|
+
left: 50%;
|
|
183
|
+
animation-delay: 0s;
|
|
184
|
+
}
|
|
185
|
+
.tree2 {
|
|
186
|
+
left: 100%;
|
|
187
|
+
animation-delay: 5s;
|
|
188
|
+
}
|
|
189
|
+
.tree3 {
|
|
190
|
+
left: 150%;
|
|
191
|
+
animation-delay: 10s;
|
|
192
|
+
}
|
|
193
|
+
|
|
194
|
+
/* Tree movement animation */
|
|
195
|
+
@keyframes moveTree {
|
|
196
|
+
0% {
|
|
197
|
+
left: 100%;
|
|
198
|
+
}
|
|
199
|
+
100% {
|
|
200
|
+
left: -40px;
|
|
201
|
+
}
|
|
202
|
+
}
|
|
203
|
+
|
|
204
|
+
|
|
205
|
+
.bumpy-wrapper {
|
|
206
|
+
position: absolute;
|
|
207
|
+
bottom: 0;
|
|
208
|
+
width: 100%;
|
|
209
|
+
height: 20px;
|
|
210
|
+
overflow: hidden;
|
|
211
|
+
}
|
|
212
|
+
|
|
213
|
+
.bumpy-svg {
|
|
214
|
+
position: absolute;
|
|
215
|
+
width: 200%; /* double width for seamless scroll */
|
|
216
|
+
height: 100%;
|
|
217
|
+
animation: moveBumps 10s linear infinite;
|
|
218
|
+
}
|
|
219
|
+
|
|
220
|
+
.bumpy-path {
|
|
221
|
+
fill: #888;
|
|
222
|
+
}
|
|
223
|
+
|
|
224
|
+
@keyframes moveBumps {
|
|
225
|
+
from {
|
|
226
|
+
transform: translateX(0);
|
|
227
|
+
}
|
|
228
|
+
to {
|
|
229
|
+
transform: translateX(-50%);
|
|
230
|
+
}
|
|
231
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/DinoGame/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAC3D,OAAO,YAAY,CAAC;AAEpB,QAAA,MAAM,QAAQ,yBAqHb,CAAC;AAEF,eAAe,QAAQ,CAAC"}
|
|
@@ -0,0 +1,112 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
+
if (k2 === undefined) k2 = k;
|
|
4
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
5
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
6
|
+
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
7
|
+
}
|
|
8
|
+
Object.defineProperty(o, k2, desc);
|
|
9
|
+
}) : (function(o, m, k, k2) {
|
|
10
|
+
if (k2 === undefined) k2 = k;
|
|
11
|
+
o[k2] = m[k];
|
|
12
|
+
}));
|
|
13
|
+
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
14
|
+
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
15
|
+
}) : function(o, v) {
|
|
16
|
+
o["default"] = v;
|
|
17
|
+
});
|
|
18
|
+
var __importStar = (this && this.__importStar) || function (mod) {
|
|
19
|
+
if (mod && mod.__esModule) return mod;
|
|
20
|
+
var result = {};
|
|
21
|
+
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
|
|
22
|
+
__setModuleDefault(result, mod);
|
|
23
|
+
return result;
|
|
24
|
+
};
|
|
25
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
26
|
+
var react_1 = __importStar(require("react"));
|
|
27
|
+
require("./dino.css");
|
|
28
|
+
var DinoGame = function () {
|
|
29
|
+
var dinoRef = (0, react_1.useRef)(null);
|
|
30
|
+
var cactusRef = (0, react_1.useRef)(null);
|
|
31
|
+
var _a = (0, react_1.useState)(0), score = _a[0], setScore = _a[1];
|
|
32
|
+
var _b = (0, react_1.useState)(false), isJumping = _b[0], setIsJumping = _b[1];
|
|
33
|
+
var gameOver = false;
|
|
34
|
+
// Jump Logic
|
|
35
|
+
var jump = function () {
|
|
36
|
+
if (isJumping || gameOver)
|
|
37
|
+
return;
|
|
38
|
+
setIsJumping(true);
|
|
39
|
+
var pos = 0;
|
|
40
|
+
var upInterval = setInterval(function () {
|
|
41
|
+
if (pos >= 90) {
|
|
42
|
+
clearInterval(upInterval);
|
|
43
|
+
var downInterval_1 = setInterval(function () {
|
|
44
|
+
if (pos <= 0) {
|
|
45
|
+
clearInterval(downInterval_1);
|
|
46
|
+
setIsJumping(false);
|
|
47
|
+
}
|
|
48
|
+
else {
|
|
49
|
+
pos -= 4;
|
|
50
|
+
if (dinoRef.current)
|
|
51
|
+
dinoRef.current.style.bottom = "".concat(pos, "px");
|
|
52
|
+
}
|
|
53
|
+
}, 25);
|
|
54
|
+
}
|
|
55
|
+
else {
|
|
56
|
+
pos += 4;
|
|
57
|
+
if (dinoRef.current)
|
|
58
|
+
dinoRef.current.style.bottom = "".concat(pos, "px");
|
|
59
|
+
}
|
|
60
|
+
}, 20);
|
|
61
|
+
};
|
|
62
|
+
// Key listener
|
|
63
|
+
(0, react_1.useEffect)(function () {
|
|
64
|
+
var handleKey = function (e) {
|
|
65
|
+
if (e.code === 'Space' || e.code === 'ArrowUp')
|
|
66
|
+
jump();
|
|
67
|
+
};
|
|
68
|
+
window.addEventListener('keydown', handleKey);
|
|
69
|
+
return function () { return window.removeEventListener('keydown', handleKey); };
|
|
70
|
+
}, [isJumping, gameOver]);
|
|
71
|
+
// Collision + Score Logic
|
|
72
|
+
(0, react_1.useEffect)(function () {
|
|
73
|
+
var interval = setInterval(function () {
|
|
74
|
+
if (!gameOver && dinoRef.current && cactusRef.current) {
|
|
75
|
+
var dinoRect = dinoRef.current.getBoundingClientRect();
|
|
76
|
+
var cactusRect = cactusRef.current.getBoundingClientRect();
|
|
77
|
+
if (cactusRect.left < dinoRect.right &&
|
|
78
|
+
cactusRect.right > dinoRect.left &&
|
|
79
|
+
cactusRect.bottom > dinoRect.top) {
|
|
80
|
+
// setGameOver(true);
|
|
81
|
+
// cactusRef.current.style.animationPlayState = 'paused';
|
|
82
|
+
// alert('Game Over! Final Score: ' + score);
|
|
83
|
+
}
|
|
84
|
+
else {
|
|
85
|
+
setScore(function (prev) { return prev + 1; });
|
|
86
|
+
}
|
|
87
|
+
}
|
|
88
|
+
}, 100);
|
|
89
|
+
return function () { return clearInterval(interval); };
|
|
90
|
+
}, [gameOver, score]);
|
|
91
|
+
return (react_1.default.createElement("div", { className: "game" },
|
|
92
|
+
react_1.default.createElement("div", { className: "mountains" },
|
|
93
|
+
react_1.default.createElement("div", { className: "mountain mountain1" }),
|
|
94
|
+
react_1.default.createElement("div", { className: "mountain mountain2" })),
|
|
95
|
+
react_1.default.createElement("div", { className: "bumpy-wrapper" },
|
|
96
|
+
react_1.default.createElement("svg", { className: "bumpy-svg", viewBox: "0 0 600 100", preserveAspectRatio: "none" },
|
|
97
|
+
react_1.default.createElement("path", { className: "bumpy-path", d: "M0,100 \n L0,80 \n Q30,60 60,80 \n Q90,40 120,80 \n Q150,60 180,70 \n Q210,30 240,80 \n Q270,50 300,70 \n Q330,40 360,80 \n Q390,60 420,70 \n Q450,50 480,80 \n Q510,60 540,70 \n Q570,55 600,80 \n L600,100 Z" }))),
|
|
98
|
+
react_1.default.createElement("div", { className: "tree tree1" }),
|
|
99
|
+
react_1.default.createElement("div", { className: "tree tree2" }),
|
|
100
|
+
react_1.default.createElement("div", { className: "tree tree3" }),
|
|
101
|
+
react_1.default.createElement("div", { className: "cloud cloud1" }),
|
|
102
|
+
react_1.default.createElement("div", { className: "cloud cloud2" }),
|
|
103
|
+
react_1.default.createElement("div", { className: "ground" }),
|
|
104
|
+
react_1.default.createElement("div", { ref: dinoRef, className: "dino" },
|
|
105
|
+
react_1.default.createElement("img", { style: { width: '100%' }, src: "https://img.itch.zone/aW1hZ2UvNTA5MzIwLzI2NDIzNTEucG5n/347x500/kwmG6Z.png" })),
|
|
106
|
+
react_1.default.createElement("div", { ref: cactusRef, className: "cactus" },
|
|
107
|
+
react_1.default.createElement("img", { style: { width: '100%' }, src: "https://img.itch.zone/aW1hZ2UvNTA5MzIwLzI2NDIzNTcucG5n/347x500/%2FqbQKf.png" })),
|
|
108
|
+
react_1.default.createElement("div", { className: "score" },
|
|
109
|
+
"Score: ",
|
|
110
|
+
score)));
|
|
111
|
+
};
|
|
112
|
+
exports.default = DinoGame;
|
package/build/lib.d.ts
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"lib.d.ts","sourceRoot":"","sources":["../src/lib.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC"}
|
package/build/lib.js
ADDED
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
+
};
|
|
5
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
+
exports.default = exports.DinoGame = void 0;
|
|
7
|
+
var DinoGame_1 = require("./components/DinoGame");
|
|
8
|
+
Object.defineProperty(exports, "DinoGame", { enumerable: true, get: function () { return __importDefault(DinoGame_1).default; } });
|
|
9
|
+
var DinoGame_2 = require("./components/DinoGame");
|
|
10
|
+
Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(DinoGame_2).default; } });
|
package/package.json
CHANGED
|
@@ -1,15 +1,28 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "ma-dino-game",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.6",
|
|
4
4
|
"description": "Dino Game",
|
|
5
|
-
"main": "build/
|
|
6
|
-
"module": "build/
|
|
7
|
-
"types": "build/
|
|
5
|
+
"main": "build/lib.js",
|
|
6
|
+
"module": "build/lib.js",
|
|
7
|
+
"types": "build/lib.d.ts",
|
|
8
8
|
"files": [
|
|
9
9
|
"build"
|
|
10
10
|
],
|
|
11
11
|
"license": "MIT",
|
|
12
|
-
"
|
|
12
|
+
"peerDependencies": {
|
|
13
|
+
"react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
|
|
14
|
+
"react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
|
|
15
|
+
},
|
|
16
|
+
"dependencies": {},
|
|
17
|
+
"scripts": {
|
|
18
|
+
"start": "react-scripts start",
|
|
19
|
+
"build": "tsc -p tsconfig.build.json && npm run copy-css",
|
|
20
|
+
"copy-css": "cp src/components/DinoGame/dino.css build/components/DinoGame/",
|
|
21
|
+
"test": "react-scripts test",
|
|
22
|
+
"eject": "react-scripts eject",
|
|
23
|
+
"prepublishOnly": "npm run build"
|
|
24
|
+
},
|
|
25
|
+
"devDependencies": {
|
|
13
26
|
"@testing-library/dom": "^10.4.1",
|
|
14
27
|
"@testing-library/jest-dom": "^6.9.1",
|
|
15
28
|
"@testing-library/react": "^16.3.1",
|
|
@@ -21,18 +34,10 @@
|
|
|
21
34
|
"react": "^19.2.3",
|
|
22
35
|
"react-dom": "^19.2.3",
|
|
23
36
|
"react-scripts": "5.0.1",
|
|
37
|
+
"react-scripts-ts": "latest",
|
|
24
38
|
"typescript": "^4.9.5",
|
|
25
39
|
"web-vitals": "^2.1.4"
|
|
26
40
|
},
|
|
27
|
-
"scripts": {
|
|
28
|
-
"start": "react-scripts start",
|
|
29
|
-
"build": "react-scripts build",
|
|
30
|
-
"test": "react-scripts test",
|
|
31
|
-
"eject": "react-scripts eject"
|
|
32
|
-
},
|
|
33
|
-
"devDependencies": {
|
|
34
|
-
"react-scripts-ts": "latest"
|
|
35
|
-
},
|
|
36
41
|
"eslintConfig": {
|
|
37
42
|
"extends": [
|
|
38
43
|
"react-app",
|