웹 게임을 만들며 배우는 자바스크립트 - 인프런
본 강의에서는 자바스크립트를 활용해 프로그래밍하는 연습을 할 것입니다. 웹 게임인 구구단을 시작으로 끝말잇기, 숫자 야구, 틱택토, 로또 추첨기, 가위바위보, 지뢰 찾기, 카드 짝맞추기 게�
www.inflearn.com
끝말잇기
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>끝말잇기</title>
</head>
<body>
<!-- <div>호주</div>
<form>
<input type="text"/>
<button>등록</button>
</form>
<div>딩동댕</div> -->
<script src="끝말잇기.Js"></script>
</body>
</html>var 바디 = document.body;
var word = document.createElement('div');
word.textContent = '호주';
document.body.append(word);
var formInput = document.createElement('form');
document.body.append(formInput);
var inputbox = document.createElement('input');
formInput.append(inputbox);
var btn = document.createElement('button');
btn.textContent = '입력';
formInput.append(btn);
var result = document.createElement('div');
document.body.append(result);
formInput.addEventListener('submit', function(e) {
e.preventDefault();
if (word.textContent[word.textContent.length - 1] === inputbox.value[0]) {
result.textContent = '딩동댕';
word.textContent = inputbox.value;
inputbox.value = '';
inputbox.focus();
} else {
result.textContent = '땡';
inputbox.value = '';
inputbox.focus();
}
});
// var word = '제로초'
// while(true) {
// var answer = prompt(word);
// if (word[word.length - 1] == answer[0]) {
// alert('딩동댕');
// word = answer;
// } else {
// alert('땡');
// }
// }
구구단
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>구구단</title>
</head>
<body>
<script src="구구단.js"></script>
</body>
</html>var number1 = Math.ceil(Math.random() * 9);
var number2 = Math.ceil(Math.random() * 9);
var resultValue = number1 * number2;
var body = document.body;
var word = document.createElement('div');
word.textContent = String(number1) + '곱하기' + String(number2) + '는?';
document.body.append(word);
var formInput = document.createElement('form');
document.body.append(formInput);
var inputbox = document.createElement('input');
inputbox.type='number';
formInput.append(inputbox);
var btn = document.createElement('button');
btn.textContent = '입력';
formInput.append(btn);
var result = document.createElement('div');
document.body.append(result);
formInput.addEventListener('submit', function(e) {
e.preventDefault();
if (resultValue == inputbox.value) {
result.textContent = '딩동댕';
number1 = Math.ceil(Math.random() * 9);
number2 = Math.ceil(Math.random() * 9);
resultValue = number1 * number2;
word.textContent = String(number1) + '곱하기' + String(number2) + '는?';
inputbox.value = '';
inputbox.focus();
} else {
result.textContent = '땡';
inputbox.value = '';
inputbox.focus();
}
});
숫자야구
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>숫자야구</title>
</head>
<body>
<!-- <h1>1 스크라이트 1볼 </h1>
<form>
<input type="text"/>
<button>입력</button>
</form> -->
<script src="숫자야구.js"></script>
</body>
</html>var body = document.body;
var result = document.createElement('h1');
document.body.append(result);
var form = document.createElement('form');
document.body.append(form);
var inputBox = document.createElement('input');
inputBox.maxLength = '4';
form.append(inputBox);
var btn = document.createElement('button');
btn.textContent = '입력';
form.append(btn);
var numbersCondidate;
var numbers = [];
var choiceNum;
function getNumbers() {
numbersCondidate = [1, 2, 3, 4, 5, 6, 7, 8, 9];
for (i = 0; i < 4; i ++) {
choiceNum = numbersCondidate.splice(Math.floor(Math.random() * (9 - i)), 1)[0];
numbers.push(choiceNum);
}
}
getNumbers();
var wrongCnt = 0;
form.addEventListener('submit', function func (e) {
e.preventDefault();
var inputValue = inputBox.value;
if (numbers.join('') === inputValue) {
result.textContent = '홈런';
inputBox.value = '';
inputBox.focus();
getNumbers();
wrongCnt = 0;
} else {
wrongCnt ++;
if (wrongCnt > 10) {
result.textContent = '10회 틀렸으므로 실패! 정답은 ' + numbers.join() + '입니다.';
inputBox.value = '';
inputBox.focus();
getNumbers();
wrongCnt = 0;
} else {
var inputValues = inputValue.split('');
var strike = 0;
var ball = 0;
for (i = 0; i < 4; i++) {
if (Number(inputValues[i]) === numbers[i]) {
strike ++;
} else if (numbers.indexOf(Number(inputValues[i])) > -1) {
ball++;
}
}
result.textContent = strike + '스크라이크 ' + ball + '볼 입니다. (시도횟수 : ' + wrongCnt + ')' ;
inputBox.value = '';
inputBox.focus();
}
}
});'자바스크립트' 카테고리의 다른 글
| 함수 심화학습, 객체 프로퍼티 설정 (0) | 2020.08.30 |
|---|---|
| 웹 게임을 만들며 배우는 자바스크립트 예제2 (0) | 2020.08.23 |
| 자료구조와 자료형 (0) | 2020.08.23 |
| 객체: 기초 (0) | 2020.08.23 |
| 웹 게임을 만들며 배우는 자바스크립트 (0) | 2020.08.16 |