smig/odin-codespace
1
0
Fork 0
mirror of https://gitea.smigz.com/smiggiddy/odin-codeprojects.git synced 2024-12-26 22:30:44 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: basic game is finished

Browse source
This commit is contained in:
Mike 2024-03-27 22:15:09 -04:00
parent 0d0afb9b66
commit 00a52f578f
2 changed files with 51 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
battleship/src/style.css
View file

@ -1,6 +1,6 @@
.container {
display: flex;
justify-content: space-around;
justify-content: center;
align-content: center;
gap: 100px;
}

63
battleship/src/website.js
View file

@ -4,14 +4,19 @@ export default class Website {
this.container = document.createElement('div');
this.container.classList.add('container');
this.header = document.createElement('section');
this.header = document.createElement('header');
this.header.id = 'header';
this.footer = document.createElement('footer');
this.footer.id = 'footer';
this.createHeader();
this.updateScreen();
document.body.appendChild(this.container);
document.body.append(this.header, this.container, this.footer);
}
createHeader() {
this.header.textContent = 'Battleship';
}
drawGrid(player = null) {
@ -19,28 +24,48 @@ export default class Website {
div.style.border = '1px solid black';
div.classList.add('grid');
for (let i = 0; i < 10; i++) {
for (let j = 0; j < 10; j++) {
let misses = player.gameboard.scoreboard.misses;
let hits = player.gameboard.scoreboard.hits;
for (let i = 1; i < 11; i++) {
for (let j = 1; j < 11; j++) {
const cell = document.createElement('div');
cell.classList.add('cell');
cell.dataset.cell = `[${j + 1}, ${i + 1}]`;
cell.dataset.cell = `[${j}, ${i}]`;
cell.style.border = '1px solid black';
div.appendChild(cell);
if (hits.has(JSON.stringify([j, i]))) {
cell.style.backgroundColor = 'red';
} else if (misses.has(JSON.stringify([j, i]))) {
cell.style.backgroundColor = 'black';
console.log('miss ');
}
}
}
// player.gameboard.scoreboard.misses
// .entries()
// .array.forEach((element) => {
// console.log(element);
// });
return div;
}
updateScreen() {
// Clear screen before update
this.container.innerHTML = '';
const playerOneDiv = document.createElement('div');
playerOneDiv.classList.add('player1');
playerOneDiv.appendChild(this.drawGrid(this.game.player1));
playerOneDiv.addEventListener('click', (event) =>
this.handleAttackClick(event),
);
const playerTwoDiv = document.createElement('div');
playerTwoDiv.classList.add('player2');
playerTwoDiv.addEventListener('click', (event) =>
this.handleAttackClick(event),
);
playerTwoDiv.appendChild(this.drawGrid(this.game.player2));
this.container.append(playerOneDiv, playerTwoDiv);
@ -48,11 +73,23 @@ export default class Website {
handleAttackClick(event) {
let move = JSON.parse(event.target.dataset.cell);
// let [x, _, y] = event.target.dataset.cell;
// let move = [Number(x), Number(y)];
console.log(move);
// Exit if the block has already been clicked
let available = this.game.player2.gameboard.scoreboard;
if (
available.misses.has(JSON.stringify(move)) ||
available.hits.has(JSON.stringify(move))
)
return;
this.game.handleUserMove(JSON.stringify(move));
console.log(this.game.player2.gameboard.scoreboard);
console.log(this.game.player2.gameboard.ships);
this.updateScreen();
this.CPUMove();
console.log(available, move);
}
CPUMove() {
this.game.handleCPUMove();
this.updateScreen();
}
}