Skip to content

Commit

Permalink
Merge pull request Sulagna-Dutta-Roy#2164 from Aditijainnn/Projectile…
Browse files Browse the repository at this point in the history 
…_Motion

Added the Projectile Motion Game Sulagna-Dutta-Roy#2129
  • Loading branch information
@Sulagna-Dutta-Roy
Sulagna-Dutta-Roy authored Jul 6, 2024
2 parents 8a60fa0 + 7291ebe commit efd88ae
Show file tree
Hide file tree
Showing 6 changed files with 680 additions and 0 deletions.
192 changes: 192 additions & 0 deletions Projectile Motion Game/celebrate.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,192 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<title>Success!</title>
<style>
body {
margin: 0px;
padding: 0px;
}

.overlay {
position: absolute;
left: 5px;
right: 5px;
top: 5px;
padding: 0px;
margin: 0px;
text-align: center;
font-family: '.Aqua Kana', system-ui, sans-serif;
z-index: 100;
}

.play-again-btn {
background-color: red;
padding: 15px;
color: white;
border-radius: 15px;
text-decoration: none;
}

</style>
<script>
var maxParticleCount = 150;
var particleSpeed = 5;
var startConfetti;
var stopConfetti;
var toggleConfetti;
var removeConfetti;

(function() {
startConfetti = startConfettiInner;
stopConfetti = stopConfettiInner;
toggleConfetti = toggleConfettiInner;
removeConfetti = removeConfettiInner;
var colors = ["DodgerBlue", "OliveDrab", "Gold", "Pink", "SlateBlue", "LightBlue", "Violet", "PaleGreen", "SteelBlue", "SandyBrown", "Chocolate", "Crimson"]
var streamingConfetti = false;
var animationTimer = null;
var particles = [];
var waveAngle = 0;

function resetParticle(particle, width, height) {
particle.color = colors[(Math.random() * colors.length) | 0];
particle.x = Math.random() * width;
particle.y = Math.random() * height - height;
particle.diameter = Math.random() * 10 + 5;
particle.tilt = Math.random() * 10 - 10;
particle.tiltAngleIncrement = Math.random() * 0.07 + 0.05;
particle.tiltAngle = 0;
return particle;
}

function startConfettiInner() {
var width = window.innerWidth;
var height = window.innerHeight;
window.requestAnimFrame = (function() {
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function(callback) {
return window.setTimeout(callback, 16.6666667);
};
})();
var canvas = document.getElementById("confetti-canvas");
if (canvas === null) {
canvas = document.createElement("canvas");
canvas.setAttribute("id", "confetti-canvas");
canvas.setAttribute("style", "display:block;z-index:999999;pointer-events:none");
document.body.appendChild(canvas);
canvas.width = width;
canvas.height = height;
window.addEventListener("resize", function() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
}, true);
}
var context = canvas.getContext("2d");
while (particles.length < maxParticleCount)
particles.push(resetParticle({}, width, height));
streamingConfetti = true;
if (animationTimer === null) {
(function runAnimation() {
context.clearRect(0, 0, window.innerWidth, window.innerHeight);
if (particles.length === 0)
animationTimer = null;
else {
updateParticles();
drawParticles(context);
animationTimer = requestAnimFrame(runAnimation);
}
})();
}
}

function stopConfettiInner() {
streamingConfetti = false;
}

function removeConfettiInner() {
stopConfetti();
particles = [];
}

function toggleConfettiInner() {
if (streamingConfetti)
stopConfettiInner();
else
startConfettiInner();
}

function drawParticles(context) {
var particle;
var x;
for (var i = 0; i < particles.length; i++) {
particle = particles[i];
context.beginPath();
context.lineWidth = particle.diameter;
context.strokeStyle = particle.color;
x = particle.x + particle.tilt;
context.moveTo(x + particle.diameter / 2, particle.y);
context.lineTo(x, particle.y + particle.tilt + particle.diameter / 2);
context.stroke();
}
}

function updateParticles() {
var width = window.innerWidth;
var height = window.innerHeight;
var particle;
waveAngle += 0.01;
for (var i = 0; i < particles.length; i++) {
particle = particles[i];
if (!streamingConfetti && particle.y < -15)
particle.y = height + 100;
else {
particle.tiltAngle += particle.tiltAngleIncrement;
particle.x += Math.sin(waveAngle);
particle.y += (Math.cos(waveAngle) + particle.diameter + particleSpeed) * 0.5;
particle.tilt = Math.sin(particle.tiltAngle) * 15;
}
if (particle.x > width + 20 || particle.x < -20 || particle.y > height) {
if (streamingConfetti && particles.length <= maxParticleCount)
resetParticle(particle, width, height);
else {
particles.splice(i, 1);
i--;
}
}
}
}
})();

