kunjgit · kunjgit · Jul 18, 2024 · Jul 15, 2024 · Jul 15, 2024 · Jul 15, 2024
diff --git a/Games/Tinker_jump_master/README.md b/Games/Tinker_jump_master/README.md
@@ -0,0 +1,38 @@
+# **Tinker_Jump_Master** 
+
+---
+
+<br>
+
+## **Description 📃** 
+- Tinker Jump is game where the Tinker(Doodler) have to jump multiple platforms in order to reach high.
+
+## **functionalities 🎮** 
+- Control by left and right key to jump into the platform.
+- Score points as you reach high.
+- Track your score as you play
+- Game ends if you fail to jump in the platform.
+- Responsive design for easy play on different devices.
+- Press Space to restart the game when game ends.
+<br>
+
+## **How to play? 🕹️**
+
+- Jump into the platform by clicking left and right.
+- Jump as high as you can to score more points.
+- Each successful jump on the platform will earn you points
+- Aim to achieve the highest score.
+- The game ends when you fail to jump into the platform.
+- Your final score will be displayed on the screen
+<br>
+
+## **Screenshots 📸**
+<br>
+
+![image](../../assets/.png)
+
+<br>
+
+
+## **Working video 📹**
+<!-- add your working video over here -->
diff --git a/Games/Tinker_jump_master/assets/Tinker_jump_master.png b/Games/Tinker_jump_master/assets/Tinker_jump_master.png
diff --git a/Games/Tinker_jump_master/assets/doodlejumpbg.png b/Games/Tinker_jump_master/assets/doodlejumpbg.png
diff --git a/Games/Tinker_jump_master/assets/doodler-left.png b/Games/Tinker_jump_master/assets/doodler-left.png
diff --git a/Games/Tinker_jump_master/assets/doodler-right.png b/Games/Tinker_jump_master/assets/doodler-right.png
diff --git a/Games/Tinker_jump_master/assets/platform-broken.png b/Games/Tinker_jump_master/assets/platform-broken.png
diff --git a/Games/Tinker_jump_master/assets/platform.png b/Games/Tinker_jump_master/assets/platform.png
diff --git a/Games/Tinker_jump_master/assets/start_bg.png b/Games/Tinker_jump_master/assets/start_bg.png
diff --git a/Games/Tinker_jump_master/game.html b/Games/Tinker_jump_master/game.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewport", content="width=device-width, initial-scale=1.0">
+        <title>Tinker Jump</title>
+        <link rel="stylesheet" href="tinkerjump.css">
+        <script src="tjump.js"></script>
+    </head>
+    <body>
+        <canvas id="board"></canvas>
+    </body>
+</html>
diff --git a/Games/Tinker_jump_master/index.html b/Games/Tinker_jump_master/index.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Tinker Jump</title>
+    <link rel="stylesheet" href="start.css">
+</head>
+<body>
+    <div class="main">
+        <div class="form-box">
+            <h1 class="text">Tinker Jump</h1>
+            <br>
+            <br>
+            <br>
+            <div class="start-btn">
+                <a href="game.html">Start</a>
+              </div>
+        </div>
+    </div>
+</body>
+</html>
diff --git a/Games/Tinker_jump_master/start.css b/Games/Tinker_jump_master/start.css
@@ -0,0 +1,65 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    font-family: 'Times New Roman', Times, serif;
+}
+
+html, body {
+    height: 100%;
+}
+
+.main {
+    height: 100vh;
+    width: 100%;
+    background-image: linear-gradient(rgba(0,0,0,0.4),rgba(0,0,0,0.4)), url(assets/start_bg.png);
+    background-position: center;
+    background-size: cover;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.form-box {
+    width: 80%;
+    max-width: 600px;
+    padding: 20px;
+    background-color: rgba(196, 125, 31, 0.329);
+    text-align: center;
+    border-radius: 8px;
+}
+
+.text {
+    font-size: 3.5rem;
+    margin-bottom: 40px;
+    color: aliceblue;
+    font-family: 'Courier New', Courier, monospace;
+}
+
+.start-btn a {
+    text-decoration: none;
+    color: white;
+    padding: 10px 20px;
+    font-size: 1.25rem;
+    border: 2px solid rgba(0, 0, 0, 0.265);
+    border-radius: 8px;
+    background-color: rgb(204, 7, 14);
+    display: inline-block;
+    transition: background-color 0.2s linear, border 0.2s linear;
+}
+
+.start-btn a:hover {
+    background-color: rgba(134, 4, 4, 0.943);
+    border: 2px solid rgb(19, 18, 18);
+}
+
+@media (max-width: 600px) {
+    .text {
+        font-size: 2rem;
+    }
+
+    .start-btn a {
+        font-size: 1rem;
+        padding: 8px 16px;
+    }
+}
diff --git a/Games/Tinker_jump_master/tinkerjump.css b/Games/Tinker_jump_master/tinkerjump.css
@@ -0,0 +1,8 @@
+body {
+    text-align: center;
+}
+
+#board {
+    /* background-color: green; */
+    background-image: url("assets/doodlejumpbg.png");
+}
diff --git a/Games/Tinker_jump_master/tjump.js b/Games/Tinker_jump_master/tjump.js
@@ -0,0 +1,217 @@
+//board
+let board;
+let boardWidth = 360;
+let boardHeight = 576;
+let context;
+
+//doodler
+let doodlerWidth = 46;
+let doodlerHeight = 46;
+let doodlerX = boardWidth/2 - doodlerWidth/2;
+let doodlerY = boardHeight*7/8 - doodlerHeight;
+let doodlerRightImg;
+let doodlerLeftImg;
+
+let doodler = {
+    img : null,
+    x : doodlerX,
+    y : doodlerY,
+    width : doodlerWidth,
+    height : doodlerHeight
+}
+
+//physics
+let velocityX = 0; 
+let velocityY = 0; //doodler jump speed
+let initialVelocityY = -8; //starting velocity Y
+let gravity = 0.4;
+
+//platforms
+let platformArray = [];
+let platformWidth = 60;
+let platformHeight = 18;
+let platformImg;
+
+let score = 0;
+let maxScore = 0;
+let gameOver = false;
+
+window.onload = function() {
+    board = document.getElementById("board");
+    board.height = boardHeight;
+    board.width = boardWidth;
+    context = board.getContext("2d"); //used for drawing on the board
+
+    //draw doodler
+    // context.fillStyle = "green";
+    // context.fillRect(doodler.x, doodler.y, doodler.width, doodler.height);
+
+    //load images
+    doodlerRightImg = new Image();
+    doodlerRightImg.src = "assets/doodler-right.png";
+    doodler.img = doodlerRightImg;
+    doodlerRightImg.onload = function() {
+        context.drawImage(doodler.img, doodler.x, doodler.y, doodler.width, doodler.height);
+    }
+
+    doodlerLeftImg = new Image();
+    doodlerLeftImg.src = "assets/doodler-left.png";
+
+    platformImg = new Image();
+    platformImg.src = "assets/platform.png";
+
+    velocityY = initialVelocityY;
+    placePlatforms();
+    requestAnimationFrame(update);
+    document.addEventListener("keydown", moveDoodler);
+}
+
+function update() {
+    requestAnimationFrame(update);
+    if (gameOver) {
+        return;
+    }
+    context.clearRect(0, 0, board.width, board.height);
+
+    //doodler
+    doodler.x += velocityX;
+    if (doodler.x > boardWidth) {
+        doodler.x = 0;
+    }
+    else if (doodler.x + doodler.width < 0) {
+        doodler.x = boardWidth;
+    }
+
+    velocityY += gravity;
+    doodler.y += velocityY;
+    if (doodler.y > board.height) {
+        gameOver = true;
+    }
+    context.drawImage(doodler.img, doodler.x, doodler.y, doodler.width, doodler.height);
+
+    //platforms
+    for (let i = 0; i < platformArray.length; i++) {
+        let platform = platformArray[i];
+        if (velocityY < 0 && doodler.y < boardHeight*3/4) {
+            platform.y -= initialVelocityY; //slide platform down
+        }
+        if (detectCollision(doodler, platform) && velocityY >= 0) {
+            velocityY = initialVelocityY; //jump
+        }
+        context.drawImage(platform.img, platform.x, platform.y, platform.width, platform.height);
+    }
+
+    // clear platforms and add new platform
+    while (platformArray.length > 0 && platformArray[0].y >= boardHeight) {
+        platformArray.shift(); //removes first element from the array
+        newPlatform(); //replace with new platform on top
+    }
+
+    //score
+    updateScore();
+    context.fillStyle = "black";
+    context.font = "16px sans-serif";
+    context.fillText(score, 5, 20);
+
+    if (gameOver) {
+        context.fillText("Game Over: Press 'Space' to Restart", boardWidth/7, boardHeight*7/8);
+    }
+}
+
+function moveDoodler(e) {
+    if (e.code == "ArrowRight" || e.code == "KeyD") { //move right
+        velocityX = 4;
+        doodler.img = doodlerRightImg;
+    }
+    else if (e.code == "ArrowLeft" || e.code == "KeyA") { //move left
+        velocityX = -4;
+        doodler.img = doodlerLeftImg;
+    }
+    else if (e.code == "Space" && gameOver) {
+        //reset
+        doodler = {
+            img : doodlerRightImg,
+            x : doodlerX,
+            y : doodlerY,
+            width : doodlerWidth,
+            height : doodlerHeight
+        }
+
+        velocityX = 0;
+        velocityY = initialVelocityY;
+        score = 0;
+        maxScore = 0;
+        gameOver = false;
+        placePlatforms();
+    }
+}
+
+function placePlatforms() {
+    platformArray = [];
+
+    //starting platforms
+    let platform = {
+        img : platformImg,
+        x : boardWidth/2,
+        y : boardHeight - 50,
+        width : platformWidth,
+        height : platformHeight
+    }
+
+    platformArray.push(platform);
+
+    // platform = {
+    //     img : platformImg,
+    //     x : boardWidth/2,
+    //     y : boardHeight - 150,
+    //     width : platformWidth,
+    //     height : platformHeight
+    // }
+    // platformArray.push(platform);
+
+    for (let i = 0; i < 6; i++) {
+        let randomX = Math.floor(Math.random() * boardWidth*3/4); //(0-1) * boardWidth*3/4
+        let platform = {
+            img : platformImg,
+            x : randomX,
+            y : boardHeight - 75*i - 150,
+            width : platformWidth,
+            height : platformHeight
+        }
+
+        platformArray.push(platform);
+    }
+}
+
+function newPlatform() {
+    let randomX = Math.floor(Math.random() * boardWidth*3/4); //(0-1) * boardWidth*3/4
+    let platform = {
+        img : platformImg,
+        x : randomX,
+        y : -platformHeight,
+        width : platformWidth,
+        height : platformHeight
+    }
+
+    platformArray.push(platform);
+}
+
+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
+}
+
+function updateScore() {
+    let points = Math.floor(50*Math.random()); //(0-1) *50 --> (0-50)
+    if (velocityY < 0) { //negative going up
+        maxScore += points;
+        if (score < maxScore) {
+            score = maxScore;
+        }
+    }
+    else if (velocityY >= 0) {
+        maxScore -= points;
+    }
+}