BRNSystems/Battleship
1
1
Fork 0
Code Issues 3 Pull Requests Projects Releases Wiki Activity

add auxiliaries

Browse Source
This commit is contained in:
Bruno Rybársky 2022-01-16 13:56:53 +01:00
parent 93eedc7ac5
commit 78bebead10
3 changed files with 100 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
index.css
View File

@ -13,19 +13,27 @@ td{
height: 100%; height: 100%;
padding: 0.4%; padding: 0.4%;
} }
#playfield, #playfield {
#bg {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
#localdiv, #localdiv,
#remotediv { #remotediv {
width: 100%; width: 70%;
height: 100%; height: 70%;
float: center; float: center;
padding-top: 1%; padding-top: 1%;
padding-bottom: 1%; padding-bottom: 1%;
} }
#localauxdiv,
#remoteauxdiv {
width: 25%;
height: 25%;
float: center;
padding-top: 1%;
padding-bottom: 1%;
padding-left: 1%;
}
#local, #local,
#remote { #remote {
width: 100%; width: 100%;
@ -33,14 +41,17 @@ td{
table-layout: fixed; table-layout: fixed;
object-fit: contain; object-fit: contain;
} }
#localaux,
#remoteaux {
width: 100%;
height: 100%;
table-layout: fixed;
object-fit: contain;
}
#playfield { #playfield {
display: flex; display: flex;
flex-direction: column; flex-wrap: wrap;
} }
#bg { body{
background-color: #000000; background-color: black;
position: absolute;
top: 0;
left: 0;
z-index: -100;
} }

9
index.html
View File

@ -10,17 +10,22 @@
<title>Battleship</title> <title>Battleship</title>
</head> </head>
<body> <body>
<div id="bg"></div>
<div id="fg">
<div id="playfield"> <div id="playfield">
<div id="remotediv"> <div id="remotediv">
<table id="remote"> <table id="remote">
</table> </table>
</div> </div>
<div id="remoteauxdiv">
<table id="remoteaux">
</table>
</div>
<div id="localdiv"> <div id="localdiv">
<table id="local"> <table id="local">
</table> </table>
</div> </div>
<div id="localauxdiv">
<table id="localaux">
</table>
</div> </div>
</div> </div>
</body> </body>

73
index.js
View File

@ -1,10 +1,14 @@
//my personal variables //my personal variables
let w = 10; let w = 10;
let h = 10; let h = 10;
let x = "&#x2714;";
let o = "&#11044;";
let lgrid = new Array(w); let lgrid = new Array(w);
let rgrid = new Array(w); let rgrid = new Array(w);
let waux = 10;
let haux = 10;
let x = "&#x2714;";
let o = "&#11044;";
let lauxgrid = new Array(w);
let rauxgrid = new Array(w);
//Write arrays to html //Write arrays to html
function writegrid() { function writegrid() {
for (let i = 0; i < w; i++) { for (let i = 0; i < w; i++) {
@ -14,8 +18,16 @@ function writegrid() {
} }
} }
} }
function writeauxgrid(){
for (let i = 0; i < waux; i++) {
for (let j = 0; j < haux; j++) {
$('#lac' + i + '-' + j).html(lauxgrid[i][j]);
$('#rac' + i + '-' + j).html(rauxgrid[i][j]);
}
}
}
$(function () { function inittable(){
for (let i = 0; i < w; i++) { for (let i = 0; i < w; i++) {
//create columns //create columns
$('#local').append('<tr class="column" id="lt' + i + '"></tr>'); $('#local').append('<tr class="column" id="lt' + i + '"></tr>');
@ -33,11 +45,32 @@ $(function () {
} }
} }
}
function initauxtable(){
for (let i = 0; i < waux; i++) {
//create columns
$('#localaux').append('<tr class="column" id="lax' + i + '"></tr>');
$('#remoteaux').append('<tr class="column" id="rax' + i + '"></tr>');
for (let j = 0; j < haux; j++) {
//create cells
$('#lax' + i).append('<td class="cellx" id="lacx' + i + '-' + j + '"></td>');
$('#rax' + i).append('<td class="cellx" id="racx' + i + '-' + j + '"></td>');
//add divs to cells
$('#lacx' + i + '-' + j).append('<div class="cell" id="lac' + i + '-' + j + '"></div>');
$('#racx' + i + '-' + j).append('<div class="cell" id="rac' + i + '-' + j + '"></div>');
//add arrays to grids
lauxgrid[i] = new Array(haux);
rauxgrid[i] = new Array(haux);
}
}
}
function randomizetable(){
for (let i = 0; i < w; i++) { for (let i = 0; i < w; i++) {
for (let j = 0; j < h; j++) { for (let j = 0; j < h; j++) {
//randomly choose between o and x let r = Math.floor(Math.random() * 2);
let rand = Math.floor(Math.random() * 2); if (r == 0) {
if (rand == 0) {
lgrid[i][j] = x; lgrid[i][j] = x;
rgrid[i][j] = o; rgrid[i][j] = o;
} else { } else {
@ -46,6 +79,32 @@ $(function () {
} }
} }
} }
//sync grid }
function randomizeaux(){
for (let i = 0; i < waux; i++) {
for (let j = 0; j < haux; j++) {
let r = Math.floor(Math.random() * 2);
if (r == 0) {
lauxgrid[i][j] = x;
rauxgrid[i][j] = o;
} else {
lauxgrid[i][j] = o;
rauxgrid[i][j] = x;
}
}
}
}
function main() {
inittable();
initauxtable();
randomizetable();
writegrid(); writegrid();
randomizeaux();
writeauxgrid();
}
$(function () {
main();
}); });