두더지 잡기 게임 만들기 with H5
자바스크립트 와 HTML 그리고 CSS를 가지고 게임을 만들어 본다. 게임은 두더지 잡기 스타일로, 두더지 대신에 에일리언이 등장한다.게임룰은 두더지 잡기와 동일하다. 두더지 잡기 스타일의 게
soo0100.tistory.com
두더지 잡기 Type 의 게임 에일리언 퇴치 게임을 만든다.
결과 화면을 다시 살펴보자.
1. 화면 구성하기
먼저 화면을 만든다.
Play 버튼 과 Score 텍스트 영역 그리고 게임판을 제작한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>에일리언 퇴치</title>
</head>
<style>
#board{
width: 500px;
height: 300px;
background-color: black;
}
</style>
<body>
<!-- Play버튼 만들기 -->
<input type="button" value="Play">
<!-- 텍스트 영역 -->
<P>Score : </P>
<!-- 게임판 -->
<div id="board"></div>
</body>
</html>
게임판 의 스타일을 적용하기 위해서
< style > 태그를 사용해서 크기(너비,높이) 와 배경색을 설정한다.
배경색은 카드를 잘 보이게 하기 위해서 블랙으로 지정했다.
브라우저에서 실행하면
위와 같은 기본 화면이 만들어진 것을 확인 할 수 있다.
2편에서는 카드를 화면에 배치 한다.
반응형
'게임 만들기 > 두더지게임 만들기' 카테고리의 다른 글
| 두더지 잡기 게임 만들기 with H5 (0) | 2024.08.26 |
|---|
댓글