I am implementing the battleship game in JavaScript, and I would like the user to be able to drag their own ships within a 10 x 10 grid, consisting of 100 cells, each corresponding to a pair of coordinates. Once dragged onto the grid, I want to use all the coordinates occupied by the ship to create an object.
This is my HTML with Javascript:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../src/style.css">
<title>Document</title>
</head>
<body>
<div id="main">
<div id="deployment-board">
</div>
<div id="selection-panel">
<h1>Drag your ships</h1>
<div id="ships-dragging-container">
<div class="dragging-ship" data-length="5" draggable="true">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="dragging-ship" data-length="4" draggable="true">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="dragging-ship" data-length="3" draggable="true">
<div></div>
<div></div>
<div></div>
</div>
<div class="dragging-ship" data-length="3" draggable="true">
<div></div>
<div></div>
<div></div>
</div>
<div class="dragging-ship" data-length="2" draggable="true">
<div></div>
<div></div>
</div>
</div>
<button id="rotate">Rotate</button>
</div>
</div>
<script>
let rotateBtn=document.getElementById("rotate");
rotateBtn.addEventListener("click",function(){
let shipBlock=document.getElementById("ships-dragging-container");
let shipBlockDirection=window.getComputedStyle(shipBlock).getPropertyValue("flex-direction");
if(shipBlockDirection =="column"){
shipBlock.style.flexDirection="row";
shipBlock.querySelectorAll(".dragging-ship").forEach(ship=>{
ship.style.width="30px";
ship.style.flexWrap="wrap";
ship.style.height="fit-content";
})}else{
shipBlock.style.flexDirection="column";
shipBlock.querySelectorAll(".dragging-ship").forEach(ship=>{
ship.style.width="";
ship.style.flexWrap="";
ship.style.height="";
})
}
})
function displayInitialBoard(){
for (let i = 0; i < 10; i++) {
for (let j = 0; j < 10; j++) {
let cell = document.createElement("div");
cell.className = "cell";
cell.textContent = i + '' + j;
cell.setAttribute("data-coordinates", i + '' + j);
document.getElementById("deployment-board").appendChild(cell);
}
}
}
displayInitialBoard();
let draggingShip=document.querySelectorAll(".dragging-ship");
for(let ship of draggingShip){
ship.addEventListener("dragstart",function(){
console.log("start");
})
}
</script>
</body>
</html>
This is my CSS:
*{
box-sizing: border-box;
}
body{
/* display:flex;
justify-content: space-evenly;
align-items: center; */
height: 100vh;
padding:0;
margin:0;
}
.cell{
height:30px;
width:30px;
border:1px solid black
}
#main{
display:flex;
align-items: center;
justify-content: space-evenly;
height:100%;
}
#deployment-board{
display: flex;
flex-wrap: wrap;
width:300px;
height:300px;
align-items: center;
justify-content: center;
}
#selection-panel{
display:flex;
flex-direction: column;
height:300px;
width:300px;
gap:5px;
}
#selection-panel h1{
margin-top:0px;
}
.dragging-ship{
display:flex;
width:fit-content;
cursor:grab;
}
.dragging-ship div{
border:1px solid black;
height:28px;
width:28px;
background-color: pink;
}
#ships-dragging-container{
display:flex;
flex: 1;
flex-direction: column;
gap:10px;
}
You can run it here:
https://codepen.io/Eligio-Cristantielli/pen/eYQRqxa
Does anyone have any idea on how to implement this in vanilla Javascript?