Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

FEATURE: NEED TO ADD GAMEPLAY PAGE #616 #673

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

FEATURE: NEED TO ADD GAMEPLAY PAGE #616 #673

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added assets/images/space-ship.png
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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