Skip to content

Commit

Permalink
update
Browse files Browse the repository at this point in the history
  • Loading branch information
Simarjit Singh authored and Simarjit Singh committed Nov 4, 2024
1 parent d7a8f87 commit d7e23da
Show file tree
Hide file tree
Showing 3 changed files with 237 additions and 1 deletion.
Binary file added assets/images/space-ship.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.
236 changes: 236 additions & 0 deletions gameplay.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,236 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Space Warship Game Guide</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<img style="position: absolute;top: 0;left: 0;width: 300px;" src="assets/images/space-ship.png" alt="space-ship">
<img style="position: absolute;top: 0;right: 0;width: 300px;" src="assets/images/space-ship.png" alt="space-ship">
<div class="guide-container">
<header>
<h1>Space Warship Game Guide</h1>
<p>Your ultimate guide to mastering the Space Warship game!</p>
</header>

<section class="overview">
<h2>Game Overview</h2>
<p>Welcome to the thrilling world of <strong>Space Warship</strong>, where you’ll command a powerful spaceship and face waves of alien enemies in an intense battle for survival. This guide will help you understand the game mechanics and offer tips to improve your gameplay.</p>
</section>

<section class="key-features">
<h2>Key Features</h2>
<div class="feature-cards">
<div class="card">
<h3>Dynamic Difficulty Levels</h3>
<p>Choose from Easy, Medium, and Hard modes, each offering a unique challenge and keeping the gameplay exciting for players of all skill levels.</p>
</div>
<div class="card">
<h3>Power-ups</h3>
<p>Collect health, speed, and shield power-ups to enhance your spaceship and increase your survival time in the heat of battle.</p>
</div>
<div class="card">
<h3>High Score Tracking</h3>
<p>Compete against yourself to set a new high score each time you play, pushing your limits and improving with every session.</p>
</div>
<div class="card">
<h3>Unique Enemy Types</h3>
<p>Each alien type has distinct behaviors, requiring you to adapt your strategy on the fly to handle different threats effectively.</p>
</div>
</div>
</section>

<section class="controls">
<h2>Controls</h2>
<p>Understanding the controls is crucial to mastering the game. Here’s a quick rundown:</p>
<ul>
<li>⬅️➡️ <strong>Movement:</strong> Use the Left and Right Arrow keys (or swipe left/right on mobile) to move your spaceship.</li>
<li>⚡ <strong>Shoot:</strong> Tap or press the Spacebar to fire at enemies.</li>
<li>🛑 <strong>Pause:</strong> Use the Pause button to take a break and strategize.</li>
</ul>
</section>

<section class="strategies">
<h2>Strategies & Tips</h2>
<p>Want to become a pro at Space Warship? Here are some tips to get you started:</p>
<ol>
<li><strong>Focus on Red Enemies:</strong> Red alien ships are aggressive and can end the game if they reach the bottom. Prioritize them!</li>
<li><strong>Collect Power-ups:</strong> Health, speed, and shield power-ups can make a big difference. Grab them whenever you can to increase your survival chances.</li>
<li><strong>Stay Near the Center:</strong> Positioning near the center of the screen gives you better control and allows you to reach both sides quickly.</li>
<li><strong>Adjust Your Strategy by Difficulty:</strong> Higher difficulties mean faster enemies and fewer power-ups. Choose your battles wisely and be strategic!</li>
<li><strong>Use the Speed Boost Wisely:</strong> Speed boosts can make you faster, but they’re harder to control. Use them when you need to dodge quickly or reach power-ups.</li>
</ol>
</section>

<footer>
<p>Good luck, Adventurer! With practice and persistence, you'll soon become a master of the Space Warship.</p>
</footer>
</div>

<style>
/* Global Styles */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
font-family: Arial, sans-serif;
background-color: #0d1b2a;
color: #ffffff;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
padding: 20px;
}

.guide-container {
max-width: 900px;
background-color: #1c2b3a;
padding: 40px;
border-radius: 12px;
box-shadow: 0 0 15px rgba(0, 255, 255, 0.3);
transition: box-shadow 0.3s ease;
}

.guide-container:hover {
box-shadow: 0 0 25px rgba(0, 255, 255, 0.5);
}

header {
text-align: center;
margin-bottom: 30px;
}

header h1 {
color: #00eaff;
font-size: 2.5em;
margin-bottom: 10px;
letter-spacing: 1px;
}

header p {
font-size: 1.2em;
color: #aab8c2;
}

section {
margin-bottom: 30px;
}

section h2 {
font-size: 1.8em;
color: #00eaff;
margin-bottom: 15px;
border-bottom: 2px solid #00eaff;
padding-bottom: 8px;
}

section ul, section ol {
margin-left: 20px;
color: #d9e2ec;
}

section li {
margin-bottom: 10px;
line-height: 1.7;
}

section strong {
color: #00eaff;
}

footer {
text-align: center;
margin-top: 20px;
font-size: 1.1em;
color: #aab8c2;
}

/* Key Features Card Styles */
.feature-cards {
display: flex;
flex-wrap: wrap;
gap: 20px;
}

.card {
background: linear-gradient(145deg, #203044, #1b2738);
border-radius: 10px;
padding: 20px;
width: calc(50% - 10px);
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
color: #d9e2ec;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card h3 {
color: #00eaff;
margin-bottom: 10px;
font-size: 1.3em;
}

.card p {
font-size: 1em;
line-height: 1.7;
}

.card:hover {
transform: translateY(-8px);
box-shadow: 0 6px 15px rgba(0, 255, 255, 0.5);
background: linear-gradient(145deg, #23394d, #1a2636);
}

/* Controls Section Styles */
.controls ul {
padding: 15px;
background-color: #20344a;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.controls ul li {
margin: 10px 0;
padding: 10px;
background-color: #2a4158;
border-radius: 5px;
color: #e0efff;
display: flex;
align-items: center;
}

.controls ul li::before {
content: '•';
color: #00eaff;
margin-right: 10px;
}

/* Strategies Section Styles */
.strategies ol {
padding: 15px;
background-color: #20344a;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.strategies ol li {
margin: 10px 0;
padding: 10px;
background-color: #2a4158;
border-radius: 5px;
color: #e0efff;
}

.strategies ol li strong {
color: #00eaff;
}

</style>


</body>
</html>
2 changes: 1 addition & 1 deletion test.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -818,7 +818,7 @@ <h2>Are You Ready to Defend Your Base?</h2>

<div class="container">
<div class="service-tabs">
<div class="service-tab">Gameplay</div>
<button class="service-tab"><a style="color: black; text-decoration: none;" href="./gameplay.html">Gameplay</a> </button>
<button class="service-tab"><a style="color: black; text-decoration: none;" href="./Leaderboard.html">Leaderboard</a> </button>
<button class="service-tab"><a style="color: black; text-decoration: none;" href="./Tips.html">Tips & Strategies</a> </button>
</div>
Expand Down

0 comments on commit d7e23da

Please sign in to comment.