Project5 [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. [3분 코딩] 끝 앱 소개 - Notion 그래프가 극단적이긴 하나 일요일날 밤 새서 서버를 구현했다... ^~^ 2021. 11. 10. [Node.js] 2021 Mirim Tech Talk Hackathon 딱 추석동안 스택만 부여잡고 있어서 해커톤이 끝난 주말동안 만들어보았다. 게시판을 만드는 프로젝트로 CRUD를 구현해보았다. 1. Node.js 초기 세팅 이렇게 또 찾아볼까봐 블로그에 정리했다. 2. db 설계 CREATE TABLE board ( id INT PRIMARY KEY AUTO_INCREMENT, title VARCHAR(100) NOT NULL, description TEXT NOT NULL ); 해커톤에서 주어진 컬럼은 title과 description으로, 기본적으로 테이블에는 PK값이 필요해 id를 자동생성으로 주었다. 3. router 나누기 app.js에 boardRouter로 /boards 폴더와 연결한다. app.js const boardRouter = require('./r.. 2021. 9. 25. 이전 1 다음
