Running Game Using Html Css Javascript
.png)
Inroduction:
Welcome to this exhilarating coding adventure! In this video, we're diving deep into the world of web development to create an amazing running game from scratch using HTML, CSS, and JavaScript. Best of all, there's no commentary to distract you from the coding action!
🏃♂️ Get ready to witness the creation of a fully functional running game, complete with dynamic animations, smooth controls, and challenging obstacles. Whether you're an aspiring developer looking to enhance your skills or a curious gamer interested in the magic behind your favorite games, this video is for you.
🌟 What You'll Learn:
Building a responsive game canvas with HTML and CSS
Creating and animating game characters
Implementing game logic and collision detection with JavaScript
Designing engaging levels and obstacles
Fine-tuning the game for a polished experience
🚀 Why Watch This Video:
No commentary: We keep it focused on the code and the game creation process.
Educational and entertaining: Learn coding techniques while enjoying the excitement of game development.
Suitable for all skill levels: Whether you're a beginner or an experienced coder, there's something here for everyone.
Step-by-step guidance: Follow along as we break down complex concepts into easy-to-understand steps.
🤝 Join our coding community! Subscribe, like, and hit the notification bell to stay updated with our latest coding tutorials and projects.
Thank you for watching, and we hope you enjoy this coding journey with us. Feel free to leave any questions or suggestions in the comments section below, and don't forget to share this video with your fellow coding enthusiasts. Let's make this running game project a smashing success together! 🎮🚀 #HTML #CSS #JavaScript #GameDevelopment #CodingTutorial
Html Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Running Game</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="game">
<div class="player idle"></div>
<div class="buildings"></div>
<div class="road"></div>
<div class="score">Score: 0</div>
<div class="msg">Click to Start...</div>
</div>
</body>
<script src="script.js"></script>
</html>
Css Code:
@import url("https://fonts.googleapis.com/css2?family=
Open+Sans:ital,wght@1,800&display=swap");
*, *::before, *::after {
padding: 0;
margin: 0 auto;
box-sizing: border-box;
}
body {
font-family: "Open Sans", sans-serif;
background-color: #111;
color: #fff;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.game {
position: relative;
width: 960px;
height: 340px;
overflow: hidden;
background-image: linear-gradient(#001, #200);
box-shadow: 0 0 1em #fff1;
}
.score {
position: absolute;
top: 0.5em;
left: 0.5em;
}
.msg {
position: absolute;
top: 2em;
left: 50%;
font-size: 1.2em;
transform: translateX(-50%);
text-align: center;
transition: opacity 0.25s;
}
.msg.off {
opacity: 0;
}
.player {
position: absolute;
top: var(--player-y, 320px);
left: var(--player-x, 480px);
transform: translate(-100%, -100%);
width: 24px;
height: 24px;
background-size: contain;
}
.player.idle {
background-image: url("https://assets.codepen.io/1948355/player-idle.gif");
}
.player.run {
background-image: url("https://assets.codepen.io/1948355/player-run.gif");
}
.player.jump {
background-image: url("https://assets.codepen.io/1948355/player-jump.gif");
}
.player.dead {
background-image: url("https://assets.codepen.io/1948355/player-dead.gif");
}
.building {
position: absolute;
bottom: 20px;
left: var(--building-x, 960px);
border: solid #0007;
border-width: 0 1px;
}
.building_fragment {
position: absolute;
width: 25%;
height: 33.334%;
background-image: url("https://assets.codepen.io/1948355/building02.png");
background-size: 1600% 300%;
filter: hue-rotate(var(--hue));
}
.building_fragment:nth-child(4n+1) {
left: 0%;
background-position-x: calc(var(--buildingImageX, 0%) + 0%);
}
.building_fragment:nth-child(4n+2) {
left: 25%;
background-position-x: calc(var(--buildingImageX, 0%) + 6.25%);
}
.building_fragment:nth-child(4n+3) {
left: 50%;
background-position-x: calc(var(--buildingImageX, 0%) + 12.5%);
}
.building_fragment:nth-child(4n+4) {
left: 75%;
background-position-x: calc(var(--buildingImageX, 0%) + 18.75%);
}
.building_fragment:nth-child(n+1):nth-child(-n+4) {
top: 0%;
background-position-y: 0%;
}
.building_fragment:nth-child(n+5):nth-child(-n+8) {
top: 33.334%;
background-position-y: 50%;
}
.building_fragment:nth-child(n+9):nth-child(-n+12) {
top: 66.668%;
background-position-y: 100%;
}
.building.destroy .building_fragment {
z-index: 100;
-webkit-animation: destroy 1s ease-out forwards;
animation: destroy 1s ease-out forwards;
}
@-webkit-keyframes destroy {
to {
transform: translateX(var(--tx)) translateY(var(--ty))
rotateX(var(--rx)) rotateY(var(--ry)) rotateZ(var(--rz));
opacity: 0;
}
}
@keyframes destroy {
to {
transform: translateX(var(--tx)) translateY(var(--ty))
rotateX(var(--rx)) rotateY(var(--ry)) rotateZ(var(--rz));
opacity: 0;
}
}
.building.destroy::before {
content: "";
position: absolute;
top: calc(50% - 5px);
right: 90%;
width: 320px;
height: 10px;
border-radius: 5px;
background-image: linear-gradient(#f000, #f00, #f000);
-webkit-animation: laserOff 0.5s ease-out forwards;
animation: laserOff 0.5s ease-out forwards;
}
@-webkit-keyframes laserOff {
to {
opacity: 0;
}
}
@keyframes laserOff {
to {
opacity: 0;
}
}
.road {
position: absolute;
bottom: 0;
width: calc(100% + 10px);
height: 20px;
background-image: linear-gradient(#555, #333);
}
.road::after {
content: "";
position: absolute;
top: calc(50% - 1px);
left: 0;
width: 100%;
height: 2px;
background-image: repeating-linear-gradient(90deg,
#aaa 0px 5px, #aaa0 5px 10px);
}
Javascript Code:
// DOM variables
const scoreDiv = document.querySelector('.score');
const msgDiv = document.querySelector('.msg');
const gameContainer = document.querySelector('.game');
const playerDiv = document.querySelector('.player');
const buildingsDiv = document.querySelector('.buildings');
const road = document.querySelector('.road');
// Game const / variables
const g = 0.098;
const buildings = [];
const player = {
x: 320,
y: 0,
v: 0
}
let gameStatus = 'start';
let speed, score, nextBuildingX, gameProgress, lastHeight, lastTime;
// On click event
gameContainer.addEventListener('mousedown', () => {
switch (gameStatus) {
case "start":
case "end":
startGame();
break;
case "on":
jump();
break;
}
});
function startGame() {
buildings.splice(0,buildings.length);
buildingsDiv.innerHTML = '';
player.x = 480;
player.y = 0;
player.v = 0;
speed = 1;
score = 0;
nextBuildingX = 960;
gameProgress = 0;
lastHeight = 0;
lastTime = 0;
gameStatus = 'on';
render();
msgDiv.innerHTML = `<h2>Escape the Laser!</h2>(Click to jump)`;
setTimeout(() => {
msgDiv.classList = 'msg off';
}, 3000);
}
function jump() {
if (player.v !== 0) { return false; }
player.v = 3.2;
}
function render() {
// set the Delat time
const thisTime = performance.now();
const dt = Math.min(32, Math.max(8, thisTime - lastTime)) / 16.666;
lastTime = thisTime;
if ((gameStatus === 'dead')) {
if (player.y > 0) {
player.y = Math.max(0, player.y + player.v * dt);
player.v -= g * dt;
playerDiv.style.setProperty('--player-y', (320 - player.y) + "px");
requestAnimationFrame(render);
} else {
gameStatus = 'end';
msgDiv.innerHTML += `Click to restart`;
}
return false;
}
if (nextBuildingX < gameProgress + 960 + speed * dt) {
createBuilding();
}
let base = 0;
const destroyBuildings = [];
let nextBuilding = buildings[0];
buildings.forEach((building, ix) => {
if (building.x < player.x) {
base = building.height;
nextBuilding = buildings[ix + 1]
}
if (building.x < gameProgress + 180) {
destroyBuildings.push(ix);
}
building.div.style.setProperty('--building-x',
(building.x - gameProgress) + "px");
});
if (player.v > 0) {
player.y += player.v * dt;
player.v = Math.max(0, player.v - g * dt);
playerDiv.classList = 'player jump';
} else if (base < player.y) {
player.y = Math.max(base, player.y + player.v * dt);
player.v -= g * dt;
playerDiv.classList = 'player jump';
} else {
player.v = 0;
}
playerDiv.classList = `player ${player.v === 0 ? 'run' : 'jump'}`;
let nextPlayerX = player.x + speed * dt;
if (nextPlayerX - gameProgress < 720) {
nextPlayerX += 1 / speed * dt;
}
if ((nextPlayerX > nextBuilding.x) && (nextBuilding.height > player.y)) {
nextPlayerX = nextBuilding.x;
playerDiv.classList = 'player idle';
}
player.x = nextPlayerX;
playerDiv.style.setProperty('--player-x', (nextPlayerX - gameProgress) + "px");
playerDiv.style.setProperty('--player-y', (320 - player.y) + "px");
road.style.left = (gameProgress % 10) * -1 + 'px';
destroyBuildings.forEach(ix => {
const thisDiv = buildings[ix].div
thisDiv.classList.add('destroy');
setTimeout(() => {
thisDiv.parentNode.removeChild(thisDiv);
}, 1000);
if ((player.x <= buildings[ix].x + buildings[ix].width)
&& (player.y <= buildings[ix].height)) {
gameStatus = 'dead';
playerDiv.classList = 'player dead';
msgDiv.innerHTML = `<h2>You're dead!</h2>`;
msgDiv.classList = 'msg';
} else {
buildings.splice(ix, 1);
score++;
}
});
speed += 0.001 * dt;
gameProgress += speed * dt;
scoreDiv.innerHTML = `Score: ${score}`;
if ((gameStatus === 'on') || (gameStatus === 'dead')) {
requestAnimationFrame(render)
}
}
function createBuilding() {
const building = {};
building.x = nextBuildingX;
building.width = 60 + Math.round(Math.random() * 60);
building.height = Math.min(Math.max((30 +
Math.round(Math.random() * 120)), lastHeight - 30), lastHeight + 30);
const buildingDiv = document.createElement('div');
buildingDiv.classList = "building"
buildingDiv.style.width = building.width + 'px';
buildingDiv.style.height = building.height + 'px';
buildingDiv.style.setProperty('--hue', Math.round(
Math.random() * 360) + 'deg');
buildingDiv.style.setProperty('--buildingImageX',
Math.floor(Math.random() * 4) * 27.08333 + '%');
for (let i = 0; i < 12; i++) {
const fragmentDiv = document.createElement('div');
fragmentDiv.classList = "building_fragment"
fragmentDiv.style.setProperty('--tx', Math.random() * -120 + 'px');
fragmentDiv.style.setProperty('--ty', Math.random() * -160 + 'px');
fragmentDiv.style.setProperty('--rx', Math.random() * 360 + 'deg');
fragmentDiv.style.setProperty('--ry', Math.random() * 360 + 'deg');
fragmentDiv.style.setProperty('--rz', Math.random() * 360 + 'deg');
buildingDiv.appendChild(fragmentDiv);
}
building.div = buildingDiv;
buildingsDiv.appendChild(buildingDiv);
buildings.push(building);
nextBuildingX += building.width;
lastHeight = building.height;
}
