자바스크립트포트폴리오 3

Cannon Game_day4 (2021.09.29)

해결해야할 사항들 에너지를 키다운으로 축적해서 발포, 대포의 색이 붉어진다 부서진 벽의 가루가 중력에 의해 떨어진다 공의 무게가 크면 벽을 부술 수도 있다 대포의 몸체와 발사부를 구분한다 대포의 움직임일 때 애니메이션 효과가 있다 공의 움직임이 멈추거나 대포가 자신의 포탄에 맞으면 생명이 감소한다 스테이지와 벽돌 스테이지: 벽돌의 위치가 저장되어 있는 곳이다 벽돌의 위치를 크롬창을 띄우면서 좌표값을 하나하나 입력하는 것은 너무 비효율적이었다. '쉽게 스테이지를 만들어갈 수는 없을까?'를 고민했고 자바스크립트 게임들의 코딩을 조사하면서 해답을 얻게 되었다. 키워드는 2차배열과 반복문이었다 this.walls =[ [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1], [..

Cannon Game_day3 (2021.09.28)

물리엔진 초기 에너지 초기에너지 E를 변수로 받아 총 에너지를 이용해 물체의 운동을 설명하기는 어려웠다. 구상은 이러했다 1) 현재 물체의 높이와 속도를 받아 에너지의 총량을 계산 2) 벽에 부딪힐 때 에너지의 총량이 감소(마찰력에 의한 에너지) 3) 감소한 에너지에 이전 위치에너지를 빼고 비율에 맞춰 속도를 다시 부여 더 여러 기능이 생기면 만들어봐야겠다 에너지를 키다운으로 축적해서 발포, 대포의 색이 붉어진다 공의 무게 무게가 크면 벽을 부술 수도 있다 중력 공에는 지구와 동일하거나 작은 중력이 작용한다 포탄의 y속도는 draw메소드 내에서 프레임마다 중력가속도의 40분의 1만큼 감소한다 draw(ctx, stageWidth, stageHeight){ //중력가속도 this.vy += this.g/4..

Javascript: 게임 개발의 기초

1. 준비하기 CSS와 Javascript에 연결하기 HTML: 태그 canvas는 width와 height속성을 사용할 수 있는 요소로 드로잉 영역을 생성한다. 간단한 게임을 만들 때 게임이 작동하는 공간으로 사용된다. HTML에 요소를 만들었으니 자바스크립트에도 연결해주어야 한다 var canvas = document.getElementById("canvas"); 는 처음에 비어있는 도화지와 같다. 그림을 그릴 연필과 크레파스(도구)를 같이 불러와야 한다 .getContext('2d'); 메소드를 통해 2차원 랜더링의 함수(도구)에 접근할 수 있다 var ctx = canvas.getContext('2d'); 캔버스의 크기를 정해준다 canvas.width=window.innerWidth - 100;..

Study/Javascript 2021.09.27