Devjo의 코딩

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

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

2021 10 24 업데이트 HTML 세팅 1) HTML의 기본 골격을 사용한다. html / head /body 2) meta태그는 속성을 세가지를 사용한다 charset / http-equiv / name ="viewport" 3) CSS와 js연결. script 속성으로 type="module"을 추가함으로 import와 export를 이용해 더욱 객체화한다 4) canvas를 HTML에 만들지 않는다 는 서로 호환성이 다른 경우에 인터넷 익스플로러(IE)버전 중 가장 최신으로 보여주게 해준다. 쿼크모드라고도 한다 meta viewport는 애플이 디바이스 화면크기에 따라 크기를 조절하기 위해 만들었다. content 내에 설정값을 적어주며 쉼표(,)로 구분한다. width = device-widt..

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;..