Skip to content

Commit

Permalink
Merge pull request #3302 from Roshr2211/main
Browse files Browse the repository at this point in the history 
Enabled the game 'run and jump' to pause and resume
  • Loading branch information
@kunjgit
kunjgit authored May 15, 2024
2 parents 436e63d + 7681bae commit 416b297
Show file tree
Hide file tree
Showing 3 changed files with 107 additions and 65 deletions.
46 changes: 24 additions & 22 deletions Games/Run and Jump/index.html
View file
Original file line number Diff line number Diff line change
@@ -1,24 +1,26 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="veiwport" content="width=device-width,initial-scale=1.0">
<title>JUMP AND RUN GAME</title>]
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" />
<link rel="stylesheet" href="style.css">


</head>
<body>
<div style="text-align: right; margin-right:20px;
font-size: 20px;
padding: 2px; "><a href="https://kunjgit.github.io/GameZone/"><i style="color:black;" class="fas fa-home home-icon"></i></a></div>
<div id="ground"></div>
<div id="character"></div>
<div class="obstacles"></div>
<h2>
Score: <span id="score">0</span>
</h2>
<script src="script.js"></script>
</body>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JUMP AND RUN GAME</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" />
<link rel="stylesheet" href="style.css">
</head>
<body>
<div style="text-align: right; margin-right:20px; font-size: 20px; padding: 2px;">
<a href="https://kunjgit.github.io/GameZone/"><i style="color:black;" class="fas fa-home home-icon"></i></a>
</div>
<div id="ground"></div>
<div id="character"></div>
<div class="obstacles"></div>
<div class="scoreid">
<h2>Score: <span id="score">0</span></h2>
</div>
<div class="buttons">
<button onclick="endGame()" class="stopandresume">Stop and Resume</button>
</div>
<script src="script.js"></script>
</body>
</html>
113 changes: 71 additions & 42 deletions Games/Run and Jump/script.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,77 +2,106 @@ let character = document.getElementById('character');
let characterBottom = parseInt(window.getComputedStyle(character).getPropertyValue('bottom'));
let characterRight = parseInt(window.getComputedStyle(character).getPropertyValue('right'));
let characterWidth = parseInt(window.getComputedStyle(character).getPropertyValue('width'));
let ground=document.getElementById('ground');
let ground = document.getElementById('ground');
let groundBottom = parseInt(window.getComputedStyle(ground).getPropertyValue('bottom'));
let groundHeight = parseInt(window.getComputedStyle(ground).getPropertyValue('height'));
let isJumping =false;
let isJumping = false;
let upTime;
let downTime;
let displayScore=document.getElementById('score')
let score=0;
let displayScore = document.getElementById('score');
let score = 0;

let gamePaused = false;
let obstacleInterval;
let obstacleTimeout;

function stopGame() {
clearInterval(obstacleInterval);
clearTimeout(obstacleTimeout);
gamePaused = true;
}

function resumeGame() {
if (!gamePaused) return;
generateObstacle();
gamePaused = false;
}

function endGame() {
stopGame();
// Additional logic for ending the game, e.g., showing a game over message
alert('score is: ' + score + ' do you want to continue?');
// Optionally, you can reload the page to restart the game
//location.reload();
}

