-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
55 lines (52 loc) · 10.1 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<!DOCTYPE html>
<html>
<head>
<title>Space</title>
<link rel="stylesheet" href="css/stars.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id='stars'></div>
<div id='stars2'></div>
<div id='stars3'></div>
<div id="app">
<div class="menu">
<div class="lifes"></div>
<div class="score-block">SCORE: <span id="score"></span></div>
<div class="sound">
<div class="sound-on">
<svg height="36px" version="1.1" viewBox="0 0 46 36" width="46px" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><title/><desc/><defs/><g fill="none" fill-rule="evenodd" id="Music" stroke="none" stroke-width="1"><g id="Icons" transform="translate(-203.000000, -129.000000)"><g id="Volume-Increase" transform="translate(227.500000, 147.000000) scale(-1, 1) translate(-227.500000, -147.000000) translate(206.000000, 132.000000)"><path d="M37.7536831,20.1861961 C35.6097142,22.765318 31.8712381,25.4796517 27.6218149,27.7580311 C25.5793091,28.8531452 23.6053671,29.7334971 22.1001139,30.2223575 C21.2778904,30.4893907 20.5942943,30.6422345 20.0383326,30.6624748 C18.9000992,30.7039132 17.8691406,30.1884554 17.8691406,28.8457031 L17.8691406,1.04931641 C17.8691406,-0.263231745 18.8979695,-0.867633643 20.0413331,-0.820764961 C20.6198427,-0.79705074 21.314452,-0.617266967 22.1502481,-0.303596016 C23.6389587,0.255111198 25.6003266,1.25868986 27.6540132,2.50976575 C31.8323318,5.05513641 35.5825383,8.07379831 37.7368172,10.8201236 C38.2928033,10.610641 38.8884758,10.5 39.5,10.5 C42.2614237,10.5 44.5,12.7385763 44.5,15.5 C44.5,18.2614237 42.2614237,20.5 39.5,20.5 C38.8947805,20.5 38.3049689,20.3916369 37.7536831,20.1861961 Z" id="Combined-Shape" stroke="#979797" stroke-width="3"/><rect fill="#979797" height="20" id="Rectangle" rx="1.5" width="3" x="8" y="5"/><rect fill="#979797" height="30" id="Rectangle" rx="1.5" width="3" x="0" y="0"/></g></g></g></svg>
</div>
<div class="sound-off hidden">
<svg height="36px" version="1.1" viewBox="0 0 48 36" width="48px" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><title/><desc/><defs/><g fill="none" fill-rule="evenodd" id="Music" stroke="none" stroke-width="1"><g id="Icons" transform="translate(-302.000000, -129.000000)"><g id="Mute" transform="translate(328.000000, 147.000000) scale(-1, 1) translate(-328.000000, -147.000000) translate(305.000000, 132.000000)"><path d="M40.7536831,20.1861961 C38.6097142,22.765318 34.8712381,25.4796517 30.6218149,27.7580311 C28.5793091,28.8531452 26.6053671,29.7334971 25.1001139,30.2223575 C24.2778904,30.4893907 23.5942943,30.6422345 23.0383326,30.6624748 C21.9000992,30.7039132 20.8691406,30.1884554 20.8691406,28.8457031 L20.8691406,1.04931641 C20.8691406,-0.263231745 21.8979695,-0.867633643 23.0413331,-0.820764961 C23.6198427,-0.79705074 24.314452,-0.617266967 25.1502481,-0.303596016 C26.6389587,0.255111198 28.6003266,1.25868986 30.6540132,2.50976575 C34.8323318,5.05513641 38.5825383,8.07379831 40.7368172,10.8201236 C41.2928033,10.610641 41.8884758,10.5 42.5,10.5 C45.2614237,10.5 47.5,12.7385763 47.5,15.5 C47.5,18.2614237 45.2614237,20.5 42.5,20.5 C41.8947805,20.5 41.3049689,20.3916369 40.7536831,20.1861961 Z" id="Combined-Shape" stroke="#979797" stroke-width="3"/><rect fill="#979797" height="20" id="Rectangle-2" rx="1.5" transform="translate(8.021645, 14.030100) rotate(-141.000000) translate(-8.021645, -14.030100) " width="3" x="6.52164479" y="4.0301004"/><rect fill="#979797" height="20" id="Rectangle-2" rx="1.5" transform="translate(8.021645, 14.030100) scale(-1, 1) rotate(-141.000000) translate(-8.021645, -14.030100) " width="3" x="6.52164479" y="4.0301004"/></g></g></g></svg>
</div>
</div>
</div>
<audio src="sound/bg.mp3" loop id="audio"></audio>
<div class="start-game">
<h1>SELECT A PLAYER</h1>
<div class="skins">
<input type="radio" id="skin-1" name="skin" value="skin1" checked>
<label class="select-skin skin-1" for="skin-1"></label>
<input type="radio" id="skin-2" name="skin" value="skin2">
<label class="select-skin skin-2" for="skin-2"></label>
<input type="radio" id="skin-3" name="skin" value="skin3">
<label class="select-skin skin-3" for="skin-3"></label>
</div>
<button id ="btnStartGame">START</button>
</div>
<div class="end-game hidden">
<svg enable-background="new 0 0 64 64" height="64px" version="1.1" viewBox="0 0 64 64" width="64px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g id="_x35_0_China"/><g id="_x34_9_fever"/><g id="_x34_8_Thermo_Head"/><g id="_x34_7_Call_Hospital"/><g id="_x34_6_Hospital_Bed"/><g id="_x34_5_Eye"/><g id="_x34_4_Ambulance"/><g id="_x34_3_disinfectant"/><g id="_x34_2_Antibody"/><g id="_x34_1_Death"><g><g><g><g><path d="M48,18c0-8.837-7.163-16-16-16S16,9.163,16,18c0,5.051,2.345,9.547,6,12.479V34c0,3.3,2.7,6,6,6h8 c3.3,0,6-2.7,6-6v-3.521C45.655,27.547,48,23.051,48,18z" fill="#FFDCD2"/></g><g><path d="M45.539,54.308L42.4,53l3.138-1.308c2.039-0.85,3.003-3.191,2.154-5.23 c-0.85-2.04-3.192-3.001-5.231-2.154L32,48.667l-10.462-4.359c-2.038-0.852-4.382,0.113-5.231,2.154 c-0.85,2.039,0.115,4.381,2.154,5.23L21.6,53l-3.138,1.308c-2.039,0.85-3.003,3.191-2.154,5.23 c0.64,1.537,2.127,2.463,3.694,2.463c0.513,0,1.034-0.1,1.537-0.309L32,57.333l10.462,4.359 c0.503,0.21,1.024,0.309,1.537,0.309c1.566,0,3.054-0.926,3.694-2.463C48.542,57.499,47.578,55.157,45.539,54.308z" fill="#DE6C84"/></g></g><g><path d="M43.999,62.001c-0.513,0-1.034-0.099-1.537-0.309l-24-10c-2.039-0.85-3.003-3.191-2.154-5.23 c0.849-2.041,3.193-3.006,5.231-2.154l24,10c2.039,0.85,3.003,3.191,2.154,5.23C47.052,61.075,45.565,62.001,43.999,62.001z" fill="#FFDCD2"/></g></g><g><path d="M20,31.405V34c0,4.411,3.589,8,8,8h8c4.411,0,8-3.589,8-8v-2.595c3.825-3.419,6-8.251,6-13.405 c0-9.925-8.075-18-18-18S14,8.075,14,18C14,23.154,16.175,27.986,20,31.405z M32,4c7.72,0,14,6.28,14,14 c0,4.262-1.914,8.241-5.251,10.92C40.275,29.299,40,29.873,40,30.479V34c0,2.206-1.794,4-4,4h-8c-2.206,0-4-1.794-4-4v-3.521 c0-0.606-0.275-1.181-0.749-1.56C19.914,26.241,18,22.262,18,18C18,10.28,24.28,4,32,4z" fill="#505A64"/><path d="M49.548,55.715c-0.463-1.126-1.242-2.06-2.236-2.715c2.351-1.556,3.351-4.611,2.227-7.307 c-1.271-3.053-4.791-4.504-7.847-3.231L32.001,46.5l-9.691-4.038c-0.737-0.308-1.514-0.464-2.309-0.464 c-2.431,0-4.605,1.45-5.539,3.694c-0.616,1.479-0.62,3.11-0.009,4.593c0.463,1.126,1.242,2.06,2.236,2.715 c-2.351,1.556-3.351,4.611-2.227,7.307c0.935,2.244,3.109,3.694,5.54,3.694c0.792,0,1.567-0.155,2.307-0.463L32,59.5l9.691,4.038 c0.736,0.308,1.512,0.463,2.308,0.463c2.431,0,4.605-1.45,5.54-3.693C50.155,58.828,50.158,57.197,49.548,55.715z M43.229,46.154 c1.018-0.421,2.194,0.059,2.618,1.077c0.424,1.018-0.059,2.19-1.077,2.615L42.4,50.834L37.2,48.667L43.229,46.154z M20.771,59.846c-1.014,0.42-2.205-0.085-2.617-1.077c-0.424-1.018,0.059-2.19,1.077-2.615l2.369-0.987l5.201,2.167 L20.771,59.846z M45.846,58.77c-0.413,0.991-1.61,1.495-2.616,1.077l-20.863-8.692c-0.005-0.002-0.01-0.005-0.015-0.007 l-3.123-1.301c-0.493-0.206-0.876-0.591-1.08-1.085c-0.203-0.494-0.202-1.037,0.004-1.531c0.312-0.749,1.036-1.232,1.846-1.232 c0.263,0,0.521,0.052,0.769,0.155l24,10c0.493,0.206,0.876,0.591,1.08,1.085C46.053,57.732,46.052,58.275,45.846,58.77z" fill="#505A64"/><path d="M34.586,23.414C34.976,23.805,35.488,24,36,24s1.024-0.195,1.414-0.586L38,22.828l0.586,0.586 C38.976,23.805,39.488,24,40,24s1.024-0.195,1.414-0.586c0.781-0.781,0.781-2.047,0-2.828L40.828,20l0.586-0.586 c0.781-0.781,0.781-2.047,0-2.828c-0.78-0.781-2.048-0.781-2.828,0L38,17.172l-0.586-0.586c-0.78-0.781-2.048-0.781-2.828,0 c-0.781,0.781-0.781,2.047,0,2.828L35.172,20l-0.586,0.586C33.805,21.367,33.805,22.633,34.586,23.414z" fill="#505A64"/><path d="M22.586,23.414C22.976,23.805,23.488,24,24,24s1.024-0.195,1.414-0.586L26,22.828l0.586,0.586 C26.976,23.805,27.488,24,28,24s1.024-0.195,1.414-0.586c0.781-0.781,0.781-2.047,0-2.828L28.828,20l0.586-0.586 c0.781-0.781,0.781-2.047,0-2.828c-0.78-0.781-2.048-0.781-2.828,0L26,17.172l-0.586-0.586c-0.78-0.781-2.048-0.781-2.828,0 c-0.781,0.781-0.781,2.047,0,2.828L23.172,20l-0.586,0.586C21.805,21.367,21.805,22.633,22.586,23.414z" fill="#505A64"/><path d="M28.586,29.414c0.78,0.781,2.048,0.781,2.828,0L32,28.828l0.586,0.586C32.976,29.805,33.488,30,34,30 s1.024-0.195,1.414-0.586c0.781-0.781,0.781-2.047,0-2.828l-2-2c-0.78-0.781-2.048-0.781-2.828,0l-2,2 C27.805,27.367,27.805,28.633,28.586,29.414z" fill="#505A64"/></g></g></g><g id="_x34_0_Isolation_Room"/><g id="_x33_9_Soap"/><g id="_x33_8_Corona_Virus"/><g id="_x33_7_Medic"/><g id="_x33_6_Vitamin"/><g id="_x33_5_Diare"/><g id="_x33_4_Hand_sanitizer"/><g id="_x33_3_Soap"/><g id="_x33_2_Wash_Hand"/><g id="_x33_1_Wash_with_Soap"/><g id="_x33_0_Stethoscope"/><g id="_x32_9_Lockdown"/><g id="_x32_8_Bat"/><g id="_x32_7_Pills"/><g id="_x32_6_Airborne"/><g id="_x32_5_Lockdown"/><g id="_x32_4_Siocial_Distance"/><g id="_x32_3_Thermometer"/><g id="_x32_2_Hand_Soap"/><g id="_x32_1_Alcohol"/><g id="_x32_0_Vaccine"/><g id="_x31_9_Clinic"/><g id="_x31_8_Check_Up"/><g id="_x31_7_Pneumonia"/><g id="_x31_6_Masker"/><g id="_x31_5_Use_Masker"/><g id="_x31_4_No_Travel"/><g id="_x31_3_No_crowd"/><g id="_x31_2_Work_from_Home"/><g id="_x31_1_Quarantine"/><g id="_x31_0_Face_Contact"/><g id="_x30_9_Headache"/><g id="_x30_8_Puke"/><g id="_x30_7_Sore_Throath"/><g id="_x30_6_Breathe"/><g id="_x30_5_Cough"/><g id="_x30_4_Blood"/><g id="_x30_3_Microscope"/><g id="_x30_2_Pandemic"/><g id="_x30_1_Corona_Virus"/></svg>
<h1>GAME OVER</h1>
<button id ="btnRestartGame">RESTART</button>
</div>
<div id="game-elements"></div>
</div>
<script src="script.js"></script>
<script src="js/player.js"></script>
<script src="js/enemy.js"></script>
<script src="js/planet.js"></script>
<script src="js/audio.js"></script>
<script src="js/start.js"></script>
</body>
</html>