I am making a ‘Rush hour’ sort of sport with html, css and js.
I wish to place my objects/blocks in particular positions in my 6×6 grid utilizing ‘const’ for my objects/blocks.
(https://i.stack.imgur.com/UA1uo.png).
I wish to create a lay-out like this.
The eventual aim for me is to have like this lay-out once you begin the sport after which with the ability to drag them throughout horizontally or vertically relying on the place of the block
HTML:
`
<!DOCTYPE html>
<html>
<head>
<meta content material="textual content/html;charset=utf-8" http-equiv="Content material-Sort">
<meta content material="utf-8" http-equiv="encoding">
<script src="code.js"></script>
<hyperlink rel="stylesheet" sort="textual content/css" href="stylesheet.css">
</head>
<physique>
<h1>Rush hour</h1>
<hr>
<h2>Turns: <span id="turns">0</span> </h2>
<div class="grid">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</physique>
</html>
CSS:
.grid{
width: 600px;
top: 600px;
background-color: gray;
show: flex;
flex-wrap: wrap;
}
.grid div{
top: 100px;
width: 100px;
}
.automobile{
background-color: blue;
}
`
JS:
`
doc.addEventListener('DOMContentLoaded',() => {
const grid = doc.querySelector('.grid')
let squares = doc.querySelectorAll('.grid')
const width = 6
//shapes
const hCar = [
0,1
]
const vCar = [
0, width
]
const hTruck = [
0,1,2
]
const vTruck = [
0, width, width*2
]
})
`
Might somebody assist me out with this?
