upgrading GUI & improved performance

Readme.md

@@ -0,0 +1,25 @@
+# Road To Infinity
+
+
+<a href="https://realpxd.github.io/RoadToInfinity" ><img src="./thumbnail.png" alt="thumbnail" ></a>
+
+<h2> I am glad to introduce this game </h2><br>
+
+<h3> Developed in JS & HTML and it might be buggy but it was my first attemp to start with❤️</h3>
+<spam> As a student i learned and earned more skills in my javascript journey. Loved exploring and doing this. <3 </span><br><br>
+
+<h4> Some usefull links </h4>
+<a href="https://realpxd.github.io/ProgrammerXD/Money-Game"> <img src="https://img.shields.io/badge/Play-Squid_game-orange" ></a><br>
+<a href="https://realpxd.github.io/Instagram-Clone-Beta"> <img src="https://img.shields.io/badge/INSTAGRAM-CLONE-brown" ></a> <br>
+<a href="https://realpxd.github.io/ProgrammerXD"> <img src="https://img.shields.io/badge/Website-ProgrammerXD.in-orange" ></a> <br>
+<a href="https://realpxd.github.io/ProgrammerXD/Certificates.html"> <img src="https://img.shields.io/badge/Certificates-PXD-blue" ></a>
+<a href="https://www.linkedin.com/in/programmerxd"> <img src="https://img.shields.io/badge/LinkedIN-Resume-brown" ></a>
+<br><br><br>
+
+
+<h2 id="contact" > Contact me >> </h2> 
+➖ <a href="https://t.me/damnnaman"> <img src="https://img.shields.io/badge/TELEGRAM-DamnNaman-orange" ></a><br>
+➖ <a href="https://twitter.com/PXD_Officials"> <img src="https://img.shields.io/badge/TWITTER-PXD_Officials-orange" ></a><br>
+➖ <a href="https://in.linkedin.com/programmerxd"> <img src="https://img.shields.io/badge/LinkedIN.com-ProgrammerXD-orange" ></a><br>
+➖ <a href="https://youtube.com/channel/UCTlEvNf_UWq2aoq8-XFIYIQ"> <img src="https://img.shields.io/badge/YOUTUBE-ProgrammerXD-orange" ></a>
+

firstGame.js

@@ -0,0 +1,75 @@
+/* Goobal variables */
+var start = document.getElementById("start");
+var score = document.getElementById("scores");
+var count = document.getElementById("count");
+var man = document.getElementById("man");
+var cI = document.getElementById("cI");
+var plr = document.getElementById("plr");
+var bgMusic = document.getElementById("bm");
+// Starting the game 
+start.addEventListener("click", function(){
+var obs = document.createElement("marquee");
+var garbage = ["🦁","🥫","🔪","🎁","🔥","🪓"];
+
+  // Creating marquee
+for(var i = 0; i < 20; i++){
+  var node = document.createElement("font");
+  var textnode = document.createTextNode(garbage[Math.floor(Math.random()*garbage.length)]);
+   obs.id = 'obstacles';
+   playArea.appendChild(obs);
+   node.appendChild(textnode);
+   obs.appendChild(node);
+
+    // Styling marquee and other elements 
+    node.style.color = "blue";
+    node.style.fontSize = "25pt";
+    node.style.textShadow = "-2px 2px 1px black";
+    node.style.marginRight = Math.floor(Math.random()*210) + "px";
+    start.style.opacity = "0";
+    score.style.display = "flex";
+    cI.style.marginTop = "200%";
+    cI.style.position = "absolute";
+// Score js 
+document.querySelectorAll('.number-animate').forEach( (el) => {
+  const endValue = el.getAttribute('data-end-value');
+  const incrementValue = el.getAttribute('data-increment');
+  const durationValue = el.getAttribute('data-duration');
+  if (endValue) numberAnimation(el, endValue, incrementValue, durationValue);
+});
+function numberAnimation(el, endValue, incrementor, duration) {
+  anime({
+    targets: el,
+    textContent: endValue,
+    round: incrementor ? 1/incrementor : 1/5,
+    easing: 'easeInOutQuad',
+    duration: duration ? duration : 4000,
+  });
+}};
+    bgMusic.play();
+    console.log("///Game Started");
+    console.log("///Background Music loaded");
+    console.log("///Running all functions");
+    console.log("///Clearing Console");
+    console.clear();
+});
+// Jump function 
+	// Jump 
+	window.addEventListener("click", function(){
+	    man.style.marginTop = "35%";
+	    man.style.transition = "ease-out 1s";
+            plr.setAttribute('src','Man2.webp');
+        console.log("triggered jump");
+            console.clear();
+	// Return to starting point 
+	setTimeout(function(){
+	  if(man.style.marginTop <= "60%"){
+	        man.style.marginTop = "65%";
+	    man.style.marginLeft = "25px";
+            plr.setAttribute('src','Man.webp');
+                console.clear();
+	  };},1000);
+	});
+
+/* Under construction 
+	 Game over functions 
+        "alert("YOUR SCORE : " + count.innerHTML + "\n\n KEEP PLAYING TO BECOME PRO ;p"); */

