Software Engineering/Web Engineering (4) 썸네일형 리스트형 [Web Game] 달려라 르탄이 웹 게임 만들기 이번 글에서는 스파르타 코딩클럽에서 무료로 제공하는 르탄이 달리기 게임 개발 과정을 기록해보려고 한다. HTML, CSS, JavaScript를 사용해 간단한 게임을 개발하며 웹 개발의 기본기를 다질 수 있는 좋은 기회가 되었다. 개발 도구로는 VS Code를 사용했으며, 기본적인 웹 기술들을 활용해 게임을 구현해 나가는 실습을 해볼 예정이다.이번 프로젝트는 JavaScript로 게임의 동작을 제어하고, CSS를 통해 게임 화면의 스타일을 꾸미며, HTML로 게임의 구조를 구성하는 방식으로 진행된다. 이 과정에서 화면 요소를 움직이게 만드는 방법, 사용자 입력에 반응하는 방법, 스타일과 애니메이션을 적용하는 기법 등을 학습할 수 있었다. HTMLHTML 파일에서는 페이지의 기본적인 레이아웃을 구성하고, .. [JS - 코드팩토리] 3일차: 연산자 연산자대부분의 언어에서 같은 기호를 공유하기 때문에 js의 특이점 위주로 정리했다.캐스팅let sample = '99';console.log(+sample); //99console.log(typeof +sample); //numberconsole.log(1 + sample); //100sample = '안유진';console.log(+sample); //NaN보통 다른 언어들은 변수를 정수 자료형 따로 문자 자료형 따로 선언하지만, js는 그런 구분이 없다. 따라서 별도의 캐스팅 없이 '99' + 1 을 실행하면 100이라는 결과가 나온다. 단, 형 변환에 실패하면 NaN이 출력된다.비교 연산자console.log( 5 == '5'); //trueconsole.log( 5 === '5'); //false.. [JS - 코드팩토리] 2일차: hoisting hoisting자바스크립트에서 변수 선언과 함수 선언이 코드 실행 전에 해당 스코프의 최상단으로 끌어올려지는 동작.코드 작성 순서와 상관없이 변수와 함수의 선언이 실행 전에 미리 처리.변수의 선언만 끌어올려지며, 초기화는 실제 코드가 실행될 때 이루어짐.var 변수로 선언할 때console.log(name);var name = '코드팩토리';console.log(name);출력: undefined , 코드팩토리첫 번째 console.log(name): 여기서 변수를 선언하기 전에 console.log(name)을 호출했지만, JavaScript의 호이스팅으로 인해 에러가 발생하지 않고 undefined가 출력됩니다.호이스팅은 JavaScript 엔진이 변수 선언을 코드의 상단으로 끌어올리는 동작입니다. .. [JS - 코드팩토리] 1일차: 출력과 자료형 기본 출력console.log('Hello World');console.log(codefactory, '\n', $ive, '\n', _yuJin);모든 언어에 기본적으로 있는 print문이다. 특이하게 vs code의 output에서 출력을 볼 때는 왼쪽 사진과 같이 문자 왼쪽에 바가 생겨 있었다. 다른 곳에서 출력해도 이와 같은 모양이 나올지는 잘 모르겠지만, 아마 vs code의 특이점으로 사료된다. GPT가 말하기로는 위 코드의 2번 라인과 같이 출력을 할 때와 console.log을 여러 번 사용했을 때의 차이는 없다고 했지만 GPT를 믿을 수가 없어서...^^자료형동적 타이핑var age = 32;let ive = '아이브';const newJeans = '뉴진스';다른 언어에서 int, fl.. 이전 1 다음
