본문 바로가기

Project43

[테트리스] 23. 시간 출력 오늘의 이슈. 플레이타임을 시분초로 출력하자. 0 : 0 : 0 시분초를 출력하는 부분을 html에 지정. // /js/constants.js const TIMER_UNIT = 1000; // 1sec 1초 마다 타이머가 수정되게 상수를 추가. // /js/timer.js class Timer { constructor(speed, bottomTimeInterval, bottomTimeTempInterval, speedUpInterval, speedUnitPercent, gameFunction, gameoverFunction, whenDropBlockNextFunction) { // ... this.time = 0; this.timerId = null; } startGame() { this.setTimer.. 2022. 3. 2.
[테트리스] 22. 키 설정 추가 오늘의 이슈 설정 버튼을 추가하고 설정 버튼을 누르면 레이어팝업이 뜬다. 해당 팝업에서는 현재 사용중인 키 설정을 바꿀 수 있게 한다. 레이어 팝업은 인터넷에서 검색한 코드를 참고하였으므로 생략. 아래에 명시해둔 참고 사이트를 참고바란다. event의 key 는 알아보기 쉬운 문자열 (ArrowUp, ArrowDown...)로 되어있고 keyCode는 아스키코드로 되어있다. 기존에는 내부에서 keyCode로 분기처리를 하였지만 이제 세팅 화면에서 노출해야 하므로 이해가 쉬운 key를 사용하게 바꿨다. 위 아래 왼쪽 오른쪽 최하단 블럭 저장 확인 취소 // /js/setting.js // 디폴트 키코드 세팅 document.getElementById("key-up").value = keyCode.UP; d.. 2022. 3. 1.
[테트리스] 21. 블록 이동, 바닥에 도달했을 때 로직 개선 https://github.com/fpdjsns/Tetris/issues/18 오늘의 이슈. 아주 묵혀있던 이슈를 처리했다. 바닥 도달 시 블럭을 회전했을 때 정상작동하지 않음. 기존에는 (x, y)로 이동할 때, 이동가능한지 체크(1), 가능하다면 해당 좌표로 블럭 좌표 갱신(2), 화면에 출력(3). 을 따로 하고 있었다. 블럭이 바닥에 완전히 도달했을 때 호출되는 함수는 timer에서 콜백함수로 따로 주입받았는데 로직은 아래와 같다. // gamescreen 배열에 nowBlock의 좌표를 세팅 setBlockInGameScreen(nowBlock); // 삭제가능한 행이 있다면 삭제 후 gamescreen 갱신 & 캔버스 그리기 nowBlock.checkRowsAndErase(); // 새로운 블.. 2022. 2. 28.
[개발/운동로그] 3. 데이터 추가 엑셀의 최하단에 데이터 추가하는 화면을 만들 예정. // api/googleSheetApi.js export function postItem (sheetId, sheetName, apiKey, item) { const range = `${sheetName}!A1:D1` const params = { key: apiKey, valueInputOption: 'USER_ENTERED' } const body = { range: range, majorDimension: 'ROWS', values: [item.date, item.isCardio, item.isWeightTraining, item.weight, item.list] } return googleSheetApi.post(`${sheetId}/values.. 2021. 8. 16.
[개발/운동로그] 2. 데이터 폼 수정 테스트용 엑셀 데이터 세팅 일단 쉬운 get만 해보기로. 운동목록, 루틴은 추후 추가 예정인 것들 까먹기 전에 미리 적어뒀다. // store/modules/googleSheet.js export class LogItem { date = '' isCardio = false // 유산소 운동 여부 isWeightTraining = false // 무산소 운동 여부 weight = '' list = '' summary = false OK = 'O' NO = 'X' constructor (item) { this.date = item[0] this.isCardio = this.convertToBoolean(item[1]) this.isWeightTraining = this.convertToBoolean(item.. 2021. 8. 15.
[개발/운동로그] 1. 기본화면만들기, 구글시트연동 운동을 너무 안한다. 운동 열심히 했던때가 엑셀 파일에 오늘 운동 뭐할지 적어두고 한 목록에 동그라미 쳤던 때라 루틴 적고 기록하는 어플 간단히 만들기로 했다. 스피드있고 안이쁘지만 기능은 돌아가게 후딱 만들기가 목표. 건강해지고 싶어라 외장 메모리 항상 끼우고 있는데도 노트북 용량이 너무 부족해서 공장 초기화를 했더니 개발환경 설정을 다시해야했다. Window Vue 개발환경 PowerShell 스크립트 실행 - ExecutionPolicy 누군지는 몰라도 정리를 잘해놔서 포스팅 참고해서 vue 개발환경 세팅했다. ? Project name exercise-log ? Project description A Vue.js project ? Vue build standalone ? Install vue-ro.. 2021. 8. 15.

티스토리툴바