728x90
반응형
안녕하세요.
일상 리뷰어 해가서쪽입니다.
일전에 소개 드렸던 노노그램 퍼즐보드의
게임판을 윈도우 PC 및 안드로이드폰으로 즐길 수 있는 코드를 만들어 보았습니다.
아래 이미지가 실행을 시킨 모습입니다.
10×10, 15 ×15, 20 ×20, 25×25, 30×30의 5가지 옵션값 선택이 가능합니다.
1. 한 번 클릭하면 그리들이 검정색으로 바뀌고 다시 클릭하면 흰색으로 바뀝니다.
2. 옵션값을 조절해 그림판 크기를 문제 카드에 맞춰 바꿀 수 있습니다.
3. 전체 해제로 리셋이 가능합니다.
4. 완성된 그림을 이미지 파일(PNG)로 저장이 가능합니다. 다운로드 폴더를 확인해 보세요.
728x90
<PC에 노노그램 실행 웹페이지 만드는 법>
1. 아래의 코드를 드래그 복사해서 메모장에 붙여 넣기를 하세요.
2. 텍스트 파일을 다른 이름으로 저장하며 확장형식을 모든 파일로 바꾸세요.
3. 파일 이름 뒤에 .html 확장자명을 작성해 주세요.
4. 바탕화면에 노노그램 아이콘을 확인하고 실행하세요.
5. 바탕화면에 노노그램 웹아이콘을 카카오톡 및 이메일을 이용해
안드로이드 폰으로 옮겨 다운 받으세요.
아래 첨부 파일을 받으셔도 됩니다. !!
<center><!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>노노그램 퍼즐보드</title>
<style>
table {
border-collapse: collapse;
margin-top: 20px;
}
td, th {
width: 25px;
height: 25px;
text-align: center;
border: 1px solid black;
cursor: pointer;
}
.selected {
background-color: black;
}
</style>
</head>
<body>
<h1>노노그램</h1>
<label for="gridSizeSelect">그리드 크기 선택:</label>
<select id="gridSizeSelect" onchange="changeGridSize()">
<option value="10">10×10</option>
<option value="15">15×15</option>
<option value="20">20×20</option>
<option value="25">25×25</option>
<option value="30">30×30</option>
</select>
<button onclick="resetGrid()">전체 해제</button>
<button onclick="saveAsImage()">이미지로 저장</button>
<table id="nonogram">
<tbody>
<!-- 자바스크립트로 그리드와 숫자를 생성합니다 -->
</tbody>
</table>
<canvas id="canvas" style="display:none;"></canvas>
<script>
let gridSize = 10; // 초기 그리드 크기
// 그리드와 숫자 표시를 생성하는 함수
function createGrid() {
const tableBody = document.getElementById('nonogram').getElementsByTagName('tbody')[0];
tableBody.innerHTML = ''; // 기존 그리드 삭제
for (let i = 0; i <= gridSize; i++) {
const row = document.createElement('tr');
for (let j = 0; j <= gridSize; j++) {
const cell = document.createElement(i === 0 || j === 0 ? 'th' : 'td');
if (i === 0 && j > 0) {
cell.textContent = j; // 가로 숫자
} else if (j === 0 && i > 0) {
cell.textContent = i; // 세로 숫자
} else if (i > 0 && j > 0) {
cell.addEventListener('click', function() {
this.classList.toggle('selected');
});
}
row.appendChild(cell);
}
tableBody.appendChild(row);
}
}
// 전체 해제 버튼을 눌렀을 때 모든 선택된 셀을 초기화하는 함수
function resetGrid() {
const cells = document.querySelectorAll('#nonogram td');
cells.forEach(cell => cell.classList.remove('selected'));
}
// 그리드 크기 변경 함수
function changeGridSize() {
const selectElement = document.getElementById('gridSizeSelect');
gridSize = parseInt(selectElement.value);
createGrid();
}
// 그리드를 캔버스에 렌더링하고 이미지를 저장하는 함수
function saveAsImage() {
const canvas = document.getElementById('canvas');
const context = canvas.getContext('2d');
const cellSize = 25; // 각 셀의 크기
canvas.width = (gridSize + 1) * cellSize;
canvas.height = (gridSize + 1) * cellSize;
context.clearRect(0, 0, canvas.width, canvas.height); // 캔버스를 초기화합니다.
context.font = '20px Arial'; // 텍스트 폰트 설정
context.textAlign = 'center'; // 텍스트 정렬
context.textBaseline = 'middle'; // 텍스트 기준선
// 그리드를 캔버스에 렌더링
for (let i = 0; i <= gridSize; i++) {
for (let j = 0; j <= gridSize; j++) {
const x = j * cellSize;
const y = i * cellSize;
context.strokeStyle = 'black';
context.strokeRect(x, y, cellSize, cellSize);
if (i === 0 && j > 0) {
context.fillStyle = 'black';
context.fillText(j, x + cellSize / 2, y + cellSize / 2);
} else if (j === 0 && i > 0) {
context.fillStyle = 'black';
context.fillText(i, x + cellSize / 2, y + cellSize / 2);
} else if (i > 0 && j > 0) {
const cell = document.querySelector(`#nonogram tr:nth-child(${i + 1}) td:nth-child(${j + 1})`);
if (cell.classList.contains('selected')) {
context.fillStyle = 'black';
context.fillRect(x, y, cellSize, cellSize);
}
}
}
}
// 캔버스를 이미지로 변환하고 다운로드
const image = canvas.toDataURL('image/png');
const link = document.createElement('a');
link.href = image;
link.download = 'nonogram.png'; // PNG 이미지로 저장
link.click();
}
// 페이지 로드 시 그리드를 생성합니다.
window.onload = createGrid;
</script>
</body>
</html>
</center>반응형
728x90
반응형
LIST