huszárLépés

Fogd és vidd (Drag and Drop) funkció szemléltetése. A sakktáblán lévő huszár 'L' alakban a számára kijelölt helyekre mozgatható.

Szemléltetés

Fogd és vidd

js:

 
const tabla =document.querySelector('#tabla')
const info =document.querySelector('#info')
const lo = document.querySelector('.babu')

let megfogott
let kezdoPoz

function setTabla(){
  for(let i=8;i>0;i--){	
	for(let index = 0; index < 8;index++){
		
		const negyzet = document.createElement('div')
		
		if(i % 2 ==0){
		  if(index % 2 ==0 ){
			negyzet.classList.add('vilagos')
		  }else{
			negyzet.classList.add('sotet')
		  }	
		}else{
		  if(index % 2 ==0 ){
			negyzet.classList.add('sotet')
		  }else{
			negyzet.classList.add('vilagos')
		  }	
		}
		
		negyzet.classList.add('negyzet')
		negyzet.id = String.fromCharCode(index+65) + (i)
		
		negyzet.addEventListener('dragover', felette)
	    negyzet.addEventListener('drop', elenged)

		tabla.append(negyzet)
		
		if(negyzet.id == 'B1'){
			const lo1 = document.createElement('img')
			lo1.src="kepek/feherLo.png"
			lo1.alt="feherLo"
			lo1.id="feherLo1"
			lo1.name="huszár"
			lo1.classList.add('babu')
			lo1.classList.add("huszár")
			lo1.draggable="true"
			
			lo1.addEventListener('dragstart', megfog)
			
			negyzet.append(lo1)
		}
	}
  }	
}
setTabla()
const negyzetek=document.querySelectorAll('.negyzet')

function megfog(e){
	megfogott = e.target
	info.textContent =  (megfogott.name + " ")
	kezdoPoz= e.target.parentNode.id
	kiemel()
	}

function felette(e){
	if( e.target.classList.contains("kiemelt") ){
	  e.preventDefault();
	}
}

function elenged(e){
	e.target.append(megfogott) //kép áthelyezés
	info.textContent += e.target.id
	kiemelestMegszutet()
}

function kiemel(){
	//console.log("kiemel:" + megfogott.name + " " + kezdoPoz)  // huszár B1
	negyzetek.forEach( (_mezo, index) =>{

		if(_mezo.id == String.fromCharCode(kezdoPoz.charCodeAt(0)+1) + ( parseInt(kezdoPoz.charAt(1)) + 2 )){_mezo.classList.add('kiemelt')}
		if(_mezo.id == String.fromCharCode(kezdoPoz.charCodeAt(0)+1) + ( parseInt(kezdoPoz.charAt(1)) - 2 )){_mezo.classList.add('kiemelt')}
		if(_mezo.id == String.fromCharCode(kezdoPoz.charCodeAt(0)-1) + ( parseInt(kezdoPoz.charAt(1)) + 2 )){_mezo.classList.add('kiemelt')}
		if(_mezo.id == String.fromCharCode(kezdoPoz.charCodeAt(0)-1) + ( parseInt(kezdoPoz.charAt(1)) - 2 )){_mezo.classList.add('kiemelt')}
		if(_mezo.id == String.fromCharCode(kezdoPoz.charCodeAt(0)+2) + ( parseInt(kezdoPoz.charAt(1)) + 1 )){_mezo.classList.add('kiemelt')}
		if(_mezo.id == String.fromCharCode(kezdoPoz.charCodeAt(0)+2) + ( parseInt(kezdoPoz.charAt(1)) - 1 )){_mezo.classList.add('kiemelt')}
		if(_mezo.id == String.fromCharCode(kezdoPoz.charCodeAt(0)-2) + ( parseInt(kezdoPoz.charAt(1)) + 1 )){_mezo.classList.add('kiemelt')}
		if(_mezo.id == String.fromCharCode(kezdoPoz.charCodeAt(0)-2) + ( parseInt(kezdoPoz.charAt(1)) - 1 )){_mezo.classList.add('kiemelt')}
	})
}

function kiemelestMegszutet(){
	negyzetek.forEach( (_mezo, index) =>{ _mezo.classList.remove('kiemelt') })
	
}

css:

 
body{
	display: flex;
	height: 100vh;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	
	
}

#tabla {
	display: flex;
	flex-wrap: wrap;
	border: solid 3px black;
	width: 400px;
	height: 400px;
}

.negyzet{
	width: 50px;
	height: 50px;
	background-color: rgb(220, 220, 200);
	border: solid 1px black;
	box-sizing: border-box;
	display:flex;
	justify-content: center;
	align-items: center;

	
	
}


.vilagos{
	background-color: rgb(220, 220, 200); 
}

.sotet{
	background-color: rgb(120, 120, 100);  
	
}

.kiemelt{ 
	border: solid 3px green;
}
.babu{
	width: 50px;
	height: 50px;
	
}

html:

 
<!doctype html>
<html lang="hu">
<head>
<title>fogdEsVidd</title>
<link rel="stylesheet" href="css.css">
</head>
<body>
<div id="tabla"></div>
<p id="info">Fogd és vidd </p>
<script src=js.js></script>
</body>
</html>