Project/[JS] RummiKub3 [RummiKub/JS] 타일 클릭 시 후광 효과 결과물 CSS 타일 클릭 시 추가할 class의 스타일을 미리 추가합니다. .tile-click{ border-radius: 10px; background-color: rgb(255, 181, 43); box-shadow: 0px 0px 5px 5px rgb(255, 188, 43); } JS 1. 선택한 타일의 정보 찾기 타일의 정보를 찾기 위해서는 이전의 코드를 조금 수정해야합니다! 타일을 띄우는 과정에서 타일 고유의 id를 부여하고 그 id를 가진 이미지 태그를 찾는 방식으로 정보를 찾을 예정입니다. 수정 코드 설명 태그에 id 추가 i번째 타일의 id 값으로 추가 onclick onclick 시 함수에 id값을 넘겨줌 show_player_tile() 수정 function show_player_t.. 2021. 11. 18. [RummiKub/JS] 타일 나누기 규칙 - 총 타일 수 : 104 (빨강, 노랑, 파랑, 검정 * 2묶음* 13장씩 / 4 * 2 * 13) - 나눠가지는 타일 수 : 14 이미지의 오른쪽은 타일 저장한 이름 결과물 HTML check.html 플레이어 타일 AI 타일 남은 타일 CSS check.css * { list-style: none; text-decoration: none; border-collapse: collapse; margin: 0 auto; padding: 0; color: #000; } .tile { margin: 5px; height: 11vh; -webkit-user-drag: none; cursor: pointer; } .main-board{ margin: 30px; height: 100vh; width: 84v.. 2021. 11. 18. [JS] RummiKub 프로젝트 고2 때 바닐라 JS로 구현한 로봇과 플레이하는 1:1 루미큐브 게임입니다. Play game!! 게임 설명 공식 규칙 사용자와 로봇이 타일을 14개씩 나누어 가집니다. 사용자부터 시작하여 1분씩 메인 보드에 타일을 추가할 수 있습니다. 자신의 타일을 모두 메인 보드에 추가하는 플레이어가 승자입니다. 조작 방법 루미큐브 온라인과는 다른 타일 추가 방법을 알려드리겠습니다. 플레이어 보드 → 메인 보드 1. 플레이어 타일에 타일을 한 개씩 클릭해주세요. 2. 타일들이 클릭된 상태에서 메인 보드를 클릭해주세요. 메인 보드 → 플레이어 보드 1. 플레이어 보드에 다시 추가할 타일을 한 개식 클릭해주세요. 2. 플레이어가 가진 타일 중 마지막 회색 버튼을 클릭하면 타일이 제자리로 돌아옵니다. 화면 소개 제한 시간.. 2021. 11. 17. 이전 1 다음
