자바스크립트로 빙고게임 만들기
이틀차에는 자바스크립트를 이용해 빙고게임을 만들었다! 😆
※대각선은 지원하지 않음※
선택한 칸의 색은 노란색으로 바뀌며
가로줄과 세로줄이 모두 채워지면 빙고 = 해당 줄의 색이 분홍색으로 변한다.
아래 링크로 들어가면 직접 실행시킬 수 있으며
밑의 소스 코드 안 <td>태그의 텍스트를 수정하여 새로운 빙고판을 생성할 수 있다.
빙고게임하러가기↓↓↓
https://shinye-developmentdiary.tistory.com/16
JavaScript Bingo game - 자바스크립트로 만든 빙고 게임 (색칠하기)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25
shinye-developmentdiary.tistory.com
<!DOCTYPE html>
<html lang="en">
<head>
<title>빙고게임 만들기</title>
<style>
table{
margin: 0 auto;
}
td{
border: solid 5px pink;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<table>
<tr id="one"> <!--가로줄-->
<td id="1" onclick = "colorChange(this,1)">1</td> <!-- colsapn="" 행을 들어간 숫자의 갯수만큼 합침(차지) -->
<td id="2" onclick = "colorChange(this,2)">2</td>
<td id="3" onclick = "colorChange(this,3)">3</td>
<td id="4" onclick = "colorChange(this,4)">4</td>
<td id="5" onclick = "colorChange(this,5)">5</td>
</tr>
<tr id="two">
<td id="6" onclick = "colorChange(this,6)">6</td>
<td id="7" onclick = "colorChange(this,7)">7</td>
<td id="8" onclick = "colorChange(this,8)">8</td>
<td id="9" onclick = "colorChange(this,9)">9</td>
<td id="10" onclick = "colorChange(this,10)">10</td>
</tr>
<tr id="three">
<td id="11" onclick = "colorChange(this,11)">11</td> <!-- colsapn="" 열을 들어간 숫자의 갯수만큼 합침(차지) -->
<td id="12" onclick = "colorChange(this,12)">12</td>
<td id="13" onclick = "colorChange(this,13)">13</td>
<td id="14" onclick = "colorChange(this,14)">14</td>
<td id="15" onclick = "colorChange(this,15)">15</td>
</tr>
<tr id="four">
<td id="16" onclick = "colorChange(this,16)">16</td>
<td id="17" onclick = "colorChange(this,17)">17</td>
<td id="18" onclick = "colorChange(this,18)">18</td>
<td id="19" onclick = "colorChange(this,19)">19</td>
<td id="20" onclick = "colorChange(this,20)">20</td>
</tr>
<tr id="five">
<td id="21" onclick = "colorChange(this,21)">21</td>
<td id="22" onclick = "colorChange(this,22)">22</td>
<td id="23" onclick = "colorChange(this,23)">23</td>
<td id="24" onclick = "colorChange(this,24)">24</td>
<td id="25" onclick = "colorChange(this,25)">25</td>
</tr>
</table>
</body>
<script>
var widthBingo;
var widthCheck;
var heightBingo;
var heightCheck;
function colorChange(element, num){
if(element.style.backgroundColor == "yellow"){
element.style.backgroundColor = "white";
}else{
element.style.backgroundColor = "yellow";
}
bingoCheck(num);
}
function bingoCheck(num){
//가로빙고 시작점값 넣기
if(num <= 5){ // 선택한 tr이 1~5인 경우
widthBingo = 1;
}else if(num <= 10){
widthBingo = 6;
}else if(num <= 15){
widthBingo = 11;
}else if(num <= 20){
widthBingo = 16;
}else if(num <= 25){
widthBingo = 21;
}
heightBingo = num % 5
heightCheck = true;
for(var i = 1; i <= 25; i++){
if(i % 5 == heightBingo){
var b = document.getElementById(i);
if(b.style.backgroundColor =="" || b.style.backgroundColor =="white"){
heightCheck = false;
}
}
}
if(heightCheck == true){
hBingoColorChange(heightBingo);
}
widthCheck = true;
for(var i = widthBingo; i <= widthBingo + 4; i++){
var b = document.getElementById(i);
if(b.style.backgroundColor == "" || b.style.backgroundColor == "white"){
widthCheck = false;
}
}
if(widthCheck == true){
wbingoColorChange(widthBingo);
}
}
function hBingoColorChange(heightBingo){
for(var i = 1; i <= 25; i++){
if(i % 5 == heightBingo){
document.getElementById(i).style.backgroundColor = "pink"
}
}
}
function wbingoColorChange(widthBingo){
for(var i = widthBingo; i <= widthBingo+4; i++){
document.getElementById(i).style.backgroundColor = "pink";
}
}
</script>
</html>
'FE > javascript(jQuery)' 카테고리의 다른 글
| jQuery 핸들바(handlebars) 라이브러리 사용법 (0) | 2023.02.08 |
|---|---|
| JavaScript (JQuery) 이용한 주소 관리 프로그램 [등록/삭제] (0) | 2023.02.03 |
| JavaScript Bingo game - 자바스크립트로 만든 빙고 게임 (색칠하기) (0) | 2022.12.31 |
| JavaScript ping pong game source code 자바스크립트 핑퐁게임 코드 (2) | 2022.12.31 |
| JavaScript ping pong game - 자바스크립트로 만든 핑퐁 게임 (0) | 2022.12.30 |