Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
Final draft
  • Loading branch information
@nlz18001
nlz18001 committed Apr 23, 2024
1 parent b62151b commit 84ec74d
Show file tree
Hide file tree
Showing 5 changed files with 302 additions and 0 deletions.
87 changes: 87 additions & 0 deletions final-project/final.css
View file
@@ -0,0 +1,87 @@
body {
display: flex;
flex-direction: column;
align-items: center;
background-color: beige;
}

h1 {
font-family: "Press Start 2P", system-ui;
font-weight: 400;
font-style: normal;
font-size: 30px;
color: rgb(100, 51, 51);
}

#game-container {
width: 400px;
height: 600px;
position: relative;
background-size: cover;
background-position: center;

}

#player {
height: 100px;
position: absolute;
bottom: 145px;
animation: run-animation 0.5s steps(10) infinite;
}

@keyframes run-animation {
from { background-position: 0; }
to { background-position: -100%; }
}

.obstacle {
width: 20px;
height: 20px;
background-color: red;
position: absolute;
}

.power-up {
width: 20px;
height: 20px;
background-color: yellow;
position: absolute;
}

#score {
color: white;
font-family: "Press Start 2P", system-ui;
font-weight: 400;
font-style: normal;
font-size: 12px;
margin-top: 10px;
}

#level {
color: white;
font-family: "Press Start 2P", system-ui;
font-weight: 400;
font-style: normal;
font-size: 12px;
margin-top: 10px;
}

.score-level {
top: 10px;
display: flex;
flex-direction: row;
justify-content: center;
gap: 30px;
}

#top-score {
color: white;
font-family: "Press Start 2P", system-ui;
font-weight: 400;
font-style: normal;
position: relative;
display: flex;
flex-direction: row;
justify-content: center;
top: 550px;
}
25 changes: 25 additions & 0 deletions final-project/final.html
View file
@@ -0,0 +1,25 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Game</title>
<link rel="stylesheet" href="final.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet">
</head>
<body>
<h1>THE RUNNING MAN</h1>
<div id="game-container" style="background-image: url(images/background.jpeg);">
<img id="player" src="images/running-man.gif" alt="Running man."></img>
<div class="score-level">
<div id="score">SCORE: <span id="score-value">0</span></div>
<div id="level">LEVEL: <span id="level-value">1</span></div>
</div>
<div id="top-score">TOP SCORE: <span id="top-score-value">0</span></div>
</div>

