Skip to content

Commit

Permalink
Merge pull request #4862 from chakrabortydeep/main
Browse files Browse the repository at this point in the history
New Game: Tinker_jump_master
  • Loading branch information
kunjgit authored Jul 18, 2024
2 parents 599d336 + d14dd8d commit 6619cc4
Show file tree
Hide file tree
Showing 15 changed files with 364 additions and 0 deletions.
38 changes: 38 additions & 0 deletions Games/Tinker_jump_master/README.md
Original file line number Diff line number Diff line change
@@ -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 -->
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added Games/Tinker_jump_master/assets/doodlejumpbg.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added Games/Tinker_jump_master/assets/doodler-left.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added Games/Tinker_jump_master/assets/doodler-right.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added Games/Tinker_jump_master/assets/platform.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added Games/Tinker_jump_master/assets/start_bg.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
13 changes: 13 additions & 0 deletions Games/Tinker_jump_master/game.html
Original file line number Diff line number Diff line change
@@ -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>
22 changes: 22 additions & 0 deletions Games/Tinker_jump_master/index.html
Original file line number Diff line number Diff line change
@@ -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>
65 changes: 65 additions & 0 deletions Games/Tinker_jump_master/start.css
Original file line number Diff line number Diff line change
@@ -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;
}
}
8 changes: 8 additions & 0 deletions Games/Tinker_jump_master/tinkerjump.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
body {
text-align: center;
}

#board {
/* background-color: green; */
background-image: url("assets/doodlejumpbg.png");
}
217 changes: 217 additions & 0 deletions Games/Tinker_jump_master/tjump.js
Original file line number Diff line number Diff line change
@@ -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;
}
}
1 change: 1 addition & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -377,6 +377,7 @@ This repository also provides one such platforms where contributers come over an
| [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)|
| [Maze_Game](https://github.com/kunjgit/GameZone/tree/main/Games/Maze_Game) | [Earth_Guardian](https://github.com/kunjgit/GameZone/tree/main/Games/Earth_Guardian) | [Earth_Guardian](https://github.com/kunjgit/GameZone/tree/main/Games/Earth_Guardian)
| [Ball_Shooting_Game](https://github.com/kunjgit/GameZone/tree/main/Games/Ball_Shooting_Game) | [Dinosaur_Memory_Game](https://github.com/kunjgit/GameZone/tree/main/Games/Dinosaur_Memory_Game) |[Hedgehog_Havoc] (https://github.com/kunjgit/GameZone/tree/main/Games/Hedgehog_Havoc)
| [Tinker_jump_master](https://github.com/kunjgit/GameZone/tree/main/Games/Tinker_jump_master) |
<br>
<br>
</center>
Expand Down
Binary file added assets/images/Tinker_jump_master.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit 6619cc4

Please sign in to comment.