반응형
4개의 총알이 비행기에 충돌하면 게임이 끝난다. 물론 비행기를 키보드로 움직일 수도 있다.
단순하지만 해당 내용은 비행슈팅 게임의 기본이 된다.
위 로직을 만들기 위해서는 4가지 구성이 필요하다.
1. 화면 구성.
2. 비행선 움직이기 위해 키보드 이벤트 등록.
3. 타이머로 총알 이동.
4. 게임 상태 변경.
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="1942p.js"></script>
</head>
<body>
<!-- 화면 구성하기 -->
<canvas id = "canvas" width="900" height="900"
style="position: absolute; top : 0px; left: 0px; border: 1px solid blueviolet;"
>Canvas 를 만들지 못했습니다/</canvas>
</body>
</html>
캔버스 영역을 별도로 표시하기 위해서 border 속성을 추가한다.
2. 자바스크립트 코드
두번째 로는 자바스크립트 파일을 만들고, 화면 구성을 시작한다.
window.addEventListener("load",drawScreen);
//배경 이미지 로딩하기
var backImg = new Image();
backImg.src = "img/back.jpg";
//화면 그리기
function drawScreen() {
//웹 문서에서 캔버스 로딩하기
var canvas = document.getElementById("canvas");
//캔버스를 이용해서 컨텍스트 만들기
var context = canvas.getContext("2d");
//컨텍스트로 배경 이미지 그리기
context.drawImage(backImg, 0, 0);
}
먼저, window 객체를 활용하여 화면이 load 되면 자동으로 drawScreen 이란 함수를 호출하게 만든다.
화면을 그리기 위해서 이다.
다음으로는, Image 객체를 사용해서 배경에 사용될 우주 이미지를 불러온다.
drawScreen() 함수내에서
웹에 연결된 캔버스를 로딩하고 컨텍스트를 가져와서 이미지를 그린다.
손쉽게 캔버스는 도화지. 컨텍스트는 펜이라고 생각하자.
기본 우주 배경만 나오는 코드가 완성 되었다.
다음 포스팅에서는
비행선을 그리고, 그 비행선을 움직여본다.
반응형
'게임 만들기 > 1942 비행슈팅 게임 만들기' 카테고리의 다른 글
| 비행슈팅 게임 만들기(3) - 키보드로 아군 비행선 움직이기 (2) | 2024.10.10 |
|---|---|
| 비행슈팅 게임 만들기(2) - 아군 비행기 그리기 (1) | 2024.10.07 |
| 1942 독도 9스테이지 완성. (4) | 2020.08.19 |
| 1942 독도 제작영상 8스테이지 완성 (6) | 2020.08.16 |
| 1942 독도 7스테이지 완료. (3) | 2020.08.14 |
댓글