⚠ This page is served via a proxy. Original site: https://github.com
This service does not collect credentials or authentication data.
Skip to content

lower jump duration #2

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
CrunchyMcMunchy33 wants to merge 2 commits into
base: main
Choose a base branch
from
Open

lower jump duration #2

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
8dfc71d
lower jump duration
CrunchyMcMunchy33 Jan 15, 2026
bccb701
Add Pause menu
CrunchyMcMunchy33 Jan 22, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
79 changes: 79 additions & 0 deletions Crossy Road code here/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -142,4 +142,83 @@ canvas{
25% { opacity: 0; }
50% { opacity: 0; }
75% { opacity: 1; }
}

/* Pause Button */
#pauseButton {
position: absolute;
top: 20px;
left: 20px;
padding: 10px 20px;
background-color: #11bfe2;
color: white;
border: none;
border-radius: 5px;
font-family: Boxy;
font-size: 16px;
cursor: pointer;
z-index: 100;
transition: background-color 0.3s ease;
}

#pauseButton:hover {
background-color: #0fa5c8;
}

/* Pause Menu Overlay */
#pauseMenu {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: rgba(0, 0, 0, 0.8);
display: none;
justify-content: center;
align-items: center;
z-index: 200;
}

#pauseMenuContent {
background-color: #1a1a1a;
padding: 40px;
border-radius: 10px;
text-align: center;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
border: 4px solid #11bfe2;
}

#pauseMenuContent h1 {
font-family: Boxy;
font-size: 48px;
color: #11bfe2;
margin-bottom: 30px;
text-transform: uppercase;
}

#currentScore, #highScore {
font-family: Boxy;
font-size: 24px;
color: white;
margin: 15px 0;
}

#pauseMenuContent button {
display: block;
width: 100%;
padding: 15px 20px;
margin-top: 20px;
background-color: #11bfe2;
color: white;
border: none;
border-radius: 5px;
font-family: Boxy;
font-size: 20px;
cursor: pointer;
transition: background-color 0.3s ease;
text-transform: uppercase;
}

#pauseMenuContent button:hover {
background-color: #0fa5c8;
}
61 changes: 38 additions & 23 deletions Crossy Road code here/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
<!--(C) 2020 Moses Odhiambo-->

<!DOCTYPE html>
<!doctype html>
<html lang="en">
<head>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="shortcut icon" href="zid.png">
<link rel="shortcut icon" href="zid.png" />
<title>Crossy Road</title>
<link href="index.css" rel="stylesheet" type="text/css" />
<script src="lib/112.1/three.min.js"></script>
Expand All @@ -14,26 +14,41 @@
<script src="lib/112.1/BufferGeometryUtils.min.js"></script>
<script src="lib/stats/stats.min.js"></script>
<script src="lib/sweetalert/sweetalert.min.js"></script>
</head>
<body onload = "firstRun()">
</head>
<body onload="firstRun()">
<div id="score"></div>
<div id = "splash">
<div id = "title">
CROSSY ROAD<br/>BY ZIDAN ANANTA.<br/>ENJOY!
</div>
<div id = "loading">
<div class = "main letter">LOADING</div>
<div class = "period1 letter">.</div>
<div class = "period2 letter">.</div>
<div class = "period3 letter">.</div>
</div>
<div id = "instructions">Use the arrow keys to move<br> around</div>
<div id = "play">
PLAY
<button id = "pressPlay" disabled onclick = "init()"></button>
</div>
<button id="pauseButton" onclick="pauseGame()" style="display: none">
PAUSE
</button>

<div id="pauseMenu" style="display: none">
<div id="pauseMenuContent">
<h1>PAUSED</h1>
<div id="currentScore">Current Score: 0</div>
<div id="highScore">High Score: 0</div>
<button id="resumeButton" onclick="resumeGame()">RESUME</button>
<button id="homeButton" onclick="goHome()">HOME</button>
</div>
</div>

