Chrome Dino

Games/Chrome_Dino/README.md

@@ -0,0 +1,31 @@
+# **Chrome_Dino** 
+
+---
+
+<br>
+
+## **Description 📃**
+<!-- add your game description here  -->
+- This is the very famous google chrome dinosaur game!
+
+## **functionalities 🎮**
+<!-- add functionalities over here -->
+- Easy
+- Funny
+- Interasting
+<br>
+
+## **How to play? 🕹️**
+<!-- add the steps how to play games -->
+- Your aim is to protect your dino from the upcoming cactus and thundering clouds, you can easily control your dino with the help of arrow or space keys.
+- The score keeps adding up on the basis of how far you have reached in the game.
+- If you collide with any obstacle just refresh the site and game will be start again.
+
+<br>
+
+## **Screenshots 📸**
+![image](https://github.com/MitulSonagara/GameZone/assets/95460188/de368526-49e6-426b-9dcb-9a6eb156858f)
+
+<br>
+<!-- add your screenshots like this -->
+<!-- ![image](url) -->

Games/Chrome_Dino/dino.css

@@ -0,0 +1,9 @@
+body {
+    font-family:'Courier New', Courier, monospace;
+    text-align: center;
+}
+
+#board {
+    background-color: lightgray;
+    border-bottom: 1px solid black;
+}

Games/Chrome_Dino/dino.js

@@ -0,0 +1,167 @@
+
+//board
+let board;
+let boardWidth = 750;
+let boardHeight = 250;
+let context;
+
+//dino
+let dinoWidth = 88;
+let dinoHeight = 94;
+let dinoX = 50;
+let dinoY = boardHeight - dinoHeight;
+let dinoImg;
+
+let dino = {
+    x : dinoX,
+    y : dinoY,
+    width : dinoWidth,
+    height : dinoHeight
+}
+
+//cactus
+let cactusArray = [];
+
+let cactus1Width = 34;
+let cactus2Width = 69;
+let cactus3Width = 102;
+
+let cactusHeight = 70;
+let cactusX = 700;
+let cactusY = boardHeight - cactusHeight;
+
+let cactus1Img;
+let cactus2Img;
+let cactus3Img;
+
+//physics
+let velocityX = -8; //cactus moving left speed
+let velocityY = 0;
+let gravity = .4;
+
+let gameOver = false;
+let score = 0;
+
+window.onload = function() {
+    board = document.getElementById("board");
+    board.height = boardHeight;
+    board.width = boardWidth;
+
+    context = board.getContext("2d"); //used for drawing on the board
+
+    //draw initial dinosaur
+    // context.fillStyle="green";
+    // context.fillRect(dino.x, dino.y, dino.width, dino.height);
+
+    dinoImg = new Image();
+    dinoImg.src = "./img/dino.png";
+    dinoImg.onload = function() {
+        context.drawImage(dinoImg, dino.x, dino.y, dino.width, dino.height);
+    }
+
+    cactus1Img = new Image();
+    cactus1Img.src = "./img/cactus1.png";
+
+    cactus2Img = new Image();
+    cactus2Img.src = "./img/cactus2.png";
+
+    cactus3Img = new Image();
+    cactus3Img.src = "./img/cactus3.png";
+
+    requestAnimationFrame(update);
+    setInterval(placeCactus, 1000); //1000 milliseconds = 1 second
+    document.addEventListener("keydown", moveDino);
+}
+
+function update() {
+    requestAnimationFrame(update);
+    if (gameOver) {
+        return;
+    }
+    context.clearRect(0, 0, board.width, board.height);
+
+    //dino
+    velocityY += gravity;
+    dino.y = Math.min(dino.y + velocityY, dinoY); //apply gravity to current dino.y, making sure it doesn't exceed the ground
+    context.drawImage(dinoImg, dino.x, dino.y, dino.width, dino.height);
+
+    //cactus
+    for (let i = 0; i < cactusArray.length; i++) {
+        let cactus = cactusArray[i];
+        cactus.x += velocityX;
+        context.drawImage(cactus.img, cactus.x, cactus.y, cactus.width, cactus.height);
+
+        if (detectCollision(dino, cactus)) {
+            gameOver = true;
+            dinoImg.src = "./img/dino-dead.png";
+            dinoImg.onload = function() {
+                context.drawImage(dinoImg, dino.x, dino.y, dino.width, dino.height);
+            }
+        }
+    }
+
+    //score
+    context.fillStyle="black";
+    context.font="20px courier";
+    score++;
+    context.fillText(score, 5, 20);
+}
+
+function moveDino(e) {
+    if (gameOver) {
+        return;
+    }
+
+    if ((e.code == "Space" || e.code == "ArrowUp") && dino.y == dinoY) {
+        //jump
+        velocityY = -10;
+    }
+    else if (e.code == "ArrowDown" && dino.y == dinoY) {
+        //duck
+    }
+
+}
+
+function placeCactus() {
+    if (gameOver) {
+        return;
+    }
+
+    //place cactus
+    let cactus = {
+        img : null,
+        x : cactusX,
+        y : cactusY,
+        width : null,
+        height: cactusHeight
+    }
+
+    let placeCactusChance = Math.random(); //0 - 0.9999...
+
+    if (placeCactusChance > .90) { //10% you get cactus3
+        cactus.img = cactus3Img;
+        cactus.width = cactus3Width;
+        cactusArray.push(cactus);
+    }
+    else if (placeCactusChance > .70) { //30% you get cactus2
+        cactus.img = cactus2Img;
+        cactus.width = cactus2Width;
+        cactusArray.push(cactus);
+    }
+    else if (placeCactusChance > .50) { //50% you get cactus1
+        cactus.img = cactus1Img;
+        cactus.width = cactus1Width;
+        cactusArray.push(cactus);
+    }
+
+    if (cactusArray.length > 5) {
+        cactusArray.shift(); //remove the first element from the array so that the array doesn't constantly grow
+    }
+}
+
+function detectCollision(a, b) {
+    return a.x < b.x + b.width &&   //a's top left corner doesn't reach b's top right corner
+           a.x + a.width > b.x &&   //a's top right corner passes b's top left corner
+           a.y < b.y + b.height &&  //a's top left corner doesn't reach b's bottom left corner
+           a.y + a.height > b.y;    //a's bottom left corner passes b's top left corner
+}

