Insect catch game
This commit is contained in:
Brad Traversy
parent
f5acd081f1
commit
89ce05c546
65
insect-catch-game/index.html
Normal file
65
insect-catch-game/index.html
Normal file
@ -0,0 +1,65 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<link rel="stylesheet" href="style.css" />
|
||||
<title>Catch The Insect</title>
|
||||
</head>
|
||||
<body>
|
||||
<div class="screen">
|
||||
<h1>Catch The Insect</h1>
|
||||
<button class="btn" id="start-btn">Play Game</button>
|
||||
</div>
|
||||
|
||||
<div class="screen">
|
||||
<h1>What is your "favorite" insect?</h1>
|
||||
<ul class="insects-list">
|
||||
<li>
|
||||
<button class="choose-insect-btn">
|
||||
<p>Fly</p>
|
||||
<img src="http://pngimg.com/uploads/fly/fly_PNG3946.png" alt="fly">
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button class="choose-insect-btn">
|
||||
<p>Mosquito</p>
|
||||
<img
|
||||
src="http://pngimg.com/uploads/mosquito/mosquito_PNG18175.png"
|
||||
alt="mosquito"
|
||||
/>
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button class="choose-insect-btn">
|
||||
<p>Spider</p>
|
||||
<img
|
||||
src="http://pngimg.com/uploads/spider/spider_PNG12.png"
|
||||
alt="spider"
|
||||
/>
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button class="choose-insect-btn">
|
||||
<p>Roach</p>
|
||||
<img
|
||||
src="http://pngimg.com/uploads/roach/roach_PNG12163.png"
|
||||
alt="roach"
|
||||
/>
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="screen game-container" id="game-container">
|
||||
<h3 id="time" class="time">Time: 00:00</h3>
|
||||
<h3 id="score" class="score">Score: 0</h3>
|
||||
<h5 id="message" class="message">
|
||||
Are you annnoyed yet? <br>
|
||||
You are playing an impossible game!!
|
||||
</h5>
|
||||
</div>
|
||||
|
||||
<script src="script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
78
insect-catch-game/script.js
Normal file
78
insect-catch-game/script.js
Normal file
@ -0,0 +1,78 @@
|
||||
const screens = document.querySelectorAll('.screen');
|
||||
const choose_insect_btns = document.querySelectorAll('.choose-insect-btn');
|
||||
const start_btn = document.getElementById('start-btn')
|
||||
const game_container = document.getElementById('game-container')
|
||||
const timeEl = document.getElementById('time')
|
||||
const scoreEl = document.getElementById('score')
|
||||
const message = document.getElementById('message')
|
||||
let seconds = 0
|
||||
let score = 0
|
||||
let selected_insect = {}
|
||||
|
||||
start_btn.addEventListener('click', () => screens[0].classList.add('up'))
|
||||
|
||||
choose_insect_btns.forEach(btn => {
|
||||
btn.addEventListener('click', () => {
|
||||
const img = btn.querySelector('img')
|
||||
const src = img.getAttribute('src')
|
||||
const alt = img.getAttribute('alt')
|
||||
selected_insect = { src, alt }
|
||||
screens[1].classList.add('up')
|
||||
setTimeout(createInsect, 1000)
|
||||
startGame()
|
||||
})
|
||||
})
|
||||
|
||||
function startGame() {
|
||||
setInterval(increaseTime, 1000)
|
||||
}
|
||||
|
||||
function increaseTime() {
|
||||
let m = Math.floor(seconds / 60)
|
||||
let s = seconds % 60
|
||||
m = m < 10 ? `0${m}` : m
|
||||
s = s < 10 ? `0${s}` : s
|
||||
timeEl.innerHTML = `Time: ${m}:${s}`
|
||||
seconds++
|
||||
}
|
||||
|
||||
function createInsect() {
|
||||
const insect = document.createElement('div')
|
||||
insect.classList.add('insect')
|
||||
const { x, y } = getRandomLocation()
|
||||
insect.style.top = `${y}px`
|
||||
insect.style.left = `${x}px`
|
||||
insect.innerHTML = `<img src="${selected_insect.src}" alt="${selected_insect.alt}" style="transform: rotate(${Math.random() * 360}deg)" />`
|
||||
|
||||
insect.addEventListener('click', catchInsect)
|
||||
|
||||
game_container.appendChild(insect)
|
||||
}
|
||||
|
||||
function getRandomLocation() {
|
||||
const width = window.innerWidth
|
||||
const height = window.innerHeight
|
||||
const x = Math.random() * (width - 200) + 100
|
||||
const y = Math.random() * (height - 200) + 100
|
||||
return { x, y }
|
||||
}
|
||||
|
||||
function catchInsect() {
|
||||
increaseScore()
|
||||
this.classList.add('caught')
|
||||
setTimeout(() => this.remove(), 2000)
|
||||
addInsects()
|
||||
}
|
||||
|
||||
function addInsects() {
|
||||
setTimeout(createInsect, 1000)
|
||||
setTimeout(createInsect, 1500)
|
||||
}
|
||||
|
||||
function increaseScore() {
|
||||
score++
|
||||
if(score > 19) {
|
||||
message.classList.add('visible')
|
||||
}
|
||||
scoreEl.innerHTML = `Score: ${score}`
|
||||
}
|
||||
150
insect-catch-game/style.css
Normal file
150
insect-catch-game/style.css
Normal file
@ -0,0 +1,150 @@
|
||||
@import url('https://fonts.googleapis.com/css?family=Press+Start+2P&display=swap');
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: #516dff;
|
||||
color: #fff;
|
||||
font-family: 'Press Start 2P', sans-serif;
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
h1 {
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.btn {
|
||||
border: 0;
|
||||
background-color: #fff;
|
||||
color: #516dff;
|
||||
padding: 15px 20px;
|
||||
font-family: inherit;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.btn:focus {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
.screen {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
transition: margin 0.5s ease-out;
|
||||
}
|
||||
|
||||
.screen.up {
|
||||
margin-top: -100vh;
|
||||
}
|
||||
|
||||
.insects-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.insects-list li {
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
.choose-insect-btn {
|
||||
background-color: transparent;
|
||||
border: 2px solid #fff;
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
font-family: inherit;
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
}
|
||||
|
||||
.choose-insect-btn:hover {
|
||||
background-color: #fff;
|
||||
color: #516dff;
|
||||
}
|
||||
|
||||
.choose-insect-btn:active {
|
||||
background-color: rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
|
||||
.choose-insect-btn img {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.game-container {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.time,
|
||||
.score {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
}
|
||||
|
||||
.time {
|
||||
left: 20px;
|
||||
}
|
||||
|
||||
.score {
|
||||
right: 20px;
|
||||
}
|
||||
|
||||
.message {
|
||||
line-height: 1.7;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
width: 100%;
|
||||
padding: 20px;
|
||||
z-index: 100;
|
||||
text-align: center;
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -150%);
|
||||
transition: transform 0.4s ease-in;
|
||||
}
|
||||
|
||||
.message.visible {
|
||||
transform: translate(-50%, 150%);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.insect {
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
position: absolute;
|
||||
transform: translate(-50%, -50%) scale(1);
|
||||
transition: transform 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
.insect.caught {
|
||||
transform: translate(-50%, -50%) scale(0);
|
||||
}
|
||||
|
||||
.insect img {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user