add auxiliaries
This commit is contained in:
parent
93eedc7ac5
commit
78bebead10
33
index.css
33
index.css
@ -13,19 +13,27 @@ td{
|
||||
height: 100%;
|
||||
padding: 0.4%;
|
||||
}
|
||||
#playfield,
|
||||
#bg {
|
||||
#playfield {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
#localdiv,
|
||||
#remotediv {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
width: 70%;
|
||||
height: 70%;
|
||||
float: center;
|
||||
padding-top: 1%;
|
||||
padding-bottom: 1%;
|
||||
}
|
||||
#localauxdiv,
|
||||
#remoteauxdiv {
|
||||
width: 25%;
|
||||
height: 25%;
|
||||
float: center;
|
||||
padding-top: 1%;
|
||||
padding-bottom: 1%;
|
||||
padding-left: 1%;
|
||||
}
|
||||
#local,
|
||||
#remote {
|
||||
width: 100%;
|
||||
@ -33,14 +41,17 @@ td{
|
||||
table-layout: fixed;
|
||||
object-fit: contain;
|
||||
}
|
||||
#localaux,
|
||||
#remoteaux {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
table-layout: fixed;
|
||||
object-fit: contain;
|
||||
}
|
||||
#playfield {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
#bg {
|
||||
background-color: #000000;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: -100;
|
||||
body{
|
||||
background-color: black;
|
||||
}
|
19
index.html
19
index.html
@ -10,17 +10,22 @@
|
||||
<title>Battleship</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="bg"></div>
|
||||
<div id="fg">
|
||||
<div id="playfield">
|
||||
<div id="remotediv">
|
||||
<div id="playfield">
|
||||
<div id="remotediv">
|
||||
<table id="remote">
|
||||
</table>
|
||||
</div>
|
||||
<div id="localdiv">
|
||||
</div>
|
||||
<div id="remoteauxdiv">
|
||||
<table id="remoteaux">
|
||||
</table>
|
||||
</div>
|
||||
<div id="localdiv">
|
||||
<table id="local">
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div id="localauxdiv">
|
||||
<table id="localaux">
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
73
index.js
73
index.js
@ -1,10 +1,14 @@
|
||||
//my personal variables
|
||||
let w = 10;
|
||||
let h = 10;
|
||||
let x = "✔";
|
||||
let o = "⬤";
|
||||
let lgrid = new Array(w);
|
||||
let rgrid = new Array(w);
|
||||
let waux = 10;
|
||||
let haux = 10;
|
||||
let x = "✔";
|
||||
let o = "⬤";
|
||||
let lauxgrid = new Array(w);
|
||||
let rauxgrid = new Array(w);
|
||||
//Write arrays to html
|
||||
function writegrid() {
|
||||
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++) {
|
||||
//create columns
|
||||
$('#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 j = 0; j < h; j++) {
|
||||
//randomly choose between o and x
|
||||
let rand = Math.floor(Math.random() * 2);
|
||||
if (rand == 0) {
|
||||
let r = Math.floor(Math.random() * 2);
|
||||
if (r == 0) {
|
||||
lgrid[i][j] = x;
|
||||
rgrid[i][j] = o;
|
||||
} 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();
|
||||
randomizeaux();
|
||||
writeauxgrid();
|
||||
}
|
||||
|
||||
$(function () {
|
||||
main();
|
||||
});
|
Loading…
Reference in New Issue
Block a user