Games/Chrome_Dino/img/a.css

@@ -0,0 +1 @@
+

Games/Chrome_Dino/index.html

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewport", content="width=device-width, initial-scale=1.0">
+        <title>Chrome Dinosaur Game</title>
+        <link rel="stylesheet" href="dino.css">
+        <script src="dino.js"></script>
+    </head>
+    <body>
+        <h1>Chrome Dinosaur Game</h1>
+        <canvas id="board"></canvas>
+    </body>
+</html>

README.md

@@ -185,7 +185,7 @@ This repository also provides one such platforms where contributers come over an
 | [Find Extra Cube](https://github.com/kunjgit/GameZone/tree/main/Games/Find_Extra_Cube)                           | [PathPlex](https://github.com/kunjgit/GameZone/tree/main/Games/Pathplex)                                | [CSS Select](https://github.com/kunjgit/GameZone/tree/main/Games/CSS_Select)                                 | [Squid](https://github.com/kunjgit/GameZone/tree/main/Games/Squid_Game)                                            | [CSS Crossword](https://github.com/kunjgit/GameZone/tree/main/Games/CSS_Crossword)                          |
 | [CSS Select](https://github.com/kunjgit/GameZone/tree/main/Games/CSS_Select)                                     | [Squid](https://github.com/kunjgit/GameZone/tree/main/Games/Squid_Game)                                 | [Flip Coin](https://github.com/kunjgit/GameZone/tree/main/Games/Flip_Coin)                                   | [Witty Word Quest](https://github.com/kunjgit/GameZone/tree/main/Games/witty_word_quest)                           | [Typing Game](https://github.com/Ishan-77/GameZone/tree/main/Games/Typing_Game)                             |
 | [numeral-whiz](https://github.com/Ishan-77/GameZone/tree/main/Games/numeral-whiz)                                | [candy_match](https://github.com/kunjgit/GameZone/tree/main/Games/Candy_Match_Saga)                     | [Crossy_Road](https://github.com/tanujbordikar/GameZone/tree/Crossy_Road)                                    | [HueHero](https://github.com/kunjgit/GameZone/tree/main/Games/HueHero)                                             | [Puzzel_Winner](https://github.com/kunjgit/GameZone/tree/main/Games/Puzzel_Winner)                          |
-| [Emoji_Intruder](https://github.com/kunjgit/GameZone/tree/main/Games/Emoji_Intruder)                             | [Guess The Weapon](https://github.com/kunjgit/GameZone/tree/main/Games/Guess_The_Weapon)                | [Guess Who](https://github.com/kunjgit/GameZone/tree/main/Games/Guess_Who)                                                               |                                                                                                                    |                                                                                                             |
+| [Emoji_Intruder](https://github.com/kunjgit/GameZone/tree/main/Games/Emoji_Intruder)                             | [Guess The Weapon](https://github.com/kunjgit/GameZone/tree/main/Games/Guess_The_Weapon)                | [Guess Who](https://github.com/kunjgit/GameZone/tree/main/Games/Guess_Who)                                                               |[Chrome_Dino](https://github.com/kunjgit/GameZone/tree/main/Games/Chrome_Dino)                                                                                                                    |                                                                                                             |
 
 
  </center>