본문 바로가기

테트리스 개발 일기8

[JavaScript] 테트리스 웹 게임 만들기 (8) 스타일 및 효과음 테트리스 웹 게임 만들기 (8) 효과음 및 스타일 1. 스타일 설정 배경 이미지를 직접 작업을 해서 만들었다. 이미지를 backgrounnd 이미지로 설정을 해주고 나머지 css 스타일링을 했다. * { margin: 0; padding: 0; } body { display: flex; justify-content: center; height: 100%; background-color: white; min-width: 800px; } .container { background-color: sandybrown; background-image: url(./img//background.png); background-size: cover; width: 700px; height: 700px; margin: 3em.. 2022. 3. 12.
[JavaScript] 테트리스 웹 게임 만들기 (7) 기능 마무리 테트리스 웹 게임 만들기 (7) 기능 마무리 1. 점수 설정 동시에 1개의 블록을 없앴을 때 : 1점 동시에 2개의 블럭을 없앴을 때 : 2배 = 4점 동시에 3개의 블력을 없앴을 때 : 3배 = 9점 동시에 4개의 블럭을 없앴을 때 : 4배 = 16점 생성자에 score과 DOM요소를 추가해준다. constructor() { ... this.score = 0 this.scoreScreen = document.querySelector('.score') ... } 기존의 breakBolock에서 블록 한 줄이 없어질 때마다 s를 1씩 더해주었고 해당 s의 보너스 점수를 부여한다음, 현재 score에 반영하고 innerText를 바꿔줬다. breakBlock() { let s = 0 const tr = th.. 2022. 3. 3.
[JavaScript] 테트리스 웹 게임 만들기 (6) 블록 부수기 테트리스 웹 게임 만들기 (6) 블록 부수기 1. 일정 시간마다 한 칸씩 이동 설정 우선, duration을 설정해주는 일정 시간을 점점 줄여주는 setSpeed함수를 정의한다. 처음 duration은 1000ms부터 시작해서 최소 120ms까지 20ms씩 줄여나갈 것이다. 처음엔 레벨 1이고 MAX레벨 45까지 증가하도록 해줬다. setSpeed() { if (this.duration { this.time += 1 if (this.time % 5 == 0) { this.setSpeed() } }, 1000) ... } 새로 블록을 만들때, 기존의 인터벌을 없애고 새로운 downInterval을 설정해준다 makeNewBlock() { ... clearInterval(this.downInterval) t.. 2022. 2. 20.
[JavaScript] 테트리스 웹 게임 만들기 (5) 블록 체크 테트리스 웹 게임 만들기 (5) 블록 체크 1. 기존의 호출했던 renderBlock을 checkNextBlock으로 바꿈 기존의 바로 renderBlock을 해주던 것을 checkNextBlock을 거쳐서 renderBlock을 해주기 위해 전부 checkNextBlock으로 바꿔준다. 전체 코드는 아래와 같이 바뀌게 된다. // js/tetris.js 'use strict' import Blocks from './blocks.js' export default class Tetris { constructor() { //setting this.N = 20 this.M = 10 this.downInterval = undefined //block this.blockInfo = undefined //dom t.. 2022. 2. 18.
[JavaScript] 테트리스 웹 게임 만들기 (4) 블록 이동 및 전환 테트리스 웹 게임 만들기 (4) - 블록 이동 및 전환 1. 이벤트 정의 테트리스 js의 생성자에 다음 이벤트를 추가했다. 위에서 3개는 좌,우,하 로 블록 이동이고, 이어서 방향전환(위), 블록드랍(스페이스바)이다. //events document.addEventListener('keydown', (e) => { switch (e.keyCode) { case 39: this.moveBlock('m', 1) break case 37: this.moveBlock('m', -1) break case 40: this.moveBlock('n', 1) break case 38: this.changeDirection() break case 32: this.dropBlock() break default: break .. 2022. 2. 15.
[JavaScript] 테트리스 웹 게임 만들기 (3) 블록 정의 및 렌더링 테트리스 웹 게임 만들기 (3) - 블록 정의 및 렌더링 1. 블록 정의 이제 블록의 모양을 지정할 차례이다. 정의하기 전에 좌표를 설정하기 위해서 블록들을 그렸다. 이후 아래와 같이 블록 객체에 각 블록의 이름을 지정해주고 블록의 위치인 2차원 배열을 할당해주었다. // js/block.js const blocks = { square: [ [ [0, 1], [0, 2], [1, 1], [1, 2], ], [ [0, 1], [0, 2], [1, 1], [1, 2], ], [ [0, 1], [0, 2], [1, 1], [1, 2], ], [ [0, 1], [0, 2], [1, 1], [1, 2], ], ], I: [ // ... ], L: [ // ... ], L2: [ // ... ], Z: [ // ... 2022. 2. 11.
[JavaScript] 테트리스 웹 게임 만들기 (2) 테트리스 게임 판 테트리스 웹 게임 만들기 (2) - 테트리스 게임 판 1. html 코드가 길지 않아서 죄다 div태그를 썼다 전체 컨테이너 안에 popup, spped, 게임 화면, 다음 블록을 만들어 줬다. 게임 화면 안에는 score, 메인 게임이 표시될 table이 있다. 추가로 main.js와 style.css를 연결해줬다 게임종료 다시시작 SPEED score 0 2. css 설정 우선 게임 종료 시 나올 popup창은 display:none을 해주고 보기 좋게 정렬만 해주었다. /* style.css */ * { margin: 0; padding: 0; } body { display: flex; justify-content: center; height: 100%; background-color: white;.. 2022. 2. 9.

티스토리툴바