</script>
</head>

<body>
<div class="overlay">
<h1>Congratulations!</h1>
<h3>You completed Projectile motion game with <span id="seconds">0</span> seconds to spare! Good job!</h3>
<a href="./" class="play-again-btn">Play Again</a>
<script>
function getParameterByName(name, url = window.location.href) {
name = name.replace(/[\[\]]/g, '\\$&');
var regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)'),
results = regex.exec(url);
if (!results) return null;
if (!results[2]) return '';
return decodeURIComponent(results[2].replace(/\+/g, ' '));
}
window.onload = function() {
document.getElementById('seconds').innerHTML = Number(getParameterByName('s'));
startConfetti();
}

</script>
</div>
</body>

</html>
Binary file added Projectile Motion Game/dot.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
44 changes: 44 additions & 0 deletions Projectile Motion Game/fail.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<title>YOU FAILED!</title>
<style>
body {
margin: 0px;
padding: 0px;
}

.overlay {
position: absolute;
left: 5px;
right: 5px;
top: 5px;
padding: 0px;
margin: 0px;
text-align: center;
font-family: '.Aqua Kana', system-ui, sans-serif;
z-index: 100;
}

.play-again-btn {
background-color: red;
padding: 15px;
color: white;
border-radius: 15px;
text-decoration: none;
}

</style>
</head>

<body>
<div class="overlay">
<h1>YOU FAILED!</h1>
<h3>You ran out of time.</h3>
<a href="./" class="play-again-btn">Try Again</a>
</div>
</body>

</html>
43 changes: 43 additions & 0 deletions Projectile Motion Game/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Projectile Motion Game</title>
<style>
body {
background-color: #173843;
color: white;
text-align: center;
font-family: '.Aqua Kana', system-ui, sans-serif;
}

a.btn {
background-color: white;
color: black;
text-decoration: none;
padding: 15px;
border-radius: 15px;
}

a {
color: skyblue;
}
</style>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" />
</head>
<body>
<div style="text-align:center;
margin-top: 30px;
font-size: 30px;
padding: 5px; "><a href="https://github.com/Sulagna-Dutta-Roy/GGExtensions"><i style="color:white;" class="fas fa-home home-icon"></i></a></div>
<h1>Projectile Motion Game</h1>
<h3>Click<u><i> Start Now</i></u> Button to begin the game.</h3>
<br>
<a href="play.html" class="btn">Start Now</a>
<script>
if (!(navigator.deviceMemory >= 4) && !(window.navigator.hardwareConcurrency >= 2)) {
alert('It is not reccomended to play Projectile motion game on your device; Projectile motion game uses a lot of memory and CPU, and your device does not seem to have enough capacity at this moment. 4GB of memory and at least 2 CPU cores are required to play properly. ');
}
</script>
</body>
</html>
26 changes: 26 additions & 0 deletions Projectile Motion Game/manifest.json
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
{
"manifest_version": 3,
"name": "Projectile Motion Game",
"version": "1.0",
"description": "Send a projectile with the space key! Get 750 points to win in less than 45 seconds!",
"permissions": [
"storage"
],
"optional_permissions" : ["tabs"],
"action": {
"default_popup": "index.html"
},
"web_accessible_resources": [
{
"resources": [
"index.html",
"celebrate.html",
"fail.html",
"play.html"
],
"matches": [
"<all_urls>"
]
}
]
}
Loading

0 comments on commit efd88ae

Please sign in to comment.