109 lines
4.2 KiB
HTML
109 lines
4.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="fr">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<link rel="shortcut icon" href="assets/img/meteor_logo.png" type="image/png">
|
|
<link rel="stylesheet" href="style/style.css">
|
|
<title>Deep Impact</title>
|
|
</head>
|
|
<body>
|
|
<canvas class="background" id="mainCanvas"></canvas>
|
|
|
|
<div class="page" id="loading" style="display: none;">
|
|
<h1>LOADING</h1>
|
|
</div>
|
|
|
|
<div class="main-container">
|
|
<div class="page main-menu" id="main-menu">
|
|
|
|
<img id="title" src="assets/img/meteor_title.png" alt="Deep Impact">
|
|
|
|
<div class="title-back-container">
|
|
<span class="title-back" id="title-back"></span>
|
|
</div>
|
|
|
|
<div class="level-select" id="menuContainer">
|
|
<template id="menuItem">
|
|
<button class="level-item">
|
|
<img>
|
|
<p></p>
|
|
</button>
|
|
</template>
|
|
<template id="menuItemCustom">
|
|
<button class="level-item" onclick="customLevel()">
|
|
<img src="assets/img/custom.png" alt="Custom Level">
|
|
<p>Custom Level</p>
|
|
</button>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="page custom-level" id="custom-level" style="display: none;">
|
|
<h2>Custom Level</h2>
|
|
<h3></h3>
|
|
<input type="file" name="Music" id="custom-music">
|
|
<select name="Theme" id="custom-theme">
|
|
<option value="meteor">Meteor</option>
|
|
</select>
|
|
<button id="custom-level-launch">Launch</button>
|
|
<button id="custom-level-back">Back to Main</button>
|
|
</div>
|
|
|
|
<div class="page game-over" id="game-over" style="display: none;">
|
|
<h2></h2>
|
|
<h3></h3>
|
|
<button id="game-over-back">damn</button>
|
|
</div>
|
|
|
|
<div class="page main-game" id="main-game" style="display: none;">
|
|
<div class="main-game">
|
|
<canvas class="main-game-canvas" id="gameCanvas"></canvas>
|
|
<div class="main-game-title" id="main-game-title">
|
|
<h1></h1>
|
|
<h2></h2>
|
|
</div>
|
|
<div class="main-game-skyline-container">
|
|
<div class="main-game-skyline"></div>
|
|
<img class="main-game-skyline-turret" src="assets/img/skyline_turret2.png">
|
|
<div class="main-game-skyline"></div>
|
|
</div>
|
|
<div class="main-game-dashboard">
|
|
<div class="main-game-dashboard-inner">
|
|
<h2 id="health">HP: -1</h2>
|
|
|
|
<div class="main-game-dashboard-bullet" id="ammo-laser">
|
|
<h4>A</h4>
|
|
<img src="assets/img/turrets/bullet_laser.png" alt="Laser">
|
|
<h3>100</h3>
|
|
</div>
|
|
|
|
<div class="main-game-dashboard-bullet" id="ammo-fast">
|
|
<h4>Z</h4>
|
|
<img src="assets/img/turrets/bullet_fast.png" alt="Fast">
|
|
<h3>100</h3>
|
|
</div>
|
|
|
|
<div class="main-game-dashboard-bullet" id="ammo-standard">
|
|
<h4>E</h4>
|
|
<img src="assets/img/turrets/bullet_standard.png" alt="Standard">
|
|
<h3>100</h3>
|
|
</div>
|
|
|
|
<div class="main-game-dashboard-bullet" id="ammo-heavy">
|
|
<h4>R</h4>
|
|
<img src="assets/img/turrets/bullet_heavy.png" alt="Heavy">
|
|
<h3>100</h3>
|
|
</div>
|
|
|
|
<input type="range" id="volume" name="volume" value="5" min="0" max="10">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script type="module" src="scripts/index.js"></script>
|
|
</body>
|
|
</html> |