<div id="splash">
<div id="title">CROSSY ROAD<br />BY ZIDAN ANANTA.<br />ENJOY!</div>
<div id="loading">
<div class="main letter">LOADING</div>
<div class="period1 letter">.</div>
<div class="period2 letter">.</div>
<div class="period3 letter">.</div>
</div>
<div id="instructions">
Use the arrow keys to move<br />
around
</div>
<div id="play">
PLAY
<button id="pressPlay" disabled onclick="init()"></button>
</div>
</div>
<button id="restart" onclick = "init()">Play Again</button>
<button id="restart" onclick="init()">Play Again</button>
<script src="index.js"></script>
</body>
</html>
</body>
</html>
90 changes: 72 additions & 18 deletions Crossy Road code here/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,8 @@ let chicken;
let lanes;
let gameSounds, themeSong;
let gameOver;
let gamePaused = false;
let highScore = localStorage.getItem('chickenHopHighScore') || 0;

const firstRun = () =>{
document.getElementById("instructions").innerText = ((/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) ? "Swipe in the direction you wanna move." : "Use the arrow keys to move around.") + "\nCross as many roads as possible";
Expand Down Expand Up @@ -42,9 +44,45 @@ const firstRun = () =>{

}

const pauseGame = () => {
if (gameOver || gamePaused) return;

gamePaused = true;
document.getElementById("pauseButton").style.display = "none";

const currentScore = chicken ? chicken.maxLane : 0;
document.getElementById("currentScore").innerText = "Current Score: " + currentScore;
document.getElementById("highScore").innerText = "High Score: " + highScore;
document.getElementById("pauseMenu").style.display = "flex";
}

const resumeGame = () => {
gamePaused = false;
document.getElementById("pauseMenu").style.display = "none";
document.getElementById("pauseButton").style.display = "block";
}

const goHome = () => {
gamePaused = false;
document.getElementById("pauseMenu").style.display = "none";
document.getElementById("pauseButton").style.display = "none";
document.getElementById("restart").style.visibility = "visible";
location.reload();
}

const updateHighScore = () => {
if (chicken && chicken.maxLane > highScore) {
highScore = chicken.maxLane;
localStorage.setItem('chickenHopHighScore', highScore);
}
}

const init = () =>{
document.getElementById("score").innerText = "SCORE:0";
document.getElementById("restart").style.visibility = "hidden";
document.getElementById("pauseButton").style.display = "block";
document.getElementById("pauseMenu").style.display = "none";
gamePaused = false;
if(document.getElementById('splash'))
document.body.removeChild(document.getElementById('splash'));

Expand Down Expand Up @@ -183,8 +221,8 @@ class Chicken{
}

jump(direction){
if (!this.isMoving && !gameOver){
let duration = 0.4;
if (!this.isMoving && !gameOver && !gamePaused){
let duration = 0.2;
let dX = 0, dY = 1, dZ = 0;
let currentX = -columns/2 * cellWidth + cellWidth/2 + this.currentColumn * cellWidth;
let currentZ = -this.currentLane * cellWidth;
Expand Down Expand Up @@ -1106,10 +1144,12 @@ const update = () =>{
const leftPos = -columns/2 * cellWidth + cellWidth/2 - 2 * cellWidth;
const rightPos = -leftPos;
lane.vehicles.forEach(car => {
if(lane.direction) {
car.position.x = car.position.x > rightPos? leftPos : car.position.x + lane.speed * deltaTime;
}else{
car.position.x = car.position.x < leftPos? rightPos : car.position.x - lane.speed * deltaTime;
if(!gamePaused) {
if(lane.direction) {
car.position.x = car.position.x > rightPos? leftPos : car.position.x + lane.speed * deltaTime;
}else{
car.position.x = car.position.x < leftPos? rightPos : car.position.x - lane.speed * deltaTime;
}
}
const carLeftEdge = car.position.x + (lane.direction? (-cellWidth * 1.5) : (-cellWidth * 0.5));
const carRightEdge = car.position.x + (lane.direction? (cellWidth * 0.5) : (cellWidth * 1.5));
Expand All @@ -1121,6 +1161,8 @@ const update = () =>{
gameSounds.themeSong.setVolume(0);
gameSounds.hit.play();
gameOver = true;
document.getElementById("pauseButton").style.display = "none";
updateHighScore();
setTimeout(() => {
document.getElementById("restart").style.visibility = "visible";
// if (confirm("Game Over.\nRestart?"))
Expand All @@ -1134,10 +1176,12 @@ const update = () =>{
const leftPos = -columns/2 * cellWidth + cellWidth/2 - 3 * cellWidth;
const rightPos = -leftPos;
lane.vehicles.forEach(truck => {
if(lane.direction) {
truck.position.x = truck.position.x > rightPos? leftPos : truck.position.x + lane.speed * deltaTime;
}else{
truck.position.x = truck.position.x < leftPos? rightPos : truck.position.x - lane.speed * deltaTime;
if(!gamePaused) {
if(lane.direction) {
truck.position.x = truck.position.x > rightPos? leftPos : truck.position.x + lane.speed * deltaTime;
}else{
truck.position.x = truck.position.x < leftPos? rightPos : truck.position.x - lane.speed * deltaTime;
}
}
const truckLeftEdge = truck.position.x + (lane.direction? (-cellWidth * 2.5) : (-cellWidth * 0.5));
const truckRightEdge = truck.position.x + (lane.direction? (cellWidth * 0.5) : (cellWidth * 2.5));
Expand All @@ -1149,6 +1193,8 @@ const update = () =>{
gameSounds.themeSong.setVolume(0);
gameSounds.hit.play();
gameOver = true;
document.getElementById("pauseButton").style.display = "none";
updateHighScore();
setTimeout(() => {
document.getElementById("restart").style.visibility = "visible";
// if (confirm("Game Over.\nRestart?"))
Expand All @@ -1163,10 +1209,12 @@ const update = () =>{
const rightPos = -leftPos;
let logsBelowChicken = 0;
lane.logs.forEach(log => {
if(lane.direction) {
log.position.x = log.position.x > rightPos? leftPos : log.position.x + lane.speed * deltaTime;
}else{
log.position.x = log.position.x < leftPos? rightPos : log.position.x - lane.speed * deltaTime;
if(!gamePaused) {
if(lane.direction) {
log.position.x = log.position.x > rightPos? leftPos : log.position.x + lane.speed * deltaTime;
}else{
log.position.x = log.position.x < leftPos? rightPos : log.position.x - lane.speed * deltaTime;
}
}
const logLeftEdge = log.position.x + (lane.direction? (-cellWidth * 1.5) : (-cellWidth * 0.5));
const logRightEdge = log.position.x + (lane.direction? (cellWidth * 0.5) : (cellWidth * 1.5));
Expand All @@ -1189,6 +1237,8 @@ const update = () =>{
if (!gameOver){
chicken.fall();
gameOver = true;
document.getElementById("pauseButton").style.display = "none";
updateHighScore();
setTimeout(() => {
document.getElementById("restart").style.visibility = "visible";
// if (confirm("Game Over.\nRestart?"))
Expand All @@ -1198,10 +1248,12 @@ const update = () =>{
}
}
else if (lane.type == 'rail'){
if(lane.direction){
lane.train.position.x = ((lane.train.position.x > lane.finalPosition)? lane.initialPosition : (lane.train.position.x + lane.speed * deltaTime));
} else{
lane.train.position.x = ((lane.train.position.x < lane.finalPosition)? lane.initialPosition : (lane.train.position.x - lane.speed * deltaTime));
if(!gamePaused) {
if(lane.direction){
lane.train.position.x = ((lane.train.position.x > lane.finalPosition)? lane.initialPosition : (lane.train.position.x + lane.speed * deltaTime));
} else{
lane.train.position.x = ((lane.train.position.x < lane.finalPosition)? lane.initialPosition : (lane.train.position.x - lane.speed * deltaTime));
}
}
const trainLength = 4 * cellWidth * lane.trainLength;
const trainLeftEdge = lane.train.position.x + (lane.direction? -(trainLength - cellWidth * 0.5) : -(cellWidth * 0.5));
Expand All @@ -1216,6 +1268,8 @@ const update = () =>{
gameSounds.shred.play();
gameSounds.death2.play();
gameOver = true;
document.getElementById("pauseButton").style.display = "none";
updateHighScore();
setTimeout(() => {
document.getElementById("restart").style.visibility = "visible";
// if (confirm("Game Over.\nRestart?"))
Expand Down