<!DOCTYPE html>
<html>
<head>
<title>8-Bit Alien Fighter</title>
<style>
body {
margin: 0;
padding: 0;
background: #000;
overflow: hidden;
font-family: 'Press Start 2P', cursive;
color: #fff;
}
canvas {
display: block;
margin: 0 auto;
background: #000;
}
#gameContainer {
position: relative;
width: 800px;
height: 600px;
margin: 0 auto;
}
#loadingScreen {
position: absolute;
width: 100%;
height: 100%;
background: #000;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
z-index: 10;
}
#menuScreen {
position: absolute;
width: 100%;
height: 100%;
background: #000;
display: none;
flex-direction: column;
justify-content: center;
align-items: center;
z-index: 5;
}
.menuButton {
margin: 10px;
padding: 15px 30px;
background: #4CAF50;
color: white;
border: none;
border-radius: 5px;
font-family: 'Press Start 2P', cursive;
cursor: pointer;
transition: all 0.3s;
}
.menuButton:hover {
background: #45a049;
transform: scale(1.1);
}
.progressBar {
width: 300px;
height: 20px;
background: #333;
margin-top: 20px;
border-radius: 10px;
overflow: hidden;
}
.progressFill {
height: 100%;
background: #4CAF50;
width: 0%;
transition: width 0.3s;
}
</style>
</head>
<body>
<div id="gameContainer">
<canvas id="gameCanvas" width="800" height="600"></canvas>
<div id="loadingScreen">
<h1>8-BIT ALIEN FIGHTER</h1>
<p>Loading game assets...</p>
<div class="progressBar">
<div class="progressFill" id="progressBar"></div>
</div>
</div>
<div id="menuScreen">
<h1>8-BIT ALIEN FIGHTER</h1>
<button class="menuButton" id="startGame">START GAME</button>
<button class="menuButton" id="customizePlayer">CUSTOMIZE PLAYER</button>
<button class="menuButton" id="aiMode">AI MODE</button>
<button class="menuButton" id="settings">SETTINGS</button>
</div>
</div>
<script>
// Game variables
const canvas = document
<!DOCTYPE html>
<html>
<head>
<title>8-Bit Alien Fighter</title>
<style>
body {
margin: 0;
padding: 0;
background: #000;
overflow: hidden;
font-family: 'Press Start 2P', cursive;
color: #fff;
}
canvas {
display: block;
margin: 0 auto;
background: #000;
}
#gameContainer {
position: relative;
width: 800px;
height: 600px;
margin: 0 auto;
}
#loadingScreen {
position: absolute;
width: 100%;
height: 100%;
background: #000;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
z-index: 10;
}
#menuScreen {
position: absolute;
width: 100%;
height: 100%;
background: #000;
display: none;
flex-direction: column;
justify-content: center;
align-items: center;
z-index: 5;
}
.menuButton {
margin: 10px;
padding: 15px 30px;
background: #4CAF50;
color: white;
border: none;
border-radius: 5px;
font-family: 'Press Start 2P', cursive;
cursor: pointer;
transition: all 0.3s;
}
.menuButton:hover {
background: #45a049;
transform: scale(1.1);
}
.progressBar {
width: 300px;
height: 20px;
background: #333;
margin-top: 20px;
border-radius: 10px;
overflow: hidden;
}
.progressFill {
height: 100%;
background: #4CAF50;
width: 0%;
transition: width 0.3s;
}
</style>
</head>
<body>
<div id="gameContainer">
<canvas id="gameCanvas" width="800" height="600"></canvas>
<div id="loadingScreen">
<h1>8-BIT ALIEN FIGHTER</h1>
<p>Loading game assets...</p>
<div class="progressBar">
<div class="progressFill" id="progressBar"></div>
</div>
</div>
<div id="menuScreen">
<h1>8-BIT ALIEN FIGHTER</h1>
<button class="menuButton" id="startGame">START GAME</button>
<button class="menuButton" id="customizePlayer">CUSTOMIZE PLAYER</button>
<button class="menuButton" id="aiMode">AI MODE</button>
<button class="menuButton" id="settings">SETTINGS</button>
</div>
</div>
<script>
// Game variables
const canvas = document