목록javascript (8)
고딩개발자
이번에는 저번에 만들던 똥게임을 완성해보자!! 저번 시간에는 게임에 필요한 객체들을 모두 생성하고 그 객체들에 대한 설정을 해주었다.그러면 이번에는 실제로 게임을 실행하는 코드(충돌 체크)등을 짜보자. 먼저 게임종료와 게임 실행 여부 체크를 위해 gameover라는 변수를 만든다.게임종료 되었을때는 true를, 그냥 실행중일때는 false를 넣어준다.처음은 게임을 실행해야 하기 때문에 gameover변수에 false를 넣는다. let gameover = false; 이제 run()함수를 보자. if (gameover) { //배경색 변경 context.fillStyle = 'black'; context.fillRect(0, 0, canvas.width, canvas.height); context.font..
이번에는 이벤트 객체를 이용하여 사용자에 반응하는 코드를 짜보자. 브라우저 내에서 일어나는 것들, 예를들어 마우스로 클릭하기 마우스 움직이기 드래그하기 키보드 입력 등등을 이벤트라고 부른다. 이벤트리스너라는 함수를 통하여 이런 이벤트들이 발생했을 때 특정한 코드를 실행해 줄 수 있다. 그 중에서도 이번에는 onmouseover()과 onmouseout()을 이용하여 p테그에 마우스를 올리고 안올리고에 따라 배경색이 바뀌는 코드를 짜보겠다. 이렇게 이벤트 처리를 해주는 것은 테그 내(p테그 안)에서 해줄수도 있고 따로 함수를 만들어서 처리할 수도 있다. 그중에 먼저 p테그안에서 이벤트 처리를 해주는 코드를 보자. 마우스 올리세요 이렇게 onmouseout(마우스를 올리고 있지 않을 때)의 상황일때는 배경색..
이번에는 DOM트리에 동적으로 객체를 생성해 보자. DOM이란 무엇일까? 웹 페이지 자체는 하나의 문서로 볼 수 있다. 그리고 그것을 DOM객체라고 부른다. 즉 DOM 은 웹 페이지의 객체 지향 표현이다. 따라서 DOM객체에 정의되어있는 프로퍼티들과 메소드들에 접근하여 웹페이지를 다룰 수 있다. 그중에서 이번에 우리는 createElement(), appendChild(), removeChild()이라는 메소드들을 사용해 보겠디. -createElement() : 인자에는 테그의 이름이 들어가며 새로운 요소를 생성할 수 있다.사용 예 → createElement("img");-appendChild() : 인자에는 생성할 요소를 담고있는 변수의 이름이 들어가며 부모와 상속하여 실질적으로 웹 페이지에 나타내..
이번에는 저번시간에 했던 것들을 바탕으로 간단한 똥피하기 게임을 만들었다. 먼저 게임에 대한 간단한 설명을 하겠다.화면의 꼭대기에서 똥이 여러방향으로 떨어진다. 그리고 플레이어는 방향키를 이용하여 똥을 피해다닌다.똥이 화면의 바닥까지 갈때까지 똥에 닿지 않으면 점수가 올라간다. 게임화면의 모습이다. 만약 플레이를 하다가 똥에 부딫히면 게임이 종료된다. 그렇다면 이 게임의 코드를 살펴보자. 이번에는 먼저 게임에 나오는 캐릭터와 장애물을 생성하고 처리해 보자. 먼저 게임을 플레이할 화면(저 분홍색 영역)을 캔버스에 그려준다.그 다음 GameObject라는 객체를 생성한다. 이 객체는 이 게임에서 생성되는 모든 게임캐릭터들을 생성할 때 사용할 기본틀이다. function GameObject(src, width..
javascript를 이용한 미니프로젝트로 뽑기 시스템을 만들어 보았다. 요즘 물론 나도 포함하여 결정장애를 가진 사람들이 많다. 그런 사람들을 위해서 뽑기 시스템을 만들었다!! 먼저 메인페이지는 이렇다. 저 상태에서 할거야라는 버튼을 누르면 prompt를 통해 "몇 개 뽑을거야?"라는 메세지 창이 뜬다. 이 prompt창에 내가 몇개 중에 고를 것인지 입력하면 내가 입력 한 만큼의 div가 생성된다. div를 생성하는 방법은 prompt에서 받은 값을 int형으로 변환하고, 그 만큼 for문을 돌리면서 createElement함수를 이용하여 새로운 div와 text input을 생성하는 것 이다. 생성된 text에 원하는 값들을 입력하고 이제 뽑아줘라는 버튼을 누르면 for문을 돌면서 그 칸이 비어있는..
이번에는 실제로 사용자에게 입력을 받고 그에따라 애니메이션을 주는 법을 알아보자. 만약 한 곳에 이미지를 넣어놓고 그것에 해당하는 이미지를 계속 바꾸고 싶다면 어떤 방식을 사용하는 것이 좋을까? 여러가지 방법 중에 하나의 이미지 객체를 생성해서 그 객체에 접근해 가로와 세로 사이지와 같은 정보들을 바꾸거나 이미지를 바꾸는 방식을 사용해보자. const image = new Image(); image.src = 'pingu.jpg';이렇게 새로운 image 객체를 생성할 수 있다!! 마찬가지로 배열도 이런 방식으로 생성할 수 있다. 이렇게 let array = [];와 let array = new Array();이 두가지는 똑같은 의미이다. 그렇다면 제일 먼저 생성한 사진을 브라우져에 띄워 보자. java..
그럼 이제는 나중에 게임에 등장할 캐릭터를 그리기 위해 화면에 그림그리는 연습을 해보겠다. 그럼 먼저 javascript파일을 html파일에서 링크하고 그림을 그릴 종이가 될 canvas를 생성하는 법을 알아보자. canavs생성과 script의 링크는 이렇게 해주면 된다. canvas를 만들때는 꼭 id와 가로, 세로값을 지정해 주어야 한다. class를 지정해 주고 script에서 class를 가져올 수도 있지만, class는 중복될 수 있기 때문에 id를 사용하는 것이 좋다. html파일에서는 위와같이 생성해 주고, 그럼 script에서는 어떻게 해주어야 할까? let canvas = document.getElementById("mycanvas");//html의 id를 가져오는 법 let conte..
이번시간에는 게임프로그래밍에 필요한 javascript의 기본적 내용을 알아볼 것이다. c에서는 int형, double형, char형 등등 여러가지 자료형이 있고, 내가 선언하고자 하는 값의 자료형에 맞게 선언해야 하지만 javascript는 var또는 최근에 나온 let이라는 자료형을 사용하며 문자열, 상수, 배열 등등 모든것을 선언할 수 있다. var와 let말고도 const라는 자료형이 있는데 이것은 상수라는 뜻으로 선언할 때 빼고는 그 값을 바꿀 수 없다. 따라서 절대 변하지 말아야 하는 값들을 선언할 때 주로 쓴다. 그럼 javascript에서 사용하는 8가지 변수 타입을 알아보자. //var에 들어갈 수 잇는 자료형 var n = 0; //숫자, number var s = "abc"; //문자..