본문 바로가기

Ecmascript/Canvas

 (7)
[테트리스 만들기] 점수와 난이도, 게임 종료/중지 하드드랍 안전장치 space를 눌러서 블록을 내릴때 가끔 발생하는 에러 해결 현재 블록이 하드드롭인 상태일때는 x축 y축을 변경 못하는 코드를 추가하자 class Piece { hardDropped; spawn() { // ... 기존 코드 this.hardDropped = false; } move(p) { if(!this.hardDropped){ this.x = p.x; this.y = p.y; } this.shape = p.shape; } hardDrop(){ this.hardDropped = true; } } //*** main.js // 스페이스 누를 경우 하드 드롭 if (event.keyCode === KEY.SPACE) { while (board.valid(p)) { account.score..
[테트리스 만들기] 테트리스 기능 구현(다음 블록 생성, 한줄 채우면 사라지고 점수 증가) 고정하기 테트리미노 화면 바닥에 닿으면 조각을 고정하고 새로운 조각을 생성해야 한다. 먼저 조각을 고정하는 freeze() 함수 생성해서 테스트 //*** board.js class Board { grid; // 보드 그리드 piece; // 현재 조각 객체 // ... 기존 코드 drop() { let p = moves[KEY.DOWN](this.piece); if (this.valid(p)) { this.piece.move(p); } else { // 유효한 공간이 아니면 못움직이게 고정 this.freeze(); if (this.piece.y === 0) { // Game over return false; } } return true; } freeze() { this.piece.shape.forEa..
[테트리스 만들기] 레이아웃부터 모션까지 제작 자바스크립트로 만든 테트리스 https://medium.com/@michael.karen/learning-modern-javascript-with-tetris-92d532bcd057 위의 블로그 내용 보고 했지만 빼먹은거 엄청 많고 잘못 타이핑한 부분도 있으니 참고만 할 것 위의 블로그 내용을 각 단계별로 직접 분석하면서 작동 확인하면서 만들면서 커밋했으니 아래 내용들은 실행 잘됨! 단계별로 만들고 커밋한 내용은 아래 깃헙에 올렸으니 참고 https://github.com/ds2lvg/JSwithTetris 사용하는 자바스크립트 ES6 문법 Classes, Arrow functions, Spread operator, Let and const, Default parameters, Array.from(), ..
캔버스와 비디오 캔버스 drawImage()에 넣을수 있는 인자들 이미지 비디오 캔버스 비디오 태그 비디오 태그 속성 autoplay: 자동재생 muted: 음소거 loop: 자동반복 전용 이벤트리스너 'canplaythroug' : 재생할 수 있을때 실행 크롬은 소리 있는 영상은 자동재생을 못하게 되어있음 Video 이 브라우저는 캔버스를 지원하지 않습니다. 비디오 객체와 폰트 글씨를 렌더링 하는 메서드: fillText(글씨, x, y) 비디오 Dom객체의 currentTime 속성 : 현재 재생 시간 const canvas = document.querySelector('.canvas'); const ctx = canvas.getContext('2d'); ctx.font =..
캔버스 #01 애니메이션 중지, 이미지 캔버스 애니메이션 멈추기 return 이용, 내부에서 실행할때 cancelAnimationFrame 이용, 외부에서 실행할때 clearInterval, setInterval로 구현시 function draw() { count++; if(count%30 === 0){ // 기존 원 지우기 : 빼먹으면 잔상 다 그려짐 context.clearRect(0, 0, canvas.width, canvas.height); context.beginPath(); // 새로 원 그리기 context.arc(xPos, 150, 5, 0, Math.PI*2, false); context.fill(); xPos += 5; } // $1. 애니메이션 멈추는 방법 -> return 이용, 내부에서 실행할때 if(xPos >= ca..
캔버스 #01 그리기와 애니메이션 원리 캔버스 사이즈 설정 캔버스 태그의 크기는 css가 아닌 속성으로 넣어줘야 정확하다. 레티나 디스플레이에서 또렷하게 보이게 하기 위해 속성으로 크기 2배로 설정하고 CSS로 절반으로 줄여서 만드는 방법이 가능하다. ex) 풀사이즈라면 윈도우 사이즈를 구해서 2배로 하고 CSS로 100%를 준다. 색 fillStyle = 'color' 그릴 도형에 칠할 색을 선택 색상명 규칙은 CSS와 동일(name, rgba, #16진수) 도형을 그리기전에 먼저 붓에 물감은 바른다는 개념으로 이해 할 것 fillRect(x, y, width, height) 색칠한 도형을 그린다. 이전에 색을 고르지 않았다면 기본색은 black clearRect(x, y, width, height) 색칠한 도형에 색을 지움 strokeRe..
캔버스 기초 HTML5에 추가된 그림을 그릴 수 있게 해주는 태그 자바로 Graphic2D 였나? 그래프 그리는걸 한적이 있는데 문법이 상당히 비슷하면서 자바스크립트라 더 간결하다. 주말에 공부하기 귀찮을때 캔버스 가지고 놀 생각이다. 다음에 볼 강의 https://www.youtube.com/watch?v=JFQOgt5DMBY&list=PLe9WXHRkq9p2Yl0z2zskv-FhP5sinISTc canvas 태그를 만들고 크기를 정해준다 각 기능을 실행할 버튼 태그 추가 네모 그리기 원 그리기 선 그리기 도형 그리기 캔버스로 그림을 그리는 것은 context 객체를 가져오는것부터 시작된다. fillRect, clearRect, strokeRect으로 간단히 사각형을 만들 수 있다. function drawRect..

티스토리툴바