키보드 입력값을 브라우저 화면에 출력하는 예제를 만들어본다.
키보드로 게임을 조작하기 위한 필수 동작이다.
1. 웹 문서 만들기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>키보드 이벤트 나타내기</title>
<script src="keyboardEvent.js"></script>
</head>
<body>
<canvas id="canvas"
style = "position: absolute; top: 0px; left: 0px;">
캔버스 호출 오류 입니다.
</canvas>
</body>
</html>
웹 문서를 먼저 만든다.
여기서는 자바스크립트를 연결하고, 캔버스를 만든다.
주요 코드는 자바스크립트에서 해결하고, 사실 이 웹 페이지는 껍데기이다.
캔버스라는 것은, HTML에서 자바스크립트와 연동하여 그림을 그려줄 수 있는 도화지라고 간단히 생각하자.
캔버스의 컨텍스란 도구를 이용해서 도형과 이미지, 텍스트 등도 그릴 수 있다.
우선은 자세한 이론보다는 웹 페이지에 그림판을 하나 불러왔다고 생각한다.
그리고, 이 그림판에 우리는 게임을 동작하게 할 것이다.
캔버스는 엘리먼트에서는 스타일 값을 하기처럼 주었다.
캔버스 크기와 브라우저에서의 위치 값이다. 800*600 크기이고 왼쪽 상단 0,0 좌표에서부터 그린다는 뜻이다.
(참고로 캔버스는 id 와 width, height 가 필수 값이다.)
<canvas id="canvas" width="800" height="600"
style = "position: absolute; top: 0px; left: 0px;">
캔버스 호출 오류 입니다.
</canvas>
HTML에서 자바스크립트를 호출(연동) 하는 방법은 하기 코드로 가능하다.
키보드 이벤트를 먼저 컨트롤하는 연습을 해야기 때문에 이름을 이렇게 지어보았다.
<script src="keyboardEvent.js"></script>
다음 편에서는 자바스크립트 코드를 작성해 본다.
자바스크립트 키보드 입력값 화면에 표시하기 2편
https://soo0100.tistory.com/2646 지난 시간에는 자바스크립트를 담을 웹 페이지를 만들었고, 1. 자바스크립트 코드 연결2. 캔버스 엘리먼트 만들기이 두 가지를 해보았다. 이번시간에는 키보드를 입력
soo0100.tistory.com
캔버스에 대한 자세한 내용을 알고싶다면, 하기 페이지를 방문하자.
https://www.w3schools.com/html/html5_canvas.asp
W3Schools.com
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com
'게임 만들기' 카테고리의 다른 글
| 비행슈팅 게임 만들기 기본 2편 (2) | 2024.09.22 |
|---|---|
| 비행슈팅 게임 만들기 기본 1편 (1) | 2024.09.19 |
| 자바스크립트 캔버스에 이미지 띄우기 (2) | 2024.09.11 |
| 자바스크립트 키보드 입력값 화면에 표시하기 3편 (0) | 2024.09.10 |
| 자바스크립트 키보드 입력값 화면에 표시하기 2편 (0) | 2024.09.09 |
댓글