砲を探してミニゲームを作る(1)
26442 ワード
0、動機
エリーのニンジンゲームの授業を聞いて、他のゲームを作ってみました.
30個の表情ファイルでウォーリーを探せ!同じゲームをして実行したい.
1.計画
2.進捗(jsコード)
一つの書類に丁寧に書いてある.
const gameBtn = document.querySelector(".game__btn");
const gameField = document.querySelector(".game__field");
const gameTarget = document.querySelector(".game__target");
const whales = document.querySelectorAll(".whale");
const timer = document.querySelector(".game__timer");
const popUp = document.querySelector(".pop-up");
const popUpText = document.querySelector(".pop-up__text");
const popUpBtn = document.querySelector(".pop-up__btn i");
const howToBtn = document.querySelector(".game__how-to-play");
const WHALE_SIZE = 100;
let sec = 5;
let clock;
// 랜덤한 숫자 x, y 반환
const getRandomPosition = () => {
const x = gameField.clientWidth - WHALE_SIZE;
const y = gameField.clientHeight - WHALE_SIZE;
const randomX = Math.floor(Math.random()*Math.floor(x));
const randomY = Math.floor(Math.random()*Math.floor(y));
return [randomX,randomY];
}
// 랜덤하게 배치
const displayItems = () => {
whales.forEach((whale)=>{
const xy = getRandomPosition();
whale.style.top = `${xy[1]}px`;
whale.style.left = `${xy[0]}px`;
whale.classList.remove("hidden");
})
}
// 찾아야 할 이미지를 랜덤하게 표시
const showSelectedImage = () => {
const randomNum = Math.floor(Math.random()*30)+1;
gameTarget.innerHTML = `<img src="/imgs/icons/${randomNum}.png" id="game__target__img" data-num="${randomNum}">`;
}
// 고래를 클릭했을 때 조건에 따라 결과 출력
const onTargetClick = (e) => {
const target = e.target.dataset.num;
const gameTargetImg = document.querySelector("#game__target__img");
if(!target){
e.preventDefault();
}
else if(gameTargetImg.dataset.num == target && sec>0 && sec<5){
popUpWin();
stopGame();
}
else{
popUpLose();
stopGame();
}
};
const popUpWin = () => {
popUp.classList.remove("hidden");
popUpText.innerHTML = `REPLAY ?<br>엄마 🐳: 정말 고마워요~ 당신의 눈썰미에 건배!!`;
}
const popUpLose = () => {
popUp.classList.remove("hidden");
popUpText.innerHTML = `REPLAY ?<br>엄마 🐳: 포포~ 이눔시끼 어딨는 거야~`;
}
const startTimer = () => {
clock = setInterval(()=>{
timer.innerText = `0${--sec}:00`;
if(sec === 0){
stopGame();
popUpLose();
}
},1000);
}
const startGame = () => {
//popup 초기화
popUp.classList.add("hidden");
// 타이머 시작
startTimer();
gameBtn.innerHTML = `<i class="far fa-stop-circle"> STOP</i>`;
showSelectedImage();
displayItems();
}
const stopGame = () => {
// 타이머 정지
clearInterval(clock);
// 타이머 초기화
sec = 5;
timer.innerText = `0${sec}:00`;
gameBtn.classList.add("cant-see")
whales.forEach((whale)=>whale.classList.add("hidden"));
}
const showHowTo = () => {
const howToPopUp = document.querySelector(".pop-up-how-to-play");
howToPopUp.classList.toggle("hidden");
}
gameBtn.addEventListener("click", () => {
const btnText = document.querySelector(".game__btn i");
if(btnText.innerText === " PLAY"){
startGame();
} else {
stopGame();
popUpLose();
}
});
gameField.addEventListener("click", onTargetClick);
popUpBtn.addEventListener("click", startGame);
howToBtn.addEventListener("click", showHowTo);
3.進捗画面
4.感じ
Reference
この問題について(砲を探してミニゲームを作る(1)), 我々は、より多くの情報をここで見つけました https://velog.io/@kgorae/고래를-찾아라-미니-게임-만들기テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol