marklogo/BattleShip
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
Marklogo 2024-03-25 02:24:24 +01:00
commit 51e4fd5be2
8 changed files with 211 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
.vscode/settings.json vendored Normal file
View File

@ -0,0 +1,3 @@
{
"liveServer.settings.port": 5501
}

40
Barco.js Normal file
View File

@ -0,0 +1,40 @@
export const BarcoTipo = Object.freeze({
FRAGATA: 1,
DESTRUCTOR: 2,
ACORAZADO: 3,
PORTAAVIONES: 4,
});
class Barco {
constructor(x, y, longitud, orientacion) {
this.x = x;
this.y = y;
this.longitud = longitud;
this.orientacion = orientacion;
this.dragging = false;
this.offsetX = 0;
this.offsetY = 0;
}
iniciarArrastre(event) {
this.dragging = true;
this.offsetX = event.offsetX;
this.offsetY = event.offsetY;
}
moverBarco(event, canvas) {
if (this.dragging) {
const rect = canvas.getBoundingClientRect();
this.x = event.clientX - rect.left - this.offsetX;
this.y = event.clientY - rect.top - this.offsetY;
}
}
finalizarArrastre() {
this.dragging = false;
}
draw(ctx) {
ctx.fillStyle = "red";
ctx.fillRect(this.x * 32, this.y * 32, 32, 32 * this.longitud);
}
}
export default Barco;

34
Mapa.js Normal file
View File

@ -0,0 +1,34 @@
class Mapa {
celdas = [];
constructor() {
this.casillaSize = 32;
this.numFilas = 10;
this.numColumnas = 10;
for (let x = 0; x < this.numFilas * this.numColumnas; x++) {
this.celdas[x] = 0;
}
}
getPos(event) {
console.log(event.x, event.y);
}
draw(ctx) {
ctx.beginPath();
for (let i = 0; i <= this.numFilas; i++) {
const y = i * this.casillaSize;
ctx.moveTo(0, y);
ctx.lineTo(this.casillaSize * this.numColumnas, y);
}
for (let i = 0; i <= this.numColumnas; i++) {
const x = i * this.casillaSize;
ctx.moveTo(x, 0);
ctx.lineTo(x, this.casillaSize*this.numFilas);
}
ctx.strokeStyle = "#15ff00"; // Color de las líneas
ctx.stroke();
}
}
export default Mapa;

34
PartidaBattle.js Normal file
View File

@ -0,0 +1,34 @@
import Barco,{BarcoTipo} from "./Barco.js";
import Mapa from "./Mapa.js";
class PartidaBattle {
barcos = [];
casillaSize = 32;
numFilas = 10;
numColumnas = 10;
constructor() {
this.mapaAtaque=new Mapa();
this.mapaFlota=new Mapa();
this.barcos.push(
new Barco(0,0,BarcoTipo.PORTAAVIONES,'VERTICAL'),
new Barco(1,0,BarcoTipo.ACORAZADO,'VERTICAL'),
new Barco(2,0,BarcoTipo.ACORAZADO,'VERTICAL'),
new Barco(3,0,BarcoTipo.ACORAZADO,'VERTICAL'),
new Barco(4,0,BarcoTipo.DESTRUCTOR,'VERTICAL'),
new Barco(5,0,BarcoTipo.DESTRUCTOR,'VERTICAL'),
new Barco(6,0,BarcoTipo.DESTRUCTOR,'VERTICAL'),
new Barco(7,0,BarcoTipo.FRAGATA,'VERTICAL'),
new Barco(8,0,BarcoTipo.FRAGATA,'VERTICAL'));
}
draw(ctxMapa, ctxMiniMapa){
this.mapaAtaque.draw(ctxMapa);
this.mapaFlota.draw(ctxMiniMapa);
this.barcos.forEach((barco)=>{
barco.draw(ctxMapa);
})
}
}
export default PartidaBattle;

0
README.md Normal file
View File

19
game.js Normal file
View File

@ -0,0 +1,19 @@
import PartidaBattle from "./PartidaBattle.js";
const canvasMapa = document.getElementById("mapa");
const ctxMapa = canvasMapa.getContext("2d");
canvasMapa.width = 640;
canvasMapa.height = 640;
const scale = 2;
ctxMapa.scale(scale, scale);
const canvasMiniMapa = document.getElementById("minimapa");
const ctxMiniMapa = canvasMiniMapa.getContext("2d");
canvasMiniMapa.width = 320;
canvasMiniMapa.height = 320;
const partida=new PartidaBattle();
partida.draw(ctxMapa,ctxMiniMapa);

27
index.html Normal file
View File

@ -0,0 +1,27 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@2.44.0/tabler-icons.min.css">
<link rel="stylesheet" href="style.css">
<title>BattleShip</title>
</head>
<body>
<div id="container">
<div id="sub-container">
<canvas id="mapa"></canvas>
</div>
<div id="sub-container">
<canvas id="minimapa"></canvas>
<textarea id="chat" readonly></textarea>
<input type="text" name="" id="">
</div>
</div>
</body>
<script type="module" src="./game.js"></script>
</html>

54
style.css Normal file
View File

@ -0,0 +1,54 @@
* {
box-sizing: border-box;
min-width: 0;
}
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
body {
padding: 1rem;
background: linear-gradient(to bottom right, #0f2027, #203a43, #2c5364);
color: white;
font-family: "Press Start 2P", cursive;
text-align: center;
}
#container {
height: 100%;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
#sub-container {
height: 648px;
display: flex;
flex-direction: column;
border: 4px solid white;
}
#mapa {
width: 640px;
height: 640px;
background-color: #2c5364;
}
#minimapa {
width: 320px;
height: 320px;
flex-shrink: 0;
background-color: #2c5364;
}
#chat {
resize: none;
width: 320px;
height: 100%;
background-color: transparent;
}