index.html

@@ -0,0 +1,143 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>ROAD TO INFINITY</title>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.2.0/anime.min.js"></script>
+<!-- Meta tags -->
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
+<meta name="keywords" content="GAME, ROAD TO INFINITY" />
+<meta name="author" content="ProgrammerXD / Naman Saini" />
+<meta name="title" content="ROAD TO INFINITY" />
+<meta name="description" content="First GAME by Naman Saini/ProgrammerXD" />
+<meta property="og:image" content="https://telegra.ph/file/c303d7980473ddc6d4714.jpg" />
+<style type="text/css">
+*{
+    margin:0;
+    padding:0;
+    transition:0.2s;
+}
+body{
+    background-image:url('Sky.webp');
+    background-size:600px;
+    background-repeat:no-repeat;
+}
+.gameName{
+	position:absolute;
+	color:darkred;
+	bottom:0;
+	width:95%;
+	z-index:1;
+	text-align:center;
+	background:white;
+	padding:2.5%;
+	font-size:15pt;
+	font-family:cursive;
+}
+#man{
+    display:block;
+    position:absolute;
+    overflow:hidden;
+    height:100px;
+    width:100px;
+    margin-top:65%;
+    margin-left:25px;
+}
+#stage{
+    display:block;
+    position:fixed;
+    height:100vh;
+    width:100%;
+    padding:20px;
+    margin:0;
+    margin-top:90%;
+    background:black;
+    color:white;
+   /* background-image:url('Grass.png');*/
+}
+#start{
+    position:absolute;
+    margin-top:120px;
+    margin-left:20px;
+    height:50px;
+    width:130px;
+    border:none;
+    outline:none;
+    border-radius:10px;
+    background:darkred;
+    color:white;
+    letter-spacing:2px;
+    font-weight:900;
+    box-shadow:-2px 2px 1px black,inset 1px -1px 1px black;
+}
+#obstacles{
+    display:block;
+    position:absolute;
+    margin-top:80%;
+   /* animation: move 1s ease-in infinite alternate-reverse;*/
+}
+/*@keyframes move {
+    from{}
+    to{}
+}*/
+#garbage{
+    box-shadow:-2px 2px 1px black,inset 1px -1px 1px black;
+}
+#scores{
+    display:none;
+    position:absolute;
+    text-align:center;
+    justify-content:center;
+    align-items:center;
+    width:150px;
+    height:50px;
+    font-size:25pt;
+    border-radius:10px;
+    font-weight:900;
+    color:white;
+    margin-top:15px;
+    margin-left:30%;
+    margin-right:auto;
+    backdrop-filter:blur(2px);
+    box-shadow:2px 2px 1px black,inset -1px -1px 1px black,-1px -1px 1px black,inset 2px 2px 1px black;
+}
+</style>
+</head>
+<body>
+<h1 class="gameName"><font style="font-family:Roman; font-size:14pt;">Game Name :</font> Road To Infinity </h1>
+<!-- Scores -->
+<div id="scores">
+	<p> <span id="count" class="number-animate" data-end-value="500000" data-increment="1" data-duration="4000000">1</span> </p>
+</div>
+
+<!-- Player -->
+	<div id="man"><img id="plr" src="Man.webp" height="100" width="100"></div>
+
+<!-- Play Area-->
+<div id="playArea">
+	<marquee id="obstacles" scroll-behaviour="scroll" direction="left" loop="true" scrollmount="500"></marquee>
+</div>
+
+<!-- Floor -->
+<div id="stage">
+	<div id="cI">
+	<h2>Controls &amp; Instructions :- </h2>
+		<ul> 
+		    <li>Press start to start the game</li>
+		    <li>Tap on screen to jump</li>
+		    <li>Tap twice for Double jump</li>
+		    <li>Avoid the obstacles</li>
+		    <li>Keep tapping for god mode</li>
+		    <li>Points matter on time you survive</li>
+		</ul>
+	</div>
+</div><br>
+
+<!-- Start Button -->
+<button id="start">START</button>
+<audio id="bm" hidden>
+  <source src="BgMusic.mp3">
+</audio>
+<script src="firstGame.js" type="text/javascript"></script>
+<script src="./anime-master/lib/anime.min.js" type="text/javascript"></script>
+</body>
+</html>