[Toy Project] 이번에는 웹 페이지 오목이다(2)🎲 [JavaScript로 오목 로직 구현하기]
·
◈ Yermi Project/Toy Project💎
- 이번에는 웹 페이지 오목이다(2) 1. 화점 찍어주기 바둑판에 화점이 없으니 너무 밋밋하여 위치 계산하여 찍어주었다. for(var i = 0 ; i < 3 ; i++) { for(var j = 0 ; j < 3 ; j++) { let dot = document.createElement('div'); dot.setAttribute('class', 'dot'); let margin_top = 58 + (i * 120); let margin_left = 58 + (j * 120); dot.setAttribute('style', `margin-top: ${margin_top}px; margin-left: ${margin_left}px;`); board.appendChild(dot); } } 2. 오목 로직..
[Toy Project] 이번에는 웹 페이지 오목이다(1)🎲 [JavaScript와 CSS로 바둑판 만들기]
·
◈ Yermi Project/Toy Project💎
- 이번에는 웹 페이지 오목이다(1) 이번에는 웹 페이지에서 할 수 있는 게임을 만들어보려고 한다. 바로 '오목'이다. 1. 오목판 만들기 오목판은 JavaScript로 만들었다. 아래는 오목판과 바둑돌이 놓일 위치에 대한 CSS이다. #table { position: absolute; background-color: blanchedalmond; width: 360px; height: 360px; border-collapse: collapse; border-spacing: 0; } #go { position: absolute; margin: 10px; width: 340px; height: 340px; border-collapse: collapse; } .square { border: thin solid..