본문 바로가기

Project43

[테트리스] 2. 벽면 경계 처리, 0.5초간격 떨어지는 블럭 2018. 7. 24. // 캔버스 경계 구하기 var canvas = document.getElementById('game'); const WIDTH = canvas.clientWidth; const HEIGHT = canvas.clientHeight; const CANVAS_LEFT = canvas.clientLeft; const CANVAS_RIGHT = canvas.clientLeft + WIDTH; const CANVAS_TOP = canvas.clientTop; const CANVAS_BOTTOM = canvas.clientTop + HEIGHT; // 5초 간격으로 아래로 움직이는 블럭 setInterval(function(){ nowBlock.drawBlock(nowBlock.x, nowB.. 2019. 8. 27.
[테트리스] 1. 사각형, 화살표 이동 2018. 7. 23. // 블럭 하나 관련 코드 // 블럭 타입 7가지 var blockType = [ {name : 'I', color : 'red'}, {name : 'L', color : 'green'}, {name : 'J', color : 'blue'}, {name : 'T', color : 'yellow'}, {name : 'O', color : 'skyblue'}, {name : 'S', color : 'gray'}, {name : 'Z', color : 'purple'}, ] // 새로운 블럭 세팅 var nowBlock; var BEGIN_X = 30; var BEGIN_Y = 50; var drawNewBlock = function(blockTypeIndex){ nowBlock = n.. 2019. 8. 27.
[TODO] Google Login (OAuth) 이제 등록한 todo를 실제로 구글 시트에 추가해보자. 참고 : Google sheet API 안내 POST https://sheets.googleapis.com/v4/spreadsheets//values:batchUpdate?key= 등록하는 API는 위와 같다. key는 이전과 같이 파라미터에 추가해서 인증에 사용했다. 일단 잘되는지 postman으로 테스트해봤다. { "valueInputOption": "USER_ENTERED", "data": [ { "range": "!A5:C5", "majorDimension": "ROWS", "values": [ ["Test_Id", "Test_name", "Test_Todo"] ] } ] } request body는 위와 같이 세팅했다. A5:C5 위치에 T.. 2019. 4. 10.
[TODO] todo 추가하기 // src/components/Todo/index.ts // ... export default class Todo extends Vue { // Style styleTable: object = { borderCollapse: 'collapse', padding: '10px', border: '2px solid #ddd', borderTop: '3px solid #fb7399', } styleThead: object = { color: '#fb7399', background: '#f7e6ec', textAlign: 'center', } styleTbody: object = { color: '#0094D7' } styleTh: object = { padding: '5px', } } // src/compon.. 2019. 4. 8.
[TODO] table, Style object 기존 이미지 오늘은 스타일을 조금 수정했다. name todo {{item.name}} {{item.todo}} 기존에 쓰고 있던 태그 대신 태그를 사용했다. 그리고 태그도 추가했다. 아직 어떻게 쓸지 정확하게 생각하진 않았는데 필요할거 같아서 일단 넣음. //src/components/Todo/Todo.html // Style styleThead: object = { color: 'red' } styleTbody: object = { color: 'blue' } css에 대한 욕심이 있어서 bootstrap을 쓸까 하다가 일단 직접 해보기로 했다. css 적용 어떻게 하는지 몰라서 적용되는지 테스트만 해보려고 color 값만 줬다. vue에서는 style을 위처럼 객체로 사용해서 바인딩해서 쓸 수 있다.. 2019. 3. 28.
[TODO] favicon 이미지 추가 favicon을 찾을 수 없다는 에러 발생.파비콘 생성기 웹사이트에 들어가서 파비콘 이미지를 만든다. 만든 파비콘 이미지 이름을 favicon.png로 바꾸고 프로젝트의 루트 위치에 놓는다. 12345678// webpack.config.js plugins: [ new HtmlWebpackPlugin({ vue: true, favicon: 'favicon.png'//add )}}),cswebpack 설정 파일의 HtmlWebpackPlugin에 favicon을 추가한다. 빌드 후 결과를 보면 파비콘 이미지가 잘 동작하는 것을 확인할 수 있다. 참고 깃허브 : add favoicon.png 2019. 3. 25.

티스토리툴바