function jump() {
if(isJumping)return;
upTime=setInterval(() => {
if(characterBottom >= groundHeight+250){
if (isJumping) return;
upTime = setInterval(() => {
if (characterBottom >= groundHeight + 250) {
clearInterval(upTime);
downTime=setInterval(() => {
if(characterBottom <= groundHeight +10)
{ clearInterval(downTime);
isJumping=false;}
characterBottom -= 10;
character.style.bottom=characterBottom+'px';
},20);
downTime = setInterval(() => {
if (characterBottom <= groundHeight + 10) {
clearInterval(downTime);
isJumping = false;
}
characterBottom -= 10;
character.style.bottom = characterBottom + 'px';
}, 20);
}
characterBottom += 10;
character.style.bottom=characterBottom+'px';
isJumping=true;
character.style.bottom = characterBottom + 'px';
isJumping = true;
}, 20);

// Update character position
characterBottom = parseInt(window.getComputedStyle(character).getPropertyValue('bottom'));
characterRight = parseInt(window.getComputedStyle(character).getPropertyValue('right'));
}

function showScore(){
function showScore() {
score++;
displayScore.innerText=score;
displayScore.innerText = score;
}

setInterval(showScore,100);
setInterval(showScore, 100);

function generateObstacle(){
function generateObstacle() {
let obstacles = document.querySelector('.obstacles');
let obstacle = document.createElement('div');
obstacle.setAttribute('class','obstacle');
obstacle.setAttribute('class', 'obstacle');
obstacles.appendChild(obstacle);

let randomTimeout =Math.floor(Math.random()*1000)+1000;
let obstacleRight=-30;
let obstacleBottom=100;
let obstacleWidth=30;
let obstacleHieght=Math.floor(Math.random() * 50)+50;
obstacle.style.backgroundColor=`rgb(${Math.floor(Math.random()*255)},${Math.floor(Math.random()*255)},${Math.floor(Math.random()*255)})`;
let randomTimeout = Math.floor(Math.random() * 1000) + 1000;
let obstacleRight = -30;
let obstacleBottom = 100;
let obstacleWidth = 30;
let obstacleHieght = Math.floor(Math.random() * 50) + 50;
obstacle.style.backgroundColor = `rgb(${Math.floor(Math.random() * 255)},${Math.floor(Math.random() * 255)},${Math.floor(Math.random() * 255)})`;

function moveObstacle(){
obstacleRight +=5;
obstacle.style.right =obstacleRight+'px';
obstacle.style.bottom =obstacleBottom+'px';
obstacle.style.width =obstacleWidth+'px';
obstacle.style.height =obstacleHieght+'px';
if(characterRight >= obstacleRight - characterWidth && characterRight <= obstacleRight+obstacleWidth && characterBottom <= obstacleBottom + obstacleHieght){
alert('Congrats! Your Score is : '+score)
function moveObstacle() {
obstacleRight += 5;
obstacle.style.right = obstacleRight + 'px';
obstacle.style.bottom = obstacleBottom + 'px';
obstacle.style.width = obstacleWidth + 'px';
obstacle.style.height = obstacleHieght + 'px';
if (characterRight >= obstacleRight - characterWidth && characterRight <= obstacleRight + obstacleWidth && characterBottom <= obstacleBottom + obstacleHieght) {
alert('Congrats! Your Score is : ' + score)
clearInterval(obstacleInterval);
clearTimeout(obstacleTimeout);
location.reload();
}
}
let obstacleInterval =setInterval(moveObstacle,20);
let obstacleTimeout = setTimeout(generateObstacle,randomTimeout);
}
generateObstacle();
let obstacleInterval = setInterval(moveObstacle, 20);
let obstacleTimeout = setTimeout(generateObstacle, randomTimeout);
}
generateObstacle();


function control(e){
if(e.key == 'ArrowUp' || e.key == ' '){
function control(e) {
if (e.key == 'ArrowUp' || e.key == ' ') {
jump();
}
}

document.addEventListener('keydown',control);
document.addEventListener('keydown', control);
13 changes: 12 additions & 1 deletion Games/Run and Jump/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ body{
position: relative;
overflow: hidden;
}

#ground{
width: 100%;
height: 100px;
Expand All @@ -24,6 +25,14 @@ body{
bottom: 100px;
right: calc(100%-100px);
}
.stopandresume{
width: 100px;
font-weight: bold;
font-size: large;
font: sans-serif;
margin-top:20px ;
margin-left: 20px;
}
.obstacle{
width: 30px;
height: 100px;
Expand All @@ -32,8 +41,10 @@ body{
bottom: 100px;
right: 0;
}

h2{

font-family: sans-serif;
margin-top:10px ;
margin-left: 10px;
}
}

0 comments on commit 416b297

Please sign in to comment.