nikita/battle-city-js
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Form, fixing layout

Browse Source
This commit is contained in:
Nikita Iryupin 2021-06-06 15:27:47 +02:00
parent 9a822a1833
commit bf92bdf4e4
4 changed files with 41 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
public/index.html
View File

@ -17,29 +17,34 @@
<canvas id="canvas"></canvas> <canvas id="canvas"></canvas>
<div class="loading"> <div class="loading">
<div class="center"> <div class="center">
<div><div class="pixel"></div></div> <div>
<div class="pixel"></div>
</div>
<div class="text-loading">Loading...</div> <div class="text-loading">Loading...</div>
<div class='container start-level-button'>
<a href='#' class='playBut'>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In --> <form id="form-username">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" <label for="username">Username (max 10 characters):</label>
x="0px" y="0px" width="213.7px" <input name="username" id="username" type="text" placeholder="Username..." required maxlength="10">
<div class='container start-level-button'>
<button type="submit" class='playBut'>
<!-- SVG button from https://codepen.io/lukemeyrick/pen/qdxqwM/ -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="213.7px"
height="213.7px" viewBox="0 0 213.7 213.7" enable-background="new 0 0 213.7 213.7" height="213.7px" viewBox="0 0 213.7 213.7" enable-background="new 0 0 213.7 213.7"
xml:space="preserve"> xml:space="preserve">
<polygon class='triangle' id="XMLID_18_" fill="none" stroke-width="7" stroke-linecap="round" <polygon class='triangle' id="XMLID_18_" fill="none" stroke-width="7"
stroke-linejoin="round" stroke-miterlimit="10" points=" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points="
73.5,62.5 148.5,105.8 73.5,149.1 " /> 73.5,62.5 148.5,105.8 73.5,149.1 " />
<circle class='circle' id="XMLID_17_" fill="none" stroke-width="7" stroke-linecap="round" <circle class='circle' id="XMLID_17_" fill="none" stroke-width="7"
stroke-linejoin="round" stroke-miterlimit="10" cx="106.8" cy="106.8" r="103.3" /> stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" cx="106.8"
cy="106.8" r="103.3" />
</svg> </svg>
</button>
</a>
</div> </div>
</form>
</div> </div>
</div> </div>
</main> </main>

9
public/styles/main.css
View File

@ -54,14 +54,15 @@ body {
color: white; color: white;
} }
div.start-level-button { #form-username {
display: none; margin-top: 2vh;
color: white;
} }
.container { .container {
width : 100%; width : 100%;
text-align: center; text-align: center;
margin-top: 10vh; margin-top: 1vh;
} }
.circle { .circle {
@ -74,9 +75,11 @@ div.start-level-button {
} }
.playBut { .playBut {
background-color : black;
display : inline-block; display : inline-block;
transition : all 0.5s ease; transition : all 0.5s ease;
-webkit-transition: all 0.5s ease; -webkit-transition: all 0.5s ease;
border: 0;
} }
.playBut .triangle { .playBut .triangle {

15
src/GameLogic/gameField.js
View File

@ -37,6 +37,7 @@ export class GameField {
this.collisionManager.setMainTank(this.tank); this.collisionManager.setMainTank(this.tank);
this.lastRequest = null; this.lastRequest = null;
this.name = null;
} }
//add all tiles here! //add all tiles here!
@ -101,17 +102,20 @@ export class GameField {
$(".loading").show(); $(".loading").show();
$(".text-loading").show(); $(".text-loading").show();
$(".start-level-button").hide(); $("#form-username").hide();
await this.prepareGame(level); await this.prepareGame(level);
if (this.map == null) { if (this.map == null) {
this.prepareGame(1); this.prepareGame(1);
} }
$(".text-loading").hide(); $(".text-loading").hide();
$(".start-level-button").show(); $("#form-username").show();
if (firstTime) { if (firstTime) {
$(".start-level-button").on("click", () => { $("#form-username").on("submit", (e) => {
e.preventDefault();
console.log($(".loading"));
$(".loading").hide(); $(".loading").hide();
this.name = $("#username").val();
this.soundManager.playSound(SoundEnum.GameStart); this.soundManager.playSound(SoundEnum.GameStart);
requestAnimationFrame(() => this.gameLoop()); requestAnimationFrame(() => this.gameLoop());
}) })
@ -200,10 +204,11 @@ export class GameField {
this.ctx.fillStyle = "black"; this.ctx.fillStyle = "black";
this.ctx.fillRect(this.width - 90, 0, 90, 100); this.ctx.fillRect(this.width - 90, 0, 90, 100);
this.ctx.font = "20px VT323, sans-serif"; this.ctx.font = "12px VT323, sans-serif";
this.ctx.fillStyle = "white"; this.ctx.fillStyle = "white";
this.ctx.fillText("Level: " + this.map.mapLevel, this.width - 90, 20); this.ctx.fillText("Level: " + this.map.mapLevel, this.width - 90, 20);
this.ctx.fillText("Tanks: " + this.aiTanks._count, this.width - 90, 50); this.ctx.fillText("Tanks: " + this.aiTanks._count, this.width - 90, 40);
this.ctx.fillText("User: " + this.name, this.width - 90, 60);
} }
} }

2
src/game.js
View File

@ -50,6 +50,8 @@ export class Game {
addEventListener("keyup", (ev) => { addEventListener("keyup", (ev) => {
if (prevEv && prevEv.key == ev.key) prevEv = undefined; if (prevEv && prevEv.key == ev.key) prevEv = undefined;
}); });
requestAnimationFrame(() => this.gameField.play(1, true)); requestAnimationFrame(() => this.gameField.play(1, true));
} }
} }