Wanting to create a fun game on my website using JavaScript, where hotdogs are added to a bowl in random positions forming a pyramid-shaped pile that eventually covers the entire page.
However, I'm facing some challenges with the implementation. The goal is to initially place 10 hotdogs in the bowl, then spill 50 more onto the 'game board,' and finally scatter them randomly across the webpage. At this stage, I'm particularly interested in figuring out how to incorporate image elements with randomized orientations using just HTML, CSS, and JavaScript. See the code snippet below:
HTML:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Game</title>
<link href="https://fonts.googleapis.com/css?family=Bungee|IBM+Plex+Sans:100,200,300i,500|Lato:300,300i,400,700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="./resources/game.css">
</head>
<body>
<!-- Title Section-->
<h1>FEED THE PUP</h1>
<p>Tap to give the dog some food, go for a high score or something!</p>
<!-- Game Section-->
<div id = 'gameSpace'>
<img id = 'dog' src="./resources/images/png/dog.png" alt="">
<img id = 'dogBowl' src="./resources/images/png/dogBowl.png" alt="">
<img class = 'hotdog' src="./resources/images/png/hot-dog.png" alt="">
</div>
<div class = 'scoreBoard'>
<p>SCORE:</p>
<p id = 'gameScore'>0</p>
</div>
<div class = 'thanks'>
<p class = 'attribute'>Dog icon made by <a href="https://www.flaticon.com/authors/photo3idea-studio" title="photo3idea_studio">photo3idea_studio</a> from <a href="https://www.flaticon.com/" title="Flaticon"> www.flaticon.com</a></p>
<p class = 'attribute'>Dog bowl icon made by <a href="https://www.flaticon.com/authors/good-ware" title="Good Ware">Good Ware</a> from <a href="https://www.flaticon.com/" title="Flaticon"> www.flaticon.com</a></p>
<p class = 'attribute'>Hotdog icon made by <a href="https://www.flaticon.com/authors/freepik" title="Freepik">Freepik</a> from <a href="https://www.flaticon.com/" title="Flaticon"> www.flaticon.com</a></p>
</div>
<script src="game.js"></script>
</body>
</html>
CSS:
body {
background-color: #C5F4E0;
user-select: none;
-moz-user-select: none;
-webkit-user-drag: none;
-webkit-user-select: none;
-ms-user-select: none;
height: fit-content;
}
h1 {
color: white;
text-align: center;
font-family: 'Bungee';
font-size: 4rem;
text-shadow: #232835 0px 3px 4px;
margin-bottom: 1rem;
}
p {
text-align: center;
color: #232835;
font-family: 'IBM Plex Sans';
font-weight: 200;
font-size: 1.5rem;
margin-top: 0rem;
}
#gameSpace {
display: flex;
flex-direction: row;
border: #232835 2px ridge;
height: 25rem;
width: 25rem;
margin: 0rem auto;
background-color: #F0F5F2;
align-items: flex-end;
cursor: pointer;
}
#dog {
max-width: 10rem;
max-height: 10rem;
justify-content: end;
align-items: baseline;
padding-left: 1rem;
padding-bottom: 1rem;
}
#dogBowl {
max-width: 8rem;
max-height: 8rem;
padding-right: 3rem;
margin-left: auto;
}
.hotdog {
display: none;
}
.scoreBoard {
display: flex;
height: 5rem;
width: 20rem;
margin: 2rem auto;
background-color: #232835;
border: #232835 1px ridge;
align-items: center;
color: #F0F5F2;
}
.scoreBoard p {
font-family: 'Lato';
font-weight: 500;
font-size: 1rem;
width: fit-content;
padding-left: .5rem;
margin: 0rem 0rem;
color: #F0F5F2;
}
#gameScore {
font-family: 'IBM Plex Sans';
font-weight: 200;
margin-left: auto;
padding-right: 1rem;
font-size: 4rem;
}
/* THANKS SECTION */
.thanks {
height: 3rem;
width: auto;
}
.attribute {
font-size: .75rem;
font-family: 'Lato';
margin: 0rem auto;
}
/* MEDIA SECTION */
@media only screen and (max-width: 600px){
#gameSpace {
width: 75%;
}
h1 {
font-size: 3rem;
}
p {
font-size: 1rem;
}
}
JavaScript:
let food = 0;
function upDog() {
food++;
document.getElementById("gameScore").innerHTML = food;
}
gameSpace.onclick = upDog;