728x90
GWP나 행사에서 이벤트 진행할 때,
상품이 많이 없지만 재미를 살리기 위한 방법을 생각해보고, 만들어봤다.
다시 뽑기, 꽝이 있는 랜덤 뽑기 판을 만들면 될 것!
// 말이 랜덤이지만, 이미 세팅 됨.
다시뽑기
다음 기회에...
상품 보기
실제로 사용했고,
팀원들이 매우 재밌어했다.
그래서 나도 나름 뿌듯한 게임판을 만들었다고 생각했다 ^^
누구나 쉽게 사용하게 만들자! 라는 생각으로 아래와 같이 JS 코드를 만들었다.
images/image1~25.jpg 파일만 잘 만들면 된다 ^^!
아래는 JS 코드, HTML, CSS 다.
document.addEventListener("DOMContentLoaded", function () {
const table = document.getElementById("imageTable");
const numberOfRows = 5;
const numberOfColumns = 5;
// 이미지 경로를 저장하는 배열을 만듭니다.
const imagePaths = [
"images/image1.jpg", "images/image2.jpg", "images/image3.jpg", "images/image4.jpg", "images/image5.jpg",
"images/image6.jpg", "images/image7.jpg", "images/image8.jpg", "images/image9.jpg", "images/image10.jpg",
"images/image11.jpg", "images/image12.jpg", "images/image13.jpg", "images/image14.jpg", "images/image15.jpg",
"images/image16.jpg", "images/image17.jpg", "images/image18.jpg", "images/image19.jpg", "images/image20.jpg",
"images/image21.jpg", "images/image22.jpg", "images/image23.jpg", "images/image24.jpg", "images/image25.jpg"
];
const isOpens = [];
let cellNumber = 1;
for (let i = 0; i < numberOfRows; i++) {
const row = document.createElement("tr");
for (let j = 0; j < numberOfColumns; j++) {
const cell = document.createElement("td");
cell.textContent = cellNumber;
cell.addEventListener("click", function () {
console.log(isOpens[cell.textContent]);
if(isOpens[cell.textContent] != "1") {
var imagePathTmp = "images/image" + `${cell.textContent}` + ".jpg";
console.log(imagePathTmp);
this.innerHTML = `<img src="`+imagePathTmp+`" alt="Image" >`;
isOpens[cell.textContent] = "1";
}
});
row.appendChild(cell);
cellNumber++;
}
table.appendChild(row);
}
});<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Table</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<table id="imageTable">
</table>
<script src="script.js"></script>
</body>
</html>html, body {
height: 100%;
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
overflow: auto;
}
header {
position: absolute;
top: 0;
left: 0;
width: 100%;
text-align: center;
background-color: rgba(255, 255, 255, 0.8); /* 배경색을 추가하고 약간 투명하게 만듭니다. */
padding: 10px;
}
h1 {
font-size: 2em;
margin: 0;
}
body {
display: flex;
justify-content: center;
align-items: center;
}
table {
border-collapse: collapse;
width: 100%;
max-width: 100vh; /* 높이에 맞춰 테이블의 최대 너비를 설정합니다. */
height: 80vh
}
td {
width: 20%; /* 100% / 5 columns */
height: 20%; /* 초기 높이를 0으로 설정합니다. */
/*padding-top: 20%; /* 각 셀의 높이를 가로 크기에 맞춰 비율로 설정합니다. */
border: 1px solid black;
text-align: center;
vertical-align: middle;
cursor: pointer;
position: relative;
font-size: 2em; /* 숫자의 크기를 조절합니다. */
}
img {
max-width: 100%;
max-height: 100%;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
transition: transform 0.3s; /* 효과를 추가합니다. */
}
728x90
반응형