HTML
css가 섞여 있어 깔끔하지 않다. 하지만 각 항목에 위치 조정을 하고 싶어서 이렇게 하는 게 편했다.
그런데 이렇게 위치 조정하니까 그림 위에 고정되지 않고 사용자 액정 위치에 맞춰 조정된다. 다음에 그림 위에 요소 올리고 싶으면 다른 방법을 찾는 게 좋을 것 같다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>NumberBaseballGame</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="img">
<div style="position: absolute; left: 110px; top: 140px;">
<form>
<input style="padding:40px;font-size:40px" />
<button style='font-size:30px;padding:30px'>GO!</button>
</form>
</div>
<div style="position: absolute; left: 100px; top: 700px;">
<button type="button" onclick="location.href='explain.html' " style='font-size:30px;padding:30px'>플레이 설명</button>
</div>
<div style="position: absolute; left: 400px; top: 940px;">
<h3 style='font-size:50px'>결과는,</h3>
</div>
<div style="position: absolute; left: 400px; top: 1000px;">
<h1 style='font-size:80px'>GOGO!</h1>
</div>
</div>
</div>
<script src="script.js"></script>
<script src="https://replit.com/public/js/replit-badge.js"></script>
</body>
</html>귀여운 CSS
그림 위에 글자 올리는 용도
!! 클래스 이름이랑 . 사이' 띄어쓰기' 절대 안 됨 !! 저번에 왜 안되는지 찾느라 힘들었다.
.img{
position: relative;
background-image: url(./image/base.png);
height: 100vh;
background-size: cover;
}JS
핵심 자바스크립트이다. 제로초님의 강의를 들으며 만들었다.
<배운 점>
-파이썬이 아니니 변수 지정하는 것 잊지 말기
-const는 재할당이 불가함
-html 에서 getElementByClassName() 으로 요소를 가져왔는데 addEventListener is not a function Error 라는 에러가 떴다. getElementByClassName() 사용해서 가져온 요소는 배열이므로 배열 표시를 해주어야 한다! [0]을 추가했더니 해결되었다.
-Math.floor() 무조건 올림, Math.ceil() 무조건 내림 , Math.round () 우리가 아는 반올림
-splice()는 원래 있던 거 삭제시킴! 없어짐
<아쉬운 점>
게임이 1회 끝나면 새로운 게임이 시작되게 하고 싶었는데 comNumbers에 새로운 값이 들어가지 않는다.
한참 고민했는데
근데
방금 찾았다 방금
const 는 재할당이 불가하다고 배운점에 써놓고 comNumbers를 const로..
밑에 논리적으로 이상한가 계속 아래만 봤는데 애초에 문제였구나
후
지금이라도 알아서 다행이다
앞으로 잊지는 않을 것 같다
초보로써 당분간은 그냥 letconst 쓰지 말고 겸허하게 var만 쓰자
//요소 불러오기
var userForm = document.getElementsByTagName("form")[0];//폼
var RangSay = document.getElementsByTagName("h1")[0];//랑쥐말
var userWindow = document.getElementsByTagName("input")[0]; //입력창
const numbers = [1,2,3,4,5,6,7,8,9];
const comNumbers = []; //컴퓨터의 답
for ( var i=0; i<3; i+=1){
var pickedNumber = numbers.splice(Math.floor(Math.random()*(9-i)),1)[0];
comNumbers.push(pickedNumber);
}//컴퓨터가 낼 문제 뽑기 완료
console.log (comNumbers.join(''));
var wrongtime = 0;//틀린횟수
userForm.addEventListener('submit', function callback (Event){
Event.preventDefault();
var userAnswer = userWindow.value; //사용자의 답은 userAnswer
console.log(userAnswer)
if (userAnswer === comNumbers.join('')){ //답이 맞은경우(홈런)
RangSay.textContent = '홈런!!'
userWindow.value ='';
wrongtime += 15
}
else {//답이 틀린 경우(.스트라이크.볼)
var strike = 0;
var ball = 0;
var userAnswerList = userAnswer.split('');//사용자가입력한답을리스트로!
wrongtime += 1;
if(wrongtime > 10 && wrongtime < 12){//틀린횟수 10번초과
RangSay.textContent = '시도횟수 10번을 초과했어! 답은'+ comNumbers.join('')
userWindow.value ='';
}
else if(wrongtime <= 10){//틀린횟수 10번이하
for (var i =0; i<3; i+=1){
if (comNumbers[i] === Number(userAnswerList[i])){//스트라이크
strike += 1;
}
else if (comNumbers.indexOf(Number(userAnswerList[i]))>-1 ) { //볼
ball += 1;
}
}
userWindow.value ='';
userWindow.focus();
RangSay.textContent = strike +'스트라이크' + ball + '볼!'
}
}
});설명서용 HTML
버튼으로 이동
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Base Explain</title>
</head>
<body>
<div class = 'middle'>
<h2 style='font-size:50px'>숫자야구란 감춰진 3개의 숫자가 무엇인지 맞추는 게임입니다.</h2>
<h4 style='font-size:40px'>2) 숫자는 0~9까지 구성되어 있으며, 각 숫자는 <b>한번씩만</b> 사용 가능합니다.</h4>
<h6 style='font-size:40px'>숫자 중복으로 하면 오류나니 유의!!</h6>
<h4 style='font-size:40px'>1) 3자리 숫자와 위치가 모두 맞으면 홈런입니다.</h4>
<h4 style='font-size:40px'>3) 숫자와 자리의 위치가 맞으면 스트라이크, 숫자만 맞으면 볼입니다.</h4>
<h4 style='font-size:40px'>4) 10회 도전 횟수가 초과되면/답을 맞추면 게임이 끝납니다.</h4>
<h3 style='font-size:20px'>!설명서 허접 주의!</h3>
</div>
<script src="script.js"></script>
<script src="https://replit.com/public/js/replit-badge.js"></script>
</body>
</html>실제 플레이 화면
replit 사용
'🖥️ Frontend > Frontend 프로젝트' 카테고리의 다른 글
| <HTML.CSS.JS>로또 추첨 게임 (0) | 2022.08.04 |
|---|---|
| <HTML.CSS.JS> 아빠 생일 프로그램 (0) | 2022.07.28 |
| <HTML.CSS.JS>람지 키우기 (0) | 2022.07.28 |
| <HTML.CSS.JS>틱택토 게임-미완 (0) | 2022.07.28 |
| <HTML.CSS.JS> 구구단게임 (0) | 2022.07.26 |
