https://taehyunkim3.github.io/carrotgame1/
Carrot Game
taehyunkim3.github.io
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Carrot Game</title>
<link rel="stylesheet" href="style.css" />
<script
src="https://kit.fontawesome.com/0a63898d1f.js"
crossorigin="anonymous"
></script>
</head>
<body>
<main class="main">
<button class="start">
<i class="fa-solid fa-play"></i>
</button>
<div class="timer">READY</div>
<div class="counter">9</div>
<section class="playground"></section>
</main>
<script src="main.js" defer></script>
</body>
</html>* {
box-sizing: border-box;
}
html,
body {
}
body {
margin: 0;
padding: 0;
text-align: center;
width: 100%;
height: 100%;
display: flex;
background-color: beige;
flex-direction: column;
align-items: center;
padding-top: 20px;
}
.main {
background-image: url("img/background.png");
background-size: cover;
background-repeat: no-repeat;
height: 540px;
width: 960px;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
position: relative;
}
.start {
height: 50px;
width: 50px;
border: 2px solid black;
border-radius: 10px;
background-color: antiquewhite;
font-size: 20px;
margin-bottom: 10px;
margin-top: 10px;
cursor: pointer;
}
.start:hover {
scale: 1.1;
}
.timer {
height: 30px;
width: 130px;
background-color: white;
font-size: 20px;
text-align: center;
border: 2px solid black;
border-radius: 10px;
margin-top: 0;
display: flex;
justify-content: center;
align-items: center;
}
/* i {
padding: 10px;
} */
.counter {
height: 40px;
width: 40px;
border-radius: 50%;
background-color: coral;
margin-top: 10px;
margin-bottom: auto;
border: 2px solid black;
color: aliceblue;
font-size: 20px;
display: flex;
justify-content: center;
align-items: center;
}
.playground {
bottom: 0px;
width: 100%;
height: 60%;
background: transparent;
/* border: 3px solid black; */
bottom: 0px;
position: relative;
}
.reset {
font-size: 200px;
color: white;
position: absolute;
top: 130px;
left: 390px;
cursor: pointer;
}
.gameover {
top: -80px;
left: 230px;
position: absolute;
font-size: 100px;
color: red;
}
.pause {
top: 0px;
left: 370px;
position: absolute;
font-size: 100px;
color: white;
}
.win {
top: -80px;
left: 390px;
position: absolute;
font-size: 100px;
color: yellow;
}
.bug,
.carrot {
position: absolute;
cursor: pointer;
/* border: 1px solid black; */
}
.carrot {
padding: 10px;
}
.popup {
background-color: rgba(0, 0, 0, 0.3);
border-radius: 30px;
height: 380px;
width: 960px;
position: absolute;
left: 00px;
bottom: 00px;
}
.buttoncover {
background-color: rgba(0, 0, 0, 0.3);
border-radius: 10px;
height: 60px;
width: 60px;
position: absolute;
left: 450px;
bottom: 475px;
}
function gameset() {
const COUNT_START = 2000; // 100분의 1초 기준.
let count = COUNT_START;
let playing = false;
let freshStart = true;
playpause = document.querySelector('.start');
playpause.onclick = function () {
if (freshStart) {
itemSet();
freshStart = false;
console.log('freshstart')
playing = true;
console.log("Play!");
playpause.innerHTML = `<i class="fa-solid fa-stop"></i>`;
countdown();
}
else if (playing) {
playing = false;
console.log("Pause!");
playpause.innerHTML = ` <i class="fa-solid fa-play"></i>`;
const popup = document.createElement('div');
popup.setAttribute('class', 'popup')
mainPage.appendChild(popup);
playing = false;
popup.innerHTML = `
<p class="pause">pause</p>
`
countdown();
} else if (!playing) {
playing = true;
console.log("Play!");
playpause.innerHTML = `<i class="fa-solid fa-stop"></i>`;
mainPage.removeChild(document.querySelector('.popup'));
countdown();
}
}
let timeoutId = null;
function countdown() {
displayTime();
if (count == 0) {
playing = false;
//게임오버
gameover();
} else if (playing) {
timeoutId = setTimeout(countdown, 10);
count--;
} else {
clearTimeout(timeoutId);
}
// countdown(); 무한호출되어 지우고 playpause onclick으로 넣음.
}
function displayTime() {
var sec = count;
var mins = Math.floor(sec / 100);
sec -= mins * (100);
document.querySelector('.timer').innerHTML = LeadingZero(mins) + '\'' + LeadingZero(sec) + '\"';
}
function LeadingZero(Time) {
return (Time < 10) ? "0" + Time : + Time;
}
const mainPage = document.querySelector('.main');
function gameover() {
const cover = document.createElement('div');
cover.setAttribute('class', 'buttoncover')
mainPage.appendChild(cover);
const popup = document.createElement('div');
popup.setAttribute('class', 'popup')
mainPage.appendChild(popup);
playing = false;
popup.innerHTML = `
<i class="fa-solid fa-rotate-right reset"></i>
<p class="gameover">GAME OVER</p>
`
reset = document.querySelector('.reset');
reset.onclick = function () {
console.log("Reset Timer!");
count = COUNT_START;
mainPage.innerHTML = `
<button class="start">
<i class="fa-solid fa-play"></i>
</button>
<div class="timer">READY</div>
<div class="counter">9</div>
<section class="playground">
</section>
`
gameset();
}
}
function win() {
const cover = document.createElement('div');
cover.setAttribute('class', 'buttoncover')
mainPage.appendChild(cover);
const popup = document.createElement('div');
popup.setAttribute('class', 'popup')
mainPage.appendChild(popup);
playing = false;
popup.innerHTML = `
<i class="fa-solid fa-rotate-right reset"></i>
<p class="win">WIN~</p>
`
reset = document.querySelector('.reset');
reset.onclick = function () {
console.log("Reset Timer!");
count = COUNT_START;
mainPage.innerHTML = `
<button class="start">
<i class="fa-solid fa-play"></i>
</button>
<div class="timer">READY</div>
<div class="counter">9</div>
<section class="playground">
</section>
`
gameset();
}
}
function itemSet() {
const initCarrot = 6;
const initBug = 6;
let carrotCount = initCarrot;
let carrotId = 0;//uuid
let bugId = initCarrot + 1;//carrot + 1 uuid
const counter = document.querySelector('.counter');
counter.innerHTML = carrotCount;
//random 함수 954 318
function randomBottom() {
return Math.floor(Math.random() * (250 - 10) + 10);
}
function randomLeft() {
return Math.floor(Math.random() * (900 - 10) + 10);
}
const playground = document.querySelector('.playground');
function addCarrot() {
for (let i = 0; i < initCarrot; i++) {
const item = createCarrot();
playground.appendChild(item);
}
}
function createCarrot() {
const carrot = document.createElement('img');
carrot.setAttribute('class', 'carrot');
carrot.setAttribute('src', 'img/carrot.png');
carrot.setAttribute('data-id', carrotId);
const bottom = randomBottom();
const left = randomLeft(); //백틱 안에 function의 값은 들어갈 수 없음.
carrot.setAttribute('style', `bottom: ${bottom}px;
left: ${left}px;`);
// carrot.style.bottom = `${randomBottom}px;`;
// carrot.style.left = `${randomLeft}px;`;
carrotId++;
return carrot;
}
function addBug() {
for (let i = 0; i < initBug; i++) {
const item = createBug();
playground.appendChild(item);
}
}
function createBug() {
const bug = document.createElement('img');
bug.setAttribute('src', 'img/bug.png');
bug.setAttribute('class', 'bug');
bug.setAttribute('data-id', bugId);
const bottom = randomBottom();
const left = randomLeft();
bug.setAttribute('style', `bottom: ${bottom}px;
left: ${left}px;`);
bugId++;
return bug;
}
playground.addEventListener('click', event => {
const id = event.target.dataset.id;
if (id <= initCarrot) {
console.log(`carrot no.${id}is deleted`);
const toBeDeleted = document.querySelector(`.carrot[data-id="${id}"]`);
toBeDeleted.remove();
carrotCount--;
counter.innerHTML = carrotCount;
if (carrotCount === 0) {
win();
}
} else if (id >= initCarrot + 1) {
console.log(`bug no.${id}is clicked`);
gameover();
}
})
addCarrot();
addBug();
};
}
gameset();timeout 기능이 중복 호출되는 문제 때문에, chatgpt에게 물어봐서 겨우 수정을 했다.
아래는 원래 코드이고 countdown()이 무한 호출되고,
setTimeout이 취소되지 않는 문제를 위 코드에서 해결했다.
더보기
function gameset() {
const COUNT_START = 2000; // seconds * hours
let count = COUNT_START;
let playing = false;
let freshStart = true;
playpause = document.querySelector('.start');
playpause.onclick = function () {
if (freshStart) {
itemSet();
freshStart = false;
console.log('freshstart')
playing = true;
console.log("Play!");
playpause.innerHTML = `<i class="fa-solid fa-stop"></i>`;
}
else if (playing) {
playing = false;
console.log("Pause!");
playpause.innerHTML = ` <i class="fa-solid fa-play"></i>`;
const popup = document.createElement('div');
popup.setAttribute('class', 'popup')
mainPage.appendChild(popup);
playing = false;
popup.innerHTML = `
<p class="pause">pause</p>
`
} else if (!playing) {
playing = true;
console.log("Play!");
playpause.innerHTML = `<i class="fa-solid fa-stop"></i>`;
mainPage.removeChild(document.querySelector('.popup'));
}
}
function countdown() {
displayTime();
if (count == 0) {
playing = false;
//게임오버
gameover();
} else if (playing) {
setTimeout(countdown, 10);
count--;
} else {
setTimeout(countdown, 10);
}
}
countdown();
function displayTime() {
var sec = count;
var mins = Math.floor(sec / 100);
sec -= mins * (100);
document.querySelector('.timer').innerHTML = LeadingZero(mins) + '\'' + LeadingZero(sec) + '\"';
}
function LeadingZero(Time) {
return (Time < 10) ? "0" + Time : + Time;
}
const mainPage = document.querySelector('.main');
function gameover() {
const popup = document.createElement('div');
popup.setAttribute('class', 'popup')
mainPage.appendChild(popup);
playing = false;
popup.innerHTML = `
<i class="fa-solid fa-rotate-right reset"></i>
<p class="gameover">GAME OVER</p>
`
reset = document.querySelector('.reset');
reset.onclick = function () {
console.log("Reset Timer!");
count = COUNT_START;
mainPage.innerHTML = `
<button class="start">
<i class="fa-solid fa-play"></i>
</button>
<div class="timer">READY</div>
<div class="counter">9</div>
<section class="playground">
</section>
`
gameset();
}
}
function win() {
mainPage.innerHTML = `
<i class="fa-solid fa-rotate-right reset"></i>
<p class="win">WIN!!</p>
`
reset = document.querySelector('.reset');
reset.onclick = function () {
console.log("Reset Timer!");
count = COUNT_START;
mainPage.innerHTML = `
<button class="start">
<i class="fa-solid fa-play"></i>
</button>
<div class="timer">READY</div>
<div class="counter">9</div>
<section class="playground">
</section>
`
gameset();
}
}
function itemSet() {
const initCarrot = 6;
const initBug = 6;
let carrotCount = initCarrot;
let carrotId = 0;//uuid
let bugId = initCarrot + 1;//carrot + 1 uuid
const counter = document.querySelector('.counter');
counter.innerHTML = carrotCount;
//random 함수 954 318
function randomBottom() {
return Math.floor(Math.random() * (250 - 10) + 10);
}
function randomLeft() {
return Math.floor(Math.random() * (900 - 10) + 10);
}
const playground = document.querySelector('.playground');
function addCarrot() {
for (let i = 0; i < initCarrot; i++) {
const item = createCarrot();
playground.appendChild(item);
}
}
function createCarrot() {
const carrot = document.createElement('img');
carrot.setAttribute('class', 'carrot');
carrot.setAttribute('src', '/img/carrot.png');
carrot.setAttribute('data-id', carrotId);
const bottom = randomBottom();
const left = randomLeft(); //백틱 안에 function의 값은 들어갈 수 없음.
carrot.setAttribute('style', `bottom: ${bottom}px;
left: ${left}px;`);
// carrot.style.bottom = `${randomBottom}px;`;
// carrot.style.left = `${randomLeft}px;`;
carrotId++;
return carrot;
}
function addBug() {
for (let i = 0; i < initBug; i++) {
const item = createBug();
playground.appendChild(item);
}
}
function createBug() {
const bug = document.createElement('img');
bug.setAttribute('src', '/img/bug.png');
bug.setAttribute('class', 'bug');
bug.setAttribute('data-id', bugId);
const bottom = randomBottom();
const left = randomLeft();
bug.setAttribute('style', `bottom: ${bottom}px;
left: ${left}px;`);
bugId++;
return bug;
}
playground.addEventListener('click', event => {
const id = event.target.dataset.id;
if (id <= initCarrot) {
console.log(`carrot no.${id}is deleted`);
const toBeDeleted = document.querySelector(`.carrot[data-id="${id}"]`);
toBeDeleted.remove();
carrotCount--;
counter.innerHTML = carrotCount;
if (carrotCount === 0) {
win();
}
} else if (id >= initCarrot + 1) {
console.log(`bug no.${id}is clicked`);
gameover();
}
})
addCarrot();
addBug();
};
}
gameset();