<script src="final.js"></script>
</body>
</html>
190 changes: 190 additions & 0 deletions final-project/final.js
View file
@@ -0,0 +1,190 @@
document.addEventListener("DOMContentLoaded", function () {
const gameContainer = document.getElementById("game-container");
const player = document.getElementById("player");
const scoreValue = document.getElementById("score-value");
const levelValue = document.getElementById("level-value");
const topScoreValue = document.getElementById("top-score-value");

let playerLeft = parseInt(window.getComputedStyle(player).getPropertyValue("left"));
let playerBottom = parseInt(window.getComputedStyle(player).getPropertyValue("bottom"));
const playerWidth = parseInt(window.getComputedStyle(player).getPropertyValue("width"));
const playerHeight = parseInt(window.getComputedStyle(player).getPropertyValue("height"));

const gameContainerWidth = parseInt(window.getComputedStyle(gameContainer).getPropertyValue("width"));
const gameContainerHeight = parseInt(window.getComputedStyle(gameContainer).getPropertyValue("height"));

let gameInterval;
let score = 0;
let level = 1;
let obstacleSpeed = 5;
let obstacleInterval = 2000;
let nextLevelThreshold = 50; // Initialize nextLevelThreshold

let topScore = localStorage.getItem("topScore");
if (topScore === null) {
topScore = 0;
}
topScoreValue.textContent = topScore;

function movePlayer(direction) {
if (direction === "left" && playerLeft > 0) {
playerLeft -= 10;
} else if (direction === "right" && playerLeft < gameContainerWidth - playerWidth) {
playerLeft += 10;
}

player.style.left = playerLeft + "px";
}

function updateScore(points) {
score += points;
scoreValue.textContent = score;

if (score >= nextLevelThreshold) {
level++
levelValue.textContent = level;
nextLevelThreshold = score + 50; // Update nextLevelThreshold

obstacleSpeed += 1;
obstacleInterval -= 200;
}

if (score > topScore) {
topScore = score;
localStorage.setItem("topScore", topScore);
topScoreValue.textContent = topScore;
}
}

function createObstacle() {
const obstacle = document.createElement("div");
obstacle.classList.add("obstacle");
obstacle.style.left = Math.random() * (gameContainerWidth - 20) + "px";
gameContainer.appendChild(obstacle);

let obstacleInterval = setInterval(() => {
const obstacleBottom = parseInt(window.getComputedStyle(obstacle).getPropertyValue("bottom"));
const obstacleLeft = parseInt(window.getComputedStyle(obstacle).getPropertyValue("left"));
const obstacleWidth = parseInt(window.getComputedStyle(obstacle).getPropertyValue("width"));
const obstacleHeight = parseInt(window.getComputedStyle(obstacle).getPropertyValue("height"));

if (obstacleBottom < 0) {
clearInterval(obstacleInterval);
obstacle.remove();
}

const playerRight = playerLeft + playerWidth;
const obstacleRight = obstacleLeft + obstacleWidth;

const playerTop = playerBottom + playerHeight;
const obstacleTop = obstacleBottom + obstacleHeight;

if (
playerLeft < obstacleRight &&
playerRight > obstacleLeft &&
playerBottom < obstacleTop &&
playerTop > obstacleBottom
) {
endGame();
}

obstacle.style.bottom = obstacleBottom - obstacleSpeed + "px";
}, 20);
}

function createPowerUp() {
const powerUp = document.createElement("div");
powerUp.classList.add("power-up");
powerUp.style.left = Math.random() * (gameContainerWidth - 20) + "px";
gameContainer.appendChild(powerUp);

let powerUpInterval = setInterval(() => {
const powerUpBottom = parseInt(window.getComputedStyle(powerUp).getPropertyValue("bottom"));
const powerUpLeft = parseInt(window.getComputedStyle(powerUp).getPropertyValue("left"));

if (powerUpBottom < 0) {
clearInterval(powerUpInterval);
powerUp.remove();
}

const powerUpWidth = parseInt(window.getComputedStyle(powerUp).getPropertyValue("width"));
const powerUpHeight = parseInt(window.getComputedStyle(powerUp).getPropertyValue("height"));

if (
playerLeft < powerUpLeft + powerUpWidth &&
playerLeft + playerWidth > powerUpLeft &&
playerBottom < powerUpBottom + powerUpHeight &&
playerBottom + playerHeight > powerUpBottom
) {
clearInterval(powerUpInterval);
powerUp.remove();
updateScore(10)

if (score > topScore) {
topScore = score;
localStorage.setItem("topScore", topScore);
topScoreValue.textContent = topScore;
}
}

powerUp.style.bottom = powerUpBottom - obstacleSpeed + "px";
}, 20);
}

function startGame() {
gameInterval = setInterval(() => {
createObstacle();
if (Math.random() < 0.2) {
createPowerUp();
}
}, obstacleInterval);
}

function endGame() {
clearInterval(gameInterval);

const obstacles = document.querySelectorAll(".obstacle");
obstacles.forEach(obstacle => obstacle.remove());

const powerUps = document.querySelectorAll(".power-up");
powerUps.forEach(powerUp => powerUp.remove());

alert("Game Over:( Score: " + score);
score = 0;
scoreValue.textContent = score;

startGame();
}

document.addEventListener("keydown", function (event) {
if (event.key === "ArrowLeft") {
movePlayer("left");
} else if (event.key === "ArrowRight") {
movePlayer("right");
}
});

window.addEventListener("gamepadconnected", function (event) {
const gamepad = navigator.getGamepads()[event.gamepad.index];
gamepad.buttons.forEach((button, index) => {
button.addEventListener("pressed", function () {
if (index === 14) {
movePlayer("left");
} else if (index === 15) {
movePlayer("right");
}
});
});
});

gameContainer.addEventListener("touchstart", function (event) {
const touchX = event.touches[0].clientX;
if (touchX < playerLeft + playerWidth / 2) {
movePlayer("left");
} else {
movePlayer("right");
}
});

startGame();
});
Binary file added final-project/images/background.jpeg
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added final-project/images/running-man.gif
View file
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 84ec74d

Please sign in to comment.