I have coded this "sort of chess game" where the goal is to place 8 queens without them being able to hit each other, so far I have made the whole program and it is working wonderful! I just have one problem, you are able to place a queen on top of another queen. If you do this the game automatically stops. If anyone have any idea on how I can fix this problem, it would mean a lot!!!! (There are also some norwegian variable names in the code, if you need any translation or things like that I will gladly help with that)
Thanks in advance!!!
let knappEl = document.querySelector("button")
knappEl.addEventListener("click", restart)
let tableEl = document.querySelector("table")
let liste = []
let turTeller = 0
let slatt = false
let meldingEl = document.querySelector("#melding")
for (let i = 1; i < 9; i ) {
let trEl = document.createElement('tr');
for (let j = 1; j < 9; j ) {
let tdEl = document.createElement('td');
tdEl.setAttribute("id", "rute" i j)
tdEl.addEventListener("click", plasserTårn)
trEl.appendChild(tdEl);
// Bare på grunn av css
tdEl.className = (i % 2 === j % 2) ? "hvit firkant" : "svart firkant";
}
tableEl.appendChild(trEl);
}
function plasserTårn(e) {
if (slatt == false) {
let trykketFirkant = e.target
let plassertBrikke = {
rad: trykketFirkant.id.substring(5, 4),
kolonne: trykketFirkant.id.substring(6, 5)
}
console.log(liste)
console.log(plassertBrikke)
if (turTeller == 0) {
if (firkantTrykket = e.target) {
firkantTrykket.innerHTML = "<img src='https://www.kindpng.com/picc/m/97-971641_2d-chess-queen-hd-png-download.png' width='50px' height='50px'>";
}
turTeller = 1
} else if (turTeller == 1) {
if (firkantTrykket = e.target) {
firkantTrykket.innerHTML = "<img src='https://www.nicepng.com/png/full/219-2191738_chess-piece-silhouette-black-queen-chess.png' width='50px' height='50px'>";
}
turTeller = 0
}
for (let i = 0; i < liste.length; i ) {
let r = Math.abs(liste[i].rad - plassertBrikke.rad)
let k = Math.abs(liste[i].kolonne - plassertBrikke.kolonne)
if (liste[i].rad == plassertBrikke.rad || liste[i].kolonne == plassertBrikke.kolonne || r == k) {
meldingEl.innerHTML = "En dronning har blir slått"
window.scrollTo(0, document.body.scrollHeight);
slatt = true
} else if (liste.length == 7) {
meldingEl.innerHTML = "Du har vunnet!"
window.scrollTo(0, document.body.scrollHeight);
slatt = true
}
}
liste.push(plassertBrikke)
} else {
meldingEl.innerHTML = "Spillet er over!"
}
}
function restart() {
location.reload()
window.scrollTo(500, 0);
}body {
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
height: 100%;
text-align: center;
font-size: 18px;
background-color: blueviolet;
color: white
}
h1,
h2,
h3 {
font-family: 'Roboto', sans-serif;
font-weight: 100;
text-transform: uppercase;
margin: 5px 0;
}
h1 {
font-size: 2.6em;
}
h2 {
font-size: 1.6em;
}
h3 {
font-size: 2.6rem;
color: white;
text-align: center;
text-shadow: 5px 2px purple;
}
p {
font-size: 1.6em;
color: white;
text-align: center;
text-shadow: 5px 2px purple;
}
.board {
table-layout: fixed;
margin-left: auto;
margin-right: auto;
width: 440px;
height: 440px;
border: 32px solid;
border-color: darkslategray;
border-radius: 5px;
}
.firkant {
resize: none;
height: 55px;
width: 55px;
text-align: center;
border: -1px black solid;
}
.hvit {
background: white;
}
.svart {
background: grey;
}
td:hover {
background: lightgreen;
cursor: pointer
}
button {
color: rgb(150, 12, 177);
border: solid 1px white;
text-decoration: none;
cursor: pointer;
font-size: 1.2em;
padding: 18px 10px;
width: 180px;
margin: 10px;
outline: none;
}<h3>Dronningspillet</h3>
<table ></table>
<p id="melding"></p>
<button>Prøv igjen!</button>CodePudding user response：
At the start of your function check if target is an image. If so, we don't continue the rest of the code by returning.
let knappEl = document.querySelector("button")
knappEl.addEventListener("click", restart)
let tableEl = document.querySelector("table")
let liste = []
let turTeller = 0
let slatt = false
let meldingEl = document.querySelector("#melding")
for (let i = 1; i < 9; i ) {
let trEl = document.createElement('tr');
for (let j = 1; j < 9; j ) {
let tdEl = document.createElement('td');
tdEl.setAttribute("id", "rute" i j)
tdEl.addEventListener("click", plasserTårn)
trEl.appendChild(tdEl);
// Bare på grunn av css
tdEl.className = (i % 2 === j % 2) ? "hvit firkant" : "svart firkant";
}
tableEl.appendChild(trEl);
}
function plasserTårn(e) {
// Check if target is image, if so do nothing
if (e.target instanceof HTMLImageElement) {
return
}
if (slatt == false) {
let trykketFirkant = e.target
let plassertBrikke = {
rad: trykketFirkant.id.substring(5, 4),
kolonne: trykketFirkant.id.substring(6, 5)
}
if (turTeller == 0) {
if (firkantTrykket = e.target) {
firkantTrykket.innerHTML = "<img src='https://www.kindpng.com/picc/m/97-971641_2d-chess-queen-hd-png-download.png' width='50px' height='50px'>";
}
turTeller = 1
} else if (turTeller == 1) {
if (firkantTrykket = e.target) {
firkantTrykket.innerHTML = "<img src='https://www.nicepng.com/png/full/219-2191738_chess-piece-silhouette-black-queen-chess.png' width='50px' height='50px'>";
}
turTeller = 0
}
for (let i = 0; i < liste.length; i ) {
let r = Math.abs(liste[i].rad - plassertBrikke.rad)
let k = Math.abs(liste[i].kolonne - plassertBrikke.kolonne)
if (liste[i].rad == plassertBrikke.rad || liste[i].kolonne == plassertBrikke.kolonne || r == k) {
meldingEl.innerHTML = "En dronning har blir slått"
window.scrollTo(0, document.body.scrollHeight);
slatt = true
} else if (liste.length == 7) {
meldingEl.innerHTML = "Du har vunnet!"
window.scrollTo(0, document.body.scrollHeight);
slatt = true
}
}
liste.push(plassertBrikke)
} else {
meldingEl.innerHTML = "Spillet er over!"
}
}
function restart() {
location.reload()
window.scrollTo(500, 0);
}body {
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
height: 100%;
text-align: center;
font-size: 18px;
background-color: blueviolet;
color: black
}
h1,
h2,
h3 {
font-family: 'Roboto', sans-serif;
font-weight: 100;
text-transform: uppercase;
margin: 5px 0;
}
h1 {
font-size: 2.6em;
}
h2 {
font-size: 1.6em;
}
h3 {
font-size: 2.6rem;
color: white;
text-align: center;
text-shadow: 5px 2px purple;
}
p {
font-size: 1.6em;
color: white;
text-align: center;
text-shadow: 5px 2px purple;
}
.board {
table-layout: fixed;
margin-left: auto;
margin-right: auto;
width: 440px;
height: 440px;
border: 32px solid;
border-color: darkslategray;
border-radius: 5px;
}
.firkant {
resize: none;
height: 55px;
width: 55px;
text-align: center;
border: -1px black solid;
}
.hvit {
background: white;
}
.svart {
background: grey;
}
td:hover {
background: lightgreen;
cursor: pointer
}
button {
color: rgb(150, 12, 177);
border: solid 1px white;
text-decoration: none;
cursor: pointer;
font-size: 1.2em;
padding: 18px 10px;
width: 180px;
margin: 10px;
outline: none;
}<h3>Dronningspillet</h3>
<table ></table>
<p id="melding"></p>
<button>Prøv igjen!</button>CodePudding user response：
You got a lot of typos in there... You created a variable in the if statement (firkantTrykket= e.target), which you shouldn't, and you didn't check whether the target is an img tag or not.
This code should work just fine:
let knappEl = document.querySelector("button")
knappEl.addEventListener("click", restart)
let tableEl = document.querySelector("table")
let liste = []
let turTeller = 0
let slatt = false
let meldingEl = document.querySelector("#melding")
for (let i = 1; i < 9; i ) {
let trEl = document.createElement('tr');
for (let j = 1; j < 9; j ) {
let tdEl = document.createElement('td');
tdEl.setAttribute("id", "rute" i j)
tdEl.addEventListener("click", plasserTårn)
trEl.appendChild(tdEl);
// Bare på grunn av css
tdEl.className = (i % 2 === j % 2) ? "hvit firkant" : "svart firkant";
}
tableEl.appendChild(trEl);
}
function plasserTårn(e) {
if (slatt == false) {
let trykketFirkant = e.target
let plassertBrikke = { rad: trykketFirkant.id.substring(5, 4), kolonne: trykketFirkant.id.substring(6, 5) }
console.log(liste)
console.log(trykketFirkant.tagName)
if (trykketFirkant.tagName == 'IMG') return; // stops the function if the target is the img tag
if (turTeller == 0) {
trykketFirkant.innerHTML = "<img src='https://www.kindpng.com/picc/m/97-971641_2d-chess-queen-hd-png-download.png' width='50px' height='50px'>";
turTeller = 1
}
else if (turTeller == 1) {
trykketFirkant.innerHTML = "<img src='https://www.nicepng.com/png/full/219-2191738_chess-piece-silhouette-black-queen-chess.png' width='50px' height='50px'>";
turTeller = 0
}
for (let i = 0; i < liste.length; i ) {
let r = Math.abs(liste[i].rad - plassertBrikke.rad)
let k = Math.abs(liste[i].kolonne - plassertBrikke.kolonne)
if (liste[i].rad == plassertBrikke.rad || liste[i].kolonne == plassertBrikke.kolonne || r == k) {
meldingEl.innerHTML = "En dronning har blir slått"
window.scrollTo(0, document.body.scrollHeight);
slatt = true
}
else if (liste.length == 7) {
meldingEl.innerHTML = "Du har vunnet!"
window.scrollTo(0, document.body.scrollHeight);
slatt = true
}
}
liste.push(plassertBrikke)
}
else {
meldingEl.innerHTML = "Spillet er over!"
}
}
function restart() {
location.reload()
window.scrollTo(500, 0);
}