Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit c76986d

Browse files
added 3 folders
1 parent 4cf1b13 commit c76986d

File tree

23 files changed

+836
-0
lines changed

23 files changed

+836
-0
lines changed

‎DOM - Chrome Dino Game/cactus.js

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
import {
2+
setCustomProperty,
3+
incrementCustomProperty,
4+
getCustomProperty,
5+
} from "./updateCustomProperty.js"
6+
7+
const SPEED = 0.05
8+
const CACTUS_INTERVAL_MIN = 500
9+
const CACTUS_INTERVAL_MAX = 2000
10+
const worldElem = document.querySelector("[data-world]")
11+
12+
let nextCactusTime
13+
export function setupCactus() {
14+
nextCactusTime = CACTUS_INTERVAL_MIN
15+
document.querySelectorAll("[data-cactus]").forEach(cactus => {
16+
cactus.remove()
17+
})
18+
}
19+
20+
export function updateCactus(delta, speedScale) {
21+
document.querySelectorAll("[data-cactus]").forEach(cactus => {
22+
incrementCustomProperty(cactus, "--left", delta * speedScale * SPEED * -1)
23+
if (getCustomProperty(cactus, "--left") <= -100) {
24+
cactus.remove()
25+
}
26+
})
27+
28+
if (nextCactusTime <= 0) {
29+
createCactus()
30+
nextCactusTime =
31+
randomNumberBetween(CACTUS_INTERVAL_MIN, CACTUS_INTERVAL_MAX) / speedScale
32+
}
33+
nextCactusTime -= delta
34+
}
35+
36+
export function getCactusRects() {
37+
return [...document.querySelectorAll("[data-cactus]")].map(cactus => {
38+
return cactus.getBoundingClientRect()
39+
})
40+
}
41+
42+
function createCactus() {
43+
const cactus = document.createElement("img")
44+
cactus.dataset.cactus = true
45+
cactus.src = "imgs/cactus.png"
46+
cactus.classList.add("cactus")
47+
setCustomProperty(cactus, "--left", 100)
48+
worldElem.append(cactus)
49+
}
50+
51+
function randomNumberBetween(min, max) {
52+
return Math.floor(Math.random() * (max - min + 1) + min)
53+
}

‎DOM - Chrome Dino Game/dino.js

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
import {
2+
incrementCustomProperty,
3+
setCustomProperty,
4+
getCustomProperty,
5+
} from "./updateCustomProperty.js"
6+
7+
const dinoElem = document.querySelector("[data-dino]")
8+
const JUMP_SPEED = 0.45
9+
const GRAVITY = 0.0015
10+
const DINO_FRAME_COUNT = 2
11+
const FRAME_TIME = 100
12+
13+
let isJumping
14+
let dinoFrame
15+
let currentFrameTime
16+
let yVelocity
17+
export function setupDino() {
18+
isJumping = false
19+
dinoFrame = 0
20+
currentFrameTime = 0
21+
yVelocity = 0
22+
setCustomProperty(dinoElem, "--bottom", 0)
23+
document.removeEventListener("keydown", onJump)
24+
document.addEventListener("keydown", onJump)
25+
}
26+
27+
export function updateDino(delta, speedScale) {
28+
handleRun(delta, speedScale)
29+
handleJump(delta)
30+
}
31+
32+
export function getDinoRect() {
33+
return dinoElem.getBoundingClientRect()
34+
}
35+
36+
export function setDinoLose() {
37+
dinoElem.src = "imgs/dino-lose.png"
38+
}
39+
40+
function handleRun(delta, speedScale) {
41+
if (isJumping) {
42+
dinoElem.src = `imgs/dino-stationary.png`
43+
return
44+
}
45+
46+
if (currentFrameTime >= FRAME_TIME) {
47+
dinoFrame = (dinoFrame + 1) % DINO_FRAME_COUNT
48+
dinoElem.src = `imgs/dino-run-${dinoFrame}.png`
49+
currentFrameTime -= FRAME_TIME
50+
}
51+
currentFrameTime += delta * speedScale
52+
}
53+
54+
function handleJump(delta) {
55+
if (!isJumping) return
56+
57+
incrementCustomProperty(dinoElem, "--bottom", yVelocity * delta)
58+
59+
if (getCustomProperty(dinoElem, "--bottom") <= 0) {
60+
setCustomProperty(dinoElem, "--bottom", 0)
61+
isJumping = false
62+
}
63+
64+
yVelocity -= GRAVITY * delta
65+
}
66+
67+
function onJump(e) {
68+
if (e.code !== "Space" || isJumping) return
69+
70+
yVelocity = JUMP_SPEED
71+
isJumping = true
72+
}

‎DOM - Chrome Dino Game/ground.js

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import {
2+
getCustomProperty,
3+
incrementCustomProperty,
4+
setCustomProperty,
5+
} from "./updateCustomProperty.js"
6+
7+
const SPEED = 0.05
8+
const groundElems = document.querySelectorAll("[data-ground]")
9+
10+
export function setupGround() {
11+
setCustomProperty(groundElems[0], "--left", 0)
12+
setCustomProperty(groundElems[1], "--left", 300)
13+
}
14+
15+
export function updateGround(delta, speedScale) {
16+
groundElems.forEach(ground => {
17+
incrementCustomProperty(ground, "--left", delta * speedScale * SPEED * -1)
18+
19+
if (getCustomProperty(ground, "--left") <= -300) {
20+
incrementCustomProperty(ground, "--left", 600)
21+
}
22+
})
23+
}

‎DOM - Chrome Dino Game/imgs/cactus.png

2.95 KB
Loading[フレーム]
5.07 KB
Loading[フレーム]
4.78 KB
Loading[フレーム]
4.83 KB
Loading[フレーム]
4.86 KB
Loading[フレーム]

‎DOM - Chrome Dino Game/imgs/ground.png

1.18 KB
Loading[フレーム]

‎DOM - Chrome Dino Game/index.html

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Document</title>
8+
<link rel="stylesheet" href="styles.css">
9+
<script src="script.js" type="module"></script>
10+
</head>
11+
<body>
12+
<div class="world" data-world>
13+
<div class="score" data-score>0</div>
14+
<div class="start-screen" data-start-screen>Press Any Key To Start</div>
15+
<img src="imgs/ground.png" class="ground" data-ground>
16+
<img src="imgs/ground.png" class="ground" data-ground>
17+
<img src="imgs/dino-stationary.png" class="dino" data-dino>
18+
</div>
19+
</body>
20+
</html>

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /