<!DOCTYPE html>
<html>
<head>
<style>
.container_grid {
display: grid;
width: 100px;
border: 2px solid pink;
grid-template-rows: 50px 50px ;
grid-template-columns: 50px 50px;
grid-template-areas:
"topLeft topRight"
"botLeft botRight"
}
.top {
grid-area: topLeft;
width: 100%;
background: gold;
}
.bot {
grid-area: botLeft;
width: 100%;
background: green;
}
.left {
grid-area: botRight;
width: 100%;
background: blue;
}
.right {
grid-area: topRight;
width: 100%;
background: red;
}
</style>
</head>
<body>
<p id="chat">chat: </p>
<p>Score: <span id="score_text" style="background-color:black;color:green;padding:10px;font-size:1em;font-weight:bold;font-family:lemon;"></span></p>
<img id="champ" style="display:fixed;" src="https://www.w3schools.com/images/stickman.gif">
<div id="game_area" style="display:flex;width:500px;flex-wrap:wrap;">
<div class="container_grid">
<div class="step top"></div>
<div class="step bot"></div>
<div class="step left"></div>
<div class="step right"></div>
</div>
<div class="container_grid">
<div class="step top"></div>
<div class="step bot"></div>
<div class="step left"></div>
<div class="step right"></div>
</div>
<div class="container_grid">
<div class="step top"></div>
<div class="step bot"></div>
<div class="step left"></div>
<div class="step right"></div>
</div>
<div class="container_grid">
<div class="step top"></div>
<div class="step bot"></div>
<div class="step left"></div>
<div class="step right"></div>
</div>
<div class="container_grid">
<div class="step top"></div>
<div class="step bot"></div>
<div class="step left"></div>
<div class="step right"></div>
</div>
<div class="container_grid">
<div class="step top"></div>
<div class="step bot"></div>
<div class="step left"></div>
<div class="step right"></div>
</div>
<div class="container_grid">
<div class="step top"></div>
<div class="step bot"></div>
<div class="step left"></div>
<div class="step right"></div>
</div>
<div class="container_grid">
<div class="step top"></div>
<div class="step bot"></div>
<div class="step left"></div>
<div class="step right"></div>
</div>
<div class="container_grid">
<div class="step top"></div>
<div class="step bot"></div>
<div class="step left"></div>
<div class="step right"></div>
</div>
<div class="container_grid">
<div class="step top"></div>
<div class="step bot"></div>
<div class="step left"></div>
<div class="step right"></div>
</div>
<div class="container_grid">
<div class="step top"></div>
<div class="step bot"></div>
<div class="step left"></div>
<div class="step right"></div>
</div>
<div class="container_grid">
<div class="step top"></div>
<div class="step bot"></div>
<div class="step left"></div>
<div class="step right"></div>
</div>
</div>
<p>PS Hand</p>
<p id="demo"></p>
<script>
var chat = document.querySelector('#chat');
var score = document.querySelector('#score_text');
var champ = document.querySelector('#champ');
const steps = document.querySelectorAll('.step');
const gamecontainer = document.querySelector('#game_area');
let score_index = 0;
function myFunction(event) {
drop_coins();
event.target.appendChild(champ);
if (event.target.className == 'coin') {
let parent = event.target.parentNode;
event.target.remove();
parent.appendChild(champ);
score_index += 1
chat.textContent = "Greate: You Found a Coin your Score " + score;
score.textContent = score_index;
}
}
function drop_coins() {
let first = Math.floor((Math.random() * 33) + 0);
let newimage = document.createElement('img');
newimage.className = 'coin';
newimage.src = 'https://www.clipartmax.com/png/middle/237-2370984_gold-coin-icon-png-coin-icon-game.png';
newimage.style.width = '50px';
newimage.style.height = '50px';
steps[first].appendChild(newimage);
steps[first].style.background = "white";
steps[first].appendChild(newimage);
steps[first].style.background = "white";
}
steps.forEach( (elm) => {elm.addEventListener('click', myFunction )});
</script>
</body>
</html>