영상
개념
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#timer { text-align: center; }
#header { text-align: center; }
table {
border-collapse: collapse;
border: 1px solid black;
margin: auto;
}
td {
width: 50px;
height: 50px;
border: 1px solid black;
text-align: center;
cursor: pointer;
}
</style>
</head>
<body onload="init()">
<div id="timer">0</div>
<div id="header">
<h3>Speed Game</h3>
<button onclick="hintClick()">힌트</button>
<span id="nextNum">1</span>
</div>
<div id="center"></div>
<div id="footer"></div>
<script>
let gameNum = 1; // 추가된 변수
let time = 0;
let size = 5;
let frontList = [];
let backList = [];
let $center = document.querySelector("#center");
let $table = document.createElement("table");
let $tdList = [];
function init() {
let num = 1;
for(let i=0; i<size; i++) {
let frontTemp = [];
let backTemp = [];
for(let j=0; j<size; j++) {
frontTemp.push(num);
backTemp.push(num + 25);
num += 1;
}
frontList.push(frontTemp);
backList.push(backTemp);
}
// 셔플(shuffle)
/*
for(let i=0; i<100; i++) {
let y = Math.floor(Math.random() * size);
let x = Math.floor(Math.random() * size);
let temp = frontList[0][0];
frontList[0][0] = frontList[y][x];
frontList[y][x] = temp;
y = Math.floor(Math.random() * size);
x = Math.floor(Math.random() * size);
temp = backList[0][0];
backList[0][0] = backList[y][x];
backList[y][x] = temp;
}
*/
console.log("frontList = " + frontList);
console.log("backList = " + backList);
for(let i=0; i<size; i++) {
let $tr = document.createElement("tr");
let $tempTdList = [];
for(let j=0; j<size; j++) {
let $td = document.createElement("td");
$td.addEventListener("click", clickEvent);
$td.innerText = frontList[i][j];
$tr.append($td);
$tempTdList.push($td);
}
$tdList.push($tempTdList);
$table.append($tr);
}
$center.append($table);
}
function setTimer() {
time += 1;
document.querySelector("#timer").innerText = time;
}
function clickEvent() {
let y = 0;
let x = 0;
for(let i=0; i<size; i++) {
for(let j=0; j<size; j++) {
if(this == $tdList[i][j]) {
y = i;
x = j;
break;
}
}
}
if(this.innerText == gameNum) {
if(1 <= gameNum && gameNum <= 25) {
if(gameNum == 1) {
setInterval(setTimer, 1000);
}
this.innerText = backList[y][x];
} else {
this.innerText = 0;
}
this.style.backgroundColor = "";
gameNum += 1;
document.querySelector("#nextNum").innerText = gameNum;
}
}
function hintClick() {
let y = 0;
let x = 0;
for(let i=0; i<size; i++) {
for(let j=0; j<size; j++) {
if($tdList[i][j].innerText == gameNum) {
y = i;
x = j;
break;
}
}
}
$tdList[y][x].style.backgroundColor = "red";
}
</script>
</body>
</html>
Java
복사