├── assets ├── cactus.png ├── ground.png ├── dino-lose.png ├── dino-run-0.png ├── dino-run-1.png ├── image │ ├── back1.png │ ├── back2.png │ ├── NW0mK39.gif │ ├── cactus.jpg │ ├── cactus2.jpg │ ├── download.jpg │ ├── ground.jpg │ ├── th (12).jpg │ └── th (9).jpg └── dino-stationary.png ├── .idea ├── misc.xml ├── .gitignore ├── vcs.xml └── modules.xml ├── dino Game.iml ├── README.md ├── updateCustomProperty.js ├── ground.js ├── index.html ├── style.css ├── cactus.js ├── dino.js └── script.js /assets/cactus.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PiyumalNipuna60/chrome-dino-game/HEAD/assets/cactus.png -------------------------------------------------------------------------------- /assets/ground.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PiyumalNipuna60/chrome-dino-game/HEAD/assets/ground.png -------------------------------------------------------------------------------- /assets/dino-lose.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PiyumalNipuna60/chrome-dino-game/HEAD/assets/dino-lose.png -------------------------------------------------------------------------------- /assets/dino-run-0.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PiyumalNipuna60/chrome-dino-game/HEAD/assets/dino-run-0.png -------------------------------------------------------------------------------- /assets/dino-run-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PiyumalNipuna60/chrome-dino-game/HEAD/assets/dino-run-1.png -------------------------------------------------------------------------------- /assets/image/back1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PiyumalNipuna60/chrome-dino-game/HEAD/assets/image/back1.png -------------------------------------------------------------------------------- /assets/image/back2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PiyumalNipuna60/chrome-dino-game/HEAD/assets/image/back2.png -------------------------------------------------------------------------------- /assets/image/NW0mK39.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PiyumalNipuna60/chrome-dino-game/HEAD/assets/image/NW0mK39.gif -------------------------------------------------------------------------------- /assets/image/cactus.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PiyumalNipuna60/chrome-dino-game/HEAD/assets/image/cactus.jpg -------------------------------------------------------------------------------- /assets/image/cactus2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PiyumalNipuna60/chrome-dino-game/HEAD/assets/image/cactus2.jpg -------------------------------------------------------------------------------- /assets/image/download.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PiyumalNipuna60/chrome-dino-game/HEAD/assets/image/download.jpg -------------------------------------------------------------------------------- /assets/image/ground.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PiyumalNipuna60/chrome-dino-game/HEAD/assets/image/ground.jpg -------------------------------------------------------------------------------- /assets/image/th (12).jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PiyumalNipuna60/chrome-dino-game/HEAD/assets/image/th (12).jpg -------------------------------------------------------------------------------- /assets/image/th (9).jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PiyumalNipuna60/chrome-dino-game/HEAD/assets/image/th (9).jpg -------------------------------------------------------------------------------- /assets/dino-stationary.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PiyumalNipuna60/chrome-dino-game/HEAD/assets/dino-stationary.png -------------------------------------------------------------------------------- /.idea/misc.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /.idea/.gitignore: -------------------------------------------------------------------------------- 1 | # Default ignored files 2 | /shelf/ 3 | /workspace.xml 4 | # Datasource local storage ignored files 5 | /dataSources/ 6 | /dataSources.local.xml 7 | # Editor-based HTTP Client requests 8 | /httpRequests/ 9 | -------------------------------------------------------------------------------- /.idea/vcs.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /.idea/modules.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /dino Game.iml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # chrome-dino-game 2 | game(HTML,CSS,Js) 3 | 4 | drawing 5 | drawing 6 | 7 | -------------------------------------------------------------------------------- /updateCustomProperty.js: -------------------------------------------------------------------------------- 1 | export function getCustomProperty(elem, prop) { 2 | return parseFloat(getComputedStyle(elem).getPropertyValue(prop)) || 0 3 | } 4 | 5 | export function setCustomProperty(elem, prop, value) { 6 | elem.style.setProperty(prop, value) 7 | } 8 | 9 | export function incrementCustomProperty(elem, prop, inc) { 10 | setCustomProperty(elem, prop, getCustomProperty(elem, prop) + inc) 11 | } 12 | -------------------------------------------------------------------------------- /ground.js: -------------------------------------------------------------------------------- 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 | } 24 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 | 12 |
13 | score 14 |
0
15 |
Press Any Key To Start
16 | 17 | 18 | 19 |
20 | 21 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | *, *::before, *::after{ 2 | box-sizing: border-box; 3 | user-select: none; 4 | } 5 | 6 | body{ 7 | margin: 0; 8 | display: flex; 9 | justify-content: center; 10 | align-items: center; 11 | min-height: 100vh; 12 | background-image: url("assets/image/NW0mK39.gif"); 13 | background-repeat: no-repeat; 14 | background-size: 100% 100%; 15 | } 16 | 17 | .world{ 18 | overflow: hidden; 19 | position: relative; 20 | width: 100%; 21 | height: 300px; 22 | } 23 | 24 | .score{ 25 | position: absolute; 26 | font-size: 5vmin; 27 | right: 1vmin; 28 | top: 1vmin; 29 | color: orange; 30 | } 31 | 32 | body>div>a{ 33 | position: absolute; 34 | font-size: 4vmin; 35 | right: 10vmin; 36 | top: 1vmin; 37 | color: red; 38 | } 39 | 40 | .start-screen{ 41 | position: absolute; 42 | font-size: 5vmin; 43 | top: 50%; 44 | left: 50%; 45 | transform: translate(-50% -50%); 46 | } 47 | 48 | .hide{ 49 | display: none; 50 | } 51 | 52 | .ground{ 53 | --left:0; 54 | position: absolute; 55 | width: 1000%; 56 | height: 10%; 57 | bottom: 0; 58 | left: calc(var(--left)*1%); 59 | } 60 | 61 | .dino{ 62 | --bottom:0; 63 | position: absolute; 64 | left: 1%; 65 | height: 30%; 66 | bottom: calc(var(--bottom)*1%); 67 | } 68 | 69 | .cactus{ 70 | position: absolute; 71 | left: calc(var(--left)*1%); 72 | height: 30%; 73 | bottom: 0; 74 | } -------------------------------------------------------------------------------- /cactus.js: -------------------------------------------------------------------------------- 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 = "assets/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 | } -------------------------------------------------------------------------------- /dino.js: -------------------------------------------------------------------------------- 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 = "assets/dino-lose.png" 38 | } 39 | 40 | function handleRun(delta, speedScale) { 41 | if (isJumping) { 42 | dinoElem.src = `assets/dino-stationary.png` 43 | return 44 | } 45 | 46 | if (currentFrameTime >= FRAME_TIME) { 47 | dinoFrame = (dinoFrame + 1) % DINO_FRAME_COUNT 48 | dinoElem.src = `assets/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 | } 73 | -------------------------------------------------------------------------------- /script.js: -------------------------------------------------------------------------------- 1 | import { updateGround, setupGround } from "./ground.js" 2 | import { updateDino, setupDino, getDinoRect, setDinoLose } from "./dino.js" 3 | import { updateCactus, setupCactus, getCactusRects } from "./cactus.js" 4 | 5 | const WORLD_WIDTH = 100 6 | const WORLD_HEIGHT = 30 7 | const SPEED_SCALE_INCREASE = 0.00001 8 | 9 | const worldElem = document.querySelector("[data-world]") 10 | const scoreElem = document.querySelector("[data-score]") 11 | const startScreenElem = document.querySelector("[data-start-screen]") 12 | 13 | setPixelToWorldScale() 14 | window.addEventListener("resize", setPixelToWorldScale) 15 | document.addEventListener("keydown", handleStart, { once: true }) 16 | 17 | let lastTime 18 | let speedScale 19 | let score 20 | function update(time) { 21 | if (lastTime == null) { 22 | lastTime = time 23 | window.requestAnimationFrame(update) 24 | return 25 | } 26 | const delta = time - lastTime 27 | 28 | updateGround(delta, speedScale) 29 | updateDino(delta, speedScale) 30 | updateCactus(delta, speedScale) 31 | updateSpeedScale(delta) 32 | updateScore(delta) 33 | if (checkLose()) return handleLose() 34 | 35 | lastTime = time 36 | window.requestAnimationFrame(update) 37 | } 38 | 39 | function checkLose() { 40 | const dinoRect = getDinoRect() 41 | return getCactusRects().some(rect => isCollision(rect, dinoRect)) 42 | } 43 | 44 | function isCollision(rect1, rect2) { 45 | return ( 46 | rect1.left < rect2.right && 47 | rect1.top < rect2.bottom && 48 | rect1.right > rect2.left && 49 | rect1.bottom > rect2.top 50 | ) 51 | } 52 | 53 | function updateSpeedScale(delta) { 54 | speedScale += delta * SPEED_SCALE_INCREASE 55 | } 56 | 57 | function updateScore(delta) { 58 | score += delta * 0.01 59 | scoreElem.textContent = Math.floor(score) 60 | } 61 | 62 | function handleStart() { 63 | lastTime = null 64 | speedScale = 1 65 | score = 0 66 | setupGround() 67 | setupDino() 68 | setupCactus() 69 | startScreenElem.classList.add("hide") 70 | window.requestAnimationFrame(update) 71 | } 72 | 73 | function handleLose() { 74 | setDinoLose() 75 | setTimeout(() => { 76 | document.addEventListener("keydown", handleStart, { once: true }) 77 | startScreenElem.classList.remove("hide") 78 | }, 100) 79 | } 80 | 81 | function setPixelToWorldScale() { 82 | let worldToPixelScale 83 | if (window.innerWidth / window.innerHeight < WORLD_WIDTH / WORLD_HEIGHT) { 84 | worldToPixelScale = window.innerWidth / WORLD_WIDTH 85 | } else { 86 | worldToPixelScale = window.innerHeight / WORLD_HEIGHT 87 | } 88 | 89 | worldElem.style.width = `${WORLD_WIDTH * worldToPixelScale}px` 90 | worldElem.style.height = `${WORLD_HEIGHT * worldToPixelScale}px` 91 | } 92 | --------------------------------------------------------------------------------