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

41
public/index.html
View File

@ -17,29 +17,34 @@
<canvas id="canvas"></canvas>
<div class="loading">
<div class="center">
<div><div class="pixel"></div></div>
<div>
<div class="pixel"></div>
</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 -->
<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"
xml:space="preserve">
<form id="form-username">
<label for="username">Username (max 10 characters):</label>
<input name="username" id="username" type="text" placeholder="Username..." required maxlength="10">
<div class='container start-level-button'>
<button type="submit" class='playBut'>
<polygon class='triangle' id="XMLID_18_" fill="none" stroke-width="7" stroke-linecap="round"
stroke-linejoin="round" stroke-miterlimit="10" points="
<!-- 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"
xml:space="preserve">
<polygon class='triangle' id="XMLID_18_" fill="none" stroke-width="7"
stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points="
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"
stroke-linejoin="round" stroke-miterlimit="10" cx="106.8" cy="106.8" r="103.3" />
</svg>
</a>
</div>
<circle class='circle' id="XMLID_17_" fill="none" stroke-width="7"
stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" cx="106.8"
cy="106.8" r="103.3" />
</svg>
</button>
</div>
</form>
</div>
</div>
</main>

9
public/styles/main.css
View File

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

15
src/GameLogic/gameField.js
View File

@ -37,6 +37,7 @@ export class GameField {
this.collisionManager.setMainTank(this.tank);
this.lastRequest = null;
this.name = null;
}
//add all tiles here!
@ -101,17 +102,20 @@ export class GameField {
$(".loading").show();
$(".text-loading").show();
$(".start-level-button").hide();
$("#form-username").hide();
await this.prepareGame(level);
if (this.map == null) {
this.prepareGame(1);
}
$(".text-loading").hide();
$(".start-level-button").show();
$("#form-username").show();
if (firstTime) {
$(".start-level-button").on("click", () => {
$("#form-username").on("submit", (e) => {
e.preventDefault();
console.log($(".loading"));
$(".loading").hide();
this.name = $("#username").val();
this.soundManager.playSound(SoundEnum.GameStart);
requestAnimationFrame(() => this.gameLoop());
})
@ -200,10 +204,11 @@ export class GameField {
this.ctx.fillStyle = "black";
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.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) => {
if (prevEv && prevEv.key == ev.key) prevEv = undefined;
});
requestAnimationFrame(() => this.gameField.play(1, true));
}
}