Merge branch 'master' of https://github.com/AdityaKumar2408/JS-beginn…

…er-projects
Git21221 · Oct 4, 2023 · eec2a48 · eec2a48
2 parents 03421ac + 88bb432
commit eec2a48
Show file tree

Hide file tree

Showing 108 changed files with 29,546 additions and 171 deletions.
diff --git a/2D archery game/styles.css b/2D archery game/styles.css
@@ -11,6 +11,9 @@ body {
     position:absolute;
     width:100%;
     top:0;
+    display: flex;
+  align-items: center;
+  justify-content: center;
     left:0;
 }
 

diff --git a/Bouncing Balls/fun.js b/Bouncing Balls/fun.js
@@ -0,0 +1,102 @@
+// console.log("Hello World");
+
+var canvas = document.getElementById("canvas");
+var c = canvas.getContext("2d");
+var tx = window.innerWidth;
+var ty = window.innerHeight;
+canvas.width = tx;
+canvas.height = ty;
+//c.lineWidth= 5;
+//c.globalAlpha = 0.5;
+
+var mousex = 0;
+var mousey = 0;
+
+addEventListener("mousemove", function() {
+  mousex = event.clientX;
+  mousey = event.clientY;
+});
+
+
+var grav = 0.99;
+c.strokeWidth=5;
+function randomColor() {
+  return (
+    "rgba(" +
+    Math.round(Math.random() * 250) +
+    "," +
+    Math.round(Math.random() * 250) +
+    "," +
+    Math.round(Math.random() * 250) +
+    "," +
+    Math.ceil(Math.random() * 10) / 10 +
+    ")"
+  );
+}
+
+function Ball() {
+  this.color = randomColor();
+  this.radius = Math.random() * 20 + 14;
+  this.startradius = this.radius;
+  this.x = Math.random() * (tx - this.radius * 2) + this.radius;
+  this.y = Math.random() * (ty - this.radius);
+  this.dy = Math.random() * 2;
+  this.dx = Math.round((Math.random() - 0.5) * 10);
+  this.vel = Math.random() /5;
+  this.update = function() {
+    c.beginPath();
+    c.arc(this.x, this.y, this.radius, 0, 2 * Math.PI);
+    c.fillStyle = this.color;
+    c.fill();
+    //c.stroke();
+  };
+}
+
+var bal = [];
+for (var i=0; i<50; i++){
+    bal.push(new Ball());
+}
+
+function animate() {    
+  if (tx != window.innerWidth || ty != window.innerHeight) {
+    tx = window.innerWidth;
+    ty = window.innerHeight;
+    canvas.width = tx;
+    canvas.height = ty;
+  }
+  requestAnimationFrame(animate);
+  c.clearRect(0, 0, tx, ty);
+  for (var i = 0; i < bal.length; i++) {
+    bal[i].update();
+    bal[i].y += bal[i].dy;
+    bal[i].x += bal[i].dx;
+    if (bal[i].y + bal[i].radius >= ty) {
+      bal[i].dy = -bal[i].dy * grav;
+    } else {
+      bal[i].dy += bal[i].vel;
+    }    
+    if(bal[i].x + bal[i].radius > tx || bal[i].x - bal[i].radius < 0){
+        bal[i].dx = -bal[i].dx;
+    }
+    if(mousex > bal[i].x - 20 && 
+      mousex < bal[i].x + 20 &&
+      mousey > bal[i].y -50 &&
+      mousey < bal[i].y +50 &&
+      bal[i].radius < 70){
+        //bal[i].x += +1;
+        bal[i].radius +=5; 
+      } else {
+        if(bal[i].radius > bal[i].startradius){
+          bal[i].radius += -5;
+        }
+      }
+
+    }
+}
+
+animate();
+
+setInterval(function() {
+  bal.push(new Ball());
+  bal.splice(0, 1);
+}, 400);
diff --git a/Bouncing Balls/index.html b/Bouncing Balls/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Bouncing Balls</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <canvas id="canvas"></canvas>
+    <script src="fun.js"></script>
+</body>
+</html>
diff --git a/Bouncing Balls/style.css b/Bouncing Balls/style.css
@@ -0,0 +1,5 @@
+body {
+    margin: 0px;
+    background-color: rgb(56,220, 250);
+    overflow: hidden;
+}
diff --git a/Dice-Game/images/dice1.png b/Dice-Game/images/dice1.png
diff --git a/Dice-Game/images/dice2.png b/Dice-Game/images/dice2.png
diff --git a/Dice-Game/images/dice3.png b/Dice-Game/images/dice3.png
diff --git a/Dice-Game/images/dice4.png b/Dice-Game/images/dice4.png
diff --git a/Dice-Game/images/dice5.png b/Dice-Game/images/dice5.png
diff --git a/Dice-Game/images/dice6.png b/Dice-Game/images/dice6.png
diff --git a/Dice-Game/index.css b/Dice-Game/index.css
@@ -0,0 +1,42 @@
+*{
+    margin: 0;
+    padding: 0;
+}
+body{
+    background-color:#213555 ;
+    font-family: Verdana, Geneva, Tahoma, sans-serif;
+    font-size: 36px;
+}
+.container{
+    height: 100vh;
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-evenly;
+    align-items: center;
+}
+.dice-container{
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    width: 300px;
+}
+.container>h1{
+    font-size: 5rem;
+    font-family: 'Pacifico', cursive;
+    font-weight:600;
+    color:chartreuse;
+}
+.dice-container p{
+    margin-bottom: 40px;
+    font-size: 2rem;
+    font-family: 'Courgette', cursive;
+    font-weight:510;
+    color: aqua;
+}
+footer{
+    font-size: 12px;
+    color: burlywood;
+}
+
diff --git a/Dice-Game/index.html b/Dice-Game/index.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="index.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=Pacifico&family=Roboto+Mono:ital,wght@0,100;1,700&display=swap" rel="stylesheet">
+<link href="https://fonts.googleapis.com/css2?family=Courgette&display=swap" rel="stylesheet">
+    <title>Dice Game</title>
+  </head>
+  <body>
+    <div class="container">
+      <h1>Refresh Me</h1>
+      <div class="dice-container">
+        <div class="p-dice">
+          <p>player1</p>
+          <img id="left" src="./images/dice6.png" height="80px"/>
+        </div>
+        <div class="p-dice" >
+          <p>player2</p>
+          <img id="right" src="./images/dice6.png" height="80px"/>
+        </div>
+      </div>
+      <footer>@copyright23||by||anujrathour</footer>
+    </div>
+
+    <script src="index.js" charset="UTF-8"> </script>
+  </body>
+</html>
diff --git a/Dice-Game/index.js b/Dice-Game/index.js
@@ -0,0 +1,28 @@
+var randomN1 = Math.floor(Math.random() * 6) + 1; 
+
+var randomDiceImage = "dice" + randomN1 + ".png"; 
+
+var randomImageSource = "images/" + randomDiceImage;
+
+var image1 = document.querySelectorAll("img")[0];
+
+image1.setAttribute("src", randomImageSource);
+
+
+var randomN2 = Math.floor(Math.random() * 6) + 1;
+
+var randomImageSource2 = "images/dice" + randomN2 + ".png";
+
+document.querySelectorAll("img")[1].setAttribute("src", randomImageSource2);
+
+//If player 1 wins
+if(randomN1>randomN2){
+  document.querySelector("h1").innerHTML="🚩player 1 wins!";
+}
+else if(randomN1<randomN2){
+  document.querySelector("h1").innerHTML="player 2 wins 🚩";
+}
+
+else{
+  document.querySelector("h1").innerHTML="Draw!"
+}
diff --git a/Heart pop up/index.html b/Heart pop up/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Heart</title>
+    <link rel="stylesheet" href="style.css" />
+  </head>
+  <body>
+    <script src="index.js"></script>
+  </body>
+</html>
diff --git a/Heart pop up/index.js b/Heart pop up/index.js
@@ -0,0 +1,16 @@
+const bodyE1 = document.querySelector("body");
+
+bodyE1.addEventListener("mousemove", (event) => {
+  const xPos = event.offsetX;
+  const yPos = event.offsetY;
+  const spanE1 = document.createElement("span");
+  spanE1.style.left = xPos + "px";
+  spanE1.style.top = yPos + "px";
+  const size = Math.random() * 100;
+  spanE1.style.width = size + "px";
+  spanE1.style.height = size + "px";
+  bodyE1.appendChild(spanE1);
+  setTimeout(() => {
+    spanE1.remove();
+  }, 3000);
+});
diff --git a/Heart pop up/style.css b/Heart pop up/style.css
@@ -0,0 +1,31 @@
+body {
+  margin: 0;
+  height: 100vh;
+  background-color: black;
+  overflow: hidden;
+}
+span {
+  background: url(https://cdn4.iconfinder.com/data/icons/general-office/91/General_Office_54-64.png);
+  width: 100px;
+  height: 100px;
+  position: absolute;
+  pointer-events: none;
+  background-size: cover;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  animation: animate 10s linear;
+}
+
+@keyframes animate {
+  0% {
+    transform: translate(-50%, -50%);
+    opacity: 1;
+    filter: hue-rotate(0);
+  }
+  100% {
+    transform: translate(-50%, -5000%);
+    opacity: 0;
+    filter: hue-rotate(1024deg);
+  }
+}
diff --git a/JS bubble Game/about.png b/JS bubble Game/about.png
diff --git a/JS bubble Game/hello-light.65c25f43.webp b/JS bubble Game/hello-light.65c25f43.webp
diff --git a/JS bubble Game/heroimage2.webp b/JS bubble Game/heroimage2.webp
diff --git a/JS bubble Game/home-page.webp b/JS bubble Game/home-page.webp
diff --git a/JS bubble Game/index.html b/JS bubble Game/index.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="style.css" />
+    <title>Bubble Game</title>
+  </head>
+  <body>
+    <div id="main">
+      <audio id="popSound">
+        <source src="pop.mp3" type="audio/mpeg">
+        Your browser does not support the audio element.
+      </audio>
+
+      <div id="panel">
+        <div id="ptop">
+          <button id="startButton">Start Game</button>
+          <div class="elem">
+            <h2>HIT</h2>
+            <div id="hit" class="box">0</div>
+          </div>
+          <div class="elem">
+            <h2>TIMER</h2>
+            <div id="timer" class="box">0</div>
+          </div>
+          <div class="elem">
+            <h2>SCORE</h2>
+            <div id="scorecard" class="box">0</div>
+          </div>
+        </div>
+        <div id="pbottom">
+          <h2 id="welcome">Welome To Bubble Game</h2>
+          <div id="instructionText">
+
+            <h2>How to Play:</h2>
+            <ul>
+              <li>Click the "Start Game" button to begin.</li>
+              <li>Click on bubbles that match the number in the Hit Box.</li>
+              <li>For each correct click, you'll earn 10 points.</li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+    <footer>
+      Made with ❤️ by Mukul Rana
+    </footer>
+    <script src="script.js"></script>
+  </body>
+</html>
diff --git a/JS bubble Game/pop.mp3 b/JS bubble Game/pop.mp3