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

사용할 언어: HTML, CSS, Javascript 물리엔진 초기 에너지 에너지를 키다운으로 축적해서 발포, 대포의 색이 붉어진다 공의 무게 무게가 크면 벽을 부술 수도 있다 중력 공에는 지구와 동일하거나 작은 중력이 작용한다 (부서진 벽의 가루가 중력에 의해 떨어진다) 대포 대포가 이동할 수 있다 app.js에 document.addEventListener를 만들고 cannonMove 함수를 만들어 canvas에서 대포가 움직이도록 했다 대포는 각도를 조절할 수 있다 대포의 각도에 따라 포탄이 발사된다 포탄이 발사된다 addEventListener를 통해 'Space'를 누르면 포탄이 발사된다 발사되는 위치는 대포의 위치를 기준하며 포탄 자바스크립트 내부에 벽을 만나면 속도의 값을 -1을 곱해 튕겨나..

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

사용할 언어: HTML, CSS, Javascript 물리엔진 초기 에너지 에너지를 키다운으로 축적해서 발포, 대포의 색이 붉어진다 공의 무게 무게가 크면 벽을 부술 수도 있다 중력 공에는 지구와 동일하거나 작은 중력이 작용한다 (부서진 벽의 가루가 중력에 의해 떨어진다) 대포 대포가 이동할 수 있다 대포는 각도를 조절할 수 있다 대포의 각도에 따라 포탄이 발사된다 (몸체와 발사부를 구분한다) 대포의 움직임일 때 애니메이션 효과가 있다 공의 움직임이 멈추거나 대포가 자신의 포탄에 맞으면 생명이 감소한다

input 사용자의 입력값을 받는다 받는 방식이 다양하기 때문에 type속성으로 분류한다 Javascript 입력하는 곳이기에 focus 관련한 이벤트들이 존재한다 input 태그 다루기 input.value 입력된 값을 반환 HTML input type=" " text 텍스트를 입력하는 창 placeholder="미리 입력" password 비밀번호 입력하는 창 autofocus : 자동커서 button 일반 버튼 size="20" 입력폼 길이 checkbox 체크박스 maxlength="10" 글자 수 제한 hidden 사용자에게 안보이지만 서버 전송 list="리스트" 미리 리스트 생성 Javascript input 관련 이벤트 (e.type) focusin 요소에 포커스가 되었을 때 focusou..

window.scrollY를 활용하자 어느 일정 구간을 스크롤하면 '버튼'이 만들어지도록 한다 상수를 정하고 window.scrollY가 그 값을 넘으면 버튼이 생기는 방식이다 const STANDARD = 40; if (window.scrollY > STANDARD) { // 스크롤이 40px을 넘었을 때 toTop.classList.add('go_top'); //go_top이라는 버튼 생성 lastScrollY를 통해 스크롤의 방향을 추적한다 lastScrollY는 이전 내가 스크롤한 기록이다 그렇다면 현재 스크롤의 위치와 비교해서 이용자의 스크롤 방향을 알아낼 수 있다 스크롤을 내릴 때 위 메뉴바가 사라지고 스크롤을 올릴 때 위 메뉴바가 뜨도록 만든다 if (window.scrollY > lastS..

setTimeout(함수명, 밀리초); *주의점: setTimeout이 실행시키는 함수로 클래스 값을 지울 때 e.target이 아닌 querySelector사용 밀리초 후에 함수를 실행한다 function event2(){ document.querySelector('.change').classList.remove('change'); //event2는 change 클래스를 찾아 change를 지운다 } function event1(e){ e.target.classList.add('change'); setTimeout(event2,500); //500밀리초 후에 event2 실행 } 마우스 버튼 이벤트: MouseEvent.button 마우스 왼쪽 버튼 = 0 마우스 휠 = 1 마우스 오른쪽 버튼 = 2 ..

element.addEventListener(event, handler); onclick 이벤트는 새로운 이벤트를 할당할 때 덮어씌워지는 단점이 있다 const btn = document.querySelector('#btn1'); btn.onclick = function(){ console.log("Hello"); } btn.onclick = function(){ console.log("Bye"); }//btn버튼의 결과값은 Bye가 나온다 이런 문제를 줄이기 위해 addEventListener를 사용한다 function event1(){ console.log("Hello"); } function event2(){ console.log("Bye"); } btn.addEventListener('click'..