지니리 개발일지

저번 벽돌깨기 게임에 이어서 몬스터 탈출 게임을 4차에 걸쳐 만들기로 했다. 🚪🏃🏻‍♀️ 👻 1차 버전에서는 맵/ 타일/ 플레이어/ 탈출구를 생성하였다. 맵·타일 생성 - 9*9 타일을 가진 맵 생성. - 2차원 배열과 class타입으로 작성. monsterGame.js // 캔버스 생성 const canvas= document.getElementById("myCanvas"); const context = canvas.getContext("2d"); // 타일(class 타입으로 생성) class Tile { constructor(left, top, right, bottom, color) { this.left = left; this.top = top; this.right = right; this.bott..

벽돌 생성 공 - 패들, 공 - 벽돌 충돌처리 게임 클리어, 게임 오버 처리 const canvas = document.getElementById('myCanvas'); const context = canvas.getContext('2d'); // 벽돌 관련 const brickWidth = 50 // 가로벽돌 간격 10 const brickHeight = 25; // 세로 벽돌 간격 5 const brickColumn = 5; // 5열 const brickRow = 4; // 4행 let bricks = [] let brickCount = brickRow * brickColumn; // 볼 관련 const arcRadius = 20; let arcPosX = canvas.width / 2; let a..

Javascript를 이용해서 벽돌깨기 게임을 만들었다. 게임이라고 해서 당황스럽고..😣 어디서부터 접근해야 할지도 당황스러웠는데😩 하나하나 접근하다 보니 완성할 수 있었다.💃🏻 아래 두 가지를 유의해서 만들어 보자! 완성된 최종 코드는 제일 아래에 있음! 변화를 주고 싶은 것을 변수로 지정. 함수 하나에 여러 가지 기능이 섞여있는 것보다 나눠주는 게 좋음. 캔버스 생성 - HTML에 가로와 세로가 400px인 캔버스를 생성한다. - rect : 직사각형(rectangle) 크기 설정. 0, 0으로 브라우저의 좌상단에서 시작, canvas의 width, height로 크기 설정 game.html (html 파일 작업은 끝) game.js const canvas = document.getElementByI..

난수(Random Number)란 정의된 범위 내에서 무작위로 추출된 수를 일컫는다. 자바스크립트의 내장 객체로 수학에서 자주 사용하는 상수와 함수들을 미리 구현해 놓은 Math가 있다. 그리고 수학적 작업을 손쉽게 할 수 있도록 Math 메소드를 사용해서 아래와 같이 난수(random number)를 구할 수 있다. let randomNum = Math.random(); console.log(randomNum);// 0.0 ~ 1.0 사이의 랜덤한 값(난수) 난수 생성할 때 쓸 수 있는 Math 메소드는 아래와 같다. 그 외 Math에는 min, max 등 다양한 메소드가 있다. Math.random() - 0보다 크거나 같고 1보다 작은 랜던숫자 반환. Math.floor() - 소수점 이하 버림 M..

숫자형(Number) 숫자 형태로 이루어진 자료형이다. 평소 우리가 사용하는 건 10진수이다. 2진수, 8진수, 16진수에 대해 알아보고 어떻게 사용하는지도 알아보자. 2진수 0b 0000 0000 2진수는 위와 같은 형태로 사용한다. 0은 숫자 표현이라는 형식적인 느낌이고 b는 binary를 뜻한다. 0 b 0 0 0 0 0 0 0 0 128 64 32 16 8 4 2 1 ex) 10진수 255를 2진수로 0b 1111 1111/ 10진수 179는 2진수로 0b 1011 0011로 나타낼 수 있음. 8진수 0o00 8진수는 위와 같은 형태로 사용한다. 0은 숫자 표현이라는 형식적인 느낌이고 o는 octal를 뜻한다. 0 o 0 0 0 64 8 1 ex) 10진수 255를 8진수로 0o377/ 10진수 ..

변수(variable)는 데이터를 저장할 때 쓰이는 '이름이 붙은 저장소'이다. 보통 프로젝트를 진행할 때 변수명에 대해 규칙을 정해야하는데 아래와 같은 방법들이 있다. 변수명 규칙 1. 알파벳, -, -, 숫자로 작성한다. 한글, 특수문자, 일본어 등은 문법적으로 가능하지만 권장 x 숫자가 제일 앞에 올 수 없다. 2. Camel 표기법 (구글 권장) 낙타라는 의미를 가지고 있으며 소문자로 시작해 2번째 단어부터는 대문자로 작성한다. ex) let myVeryLongLongName; 3. 대소문자로 구분한다. let myVeryLongLongName; let MyVeryLongLongName; (Pascal 표기법) 변수 타입 var 가장 오래된 버전에서 사용하는 변수 타입 가변성, 중복선언의 문제가 ..

Javascript를 실행하는 2가지 방법이 있다. 1. html 파일 내에서 html 파일 내에서 태그 안에 직접 자바스크립트 코드를 작성하게 될 때 제일 밑부분에 작성하는 것이 좋다. body 안에 다른 html, css코드가 렌더링 되기 전에 자바스크립트 코드가 실행되면 렌더링 오류가 날 수 있기 때문이다. 또한 HTML이 만들어질 때 같이 컴파일 되고 메모리 할당도 같이 진행돼서 한 번에 처리하는데 시간이 오래 걸린다. 2. js파일을 불러오는 방법 따로 파일을 js 파일을 불러오면 한 번에 컴파일해서 페이지를 보여주고 순차적 자바스크립트 코드가 실행된다. 그래서 프로젝트가 커지면 자바스크립트 파일을 따로 가져오는 게 좋다.