Notice
Recent Posts
Recent Comments
Link
«   2025/07   »
일 월 화 수 목 금 토
1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 31
Tags
more
Archives
Today
Total
관리 메뉴

개발일기

[js]HTML5게임만들기-1.게임배경화면 본문

프로젝트일기

[js]HTML5게임만들기-1.게임배경화면

임인이 2018. 7. 31. 23:00

원래 공모전에 제출하려했던거지만..

거의완성했는데..ㅠㅠㅠ 내부사정으로인해 파토가 났어요..ㅠㅠ


이대로 묵혀두기엔 너무아까워서

게시글로 써봅니다


제가 이거를 딱 코딩할때

모바일웹페이지기반이지만

컴퓨터에서도 플레이할 수 있도록 만들고싶었어요


하지만 컴퓨터 버전을 따로 만들기에는 시간이 부족했고 

모바일웹기반이었기에 굳이 만들이유도 없었어요


그렇다고 width100% height100%으로 맞춰서 꽉 채워넣게엔..

컴퓨터쪽에서 이미지가 왕창 깨져버리죠..


그래서 저는 이미지비율은 유지하면서

디바이스가로가 더 긴경우에는 height를 100%로 맞추고

디바이스세로가 더 긴경우에는 width를 100%로 맞췄어요


일단 js쪽부터 짜봅시다.

JQuery랑 혼합된 코드입니다


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
var wid=window.outerWidth;
var hei=window.outerHeight;
var widper;
var heiper;
var a=hei;
var gdc=0;
if(wid<hei){
  a=wid;
}
for(var i=1 ;i<=a;i++){
  if(wid%i==0&&hei%i==0){
    gdc=i;
  }
}
widper=wid/gdc;
heiper=hei/gdc;
 
if((widper/heiper)==(9/14)){
  $(function(){
  $('#back').css('width',window.outerWidth);
  $('#back').css('height',window.outerHeight);
  $('#back').css('margin','auto');
});
}
else if((widper/heiper)>(9/14)){
  $(function(){
  $('#back').css('width',window.outerHeight*(9/14));
  $('#back').css('height',window.outerHeight);
  $('#back').css('margin','auto');
 
});
 
}
else{
  $(function(){
  $('#back').css('width',window.outerWidth);
  $('#back').css('height',window.outerWidth*(14/9));
  $('#back').css('margin','auto');
 
});
}
 
cs

비율이란게요

두수의 최대공약수를 구해서 그걸 분수로 만드는거자나요?

맨위의 코드는 최대공약수를 구하는것입니다

그밑의코드는 width와 height를 조절하는것이고

컴퓨터일경우를 대비해서 margin:auto를 씀으로써

가운데정렬을 하였습니다

비율은9:14로 맞추었는데요

그이유는..

이부분때문입니다.

코딩할때에는 카카오톡에 접속했을때 생기는 저 바만 고려해

9대14면 화면에 알맞게 꽉차서 9대14로 한건데..

다른브라우저로 접속하니깐 또 달라져서..ㅋㅋㅋ

굳이 9대14로 맞출필요는없을거같습니다ㅋㅋㅋ

여러분들은 만드실때 편한사이즈로 만드시던가

아님 9:16으로 만드세요


그다음 CSS파일을 볼까요


1
2
3
4
5
6
7
8
9
10
11
12
13
14
html,body {
    height: 100%;
    margin: 0px;
    padding: 0px;
    background-color: black;
}
#back {
width:360px;
height: 640px;
background-image: url("./1.png");
background-size: 100% 100%;
 background-repeat: no-repeat;
background-position : center;
}
cs


html5를 쓴다면 height:100%;는 꼭 적어주셔야합니다


이게 html,body쪽에 margin과 padding은 꼭 0px로 맞춰줘야하는게

html과 body는 기본적인 margin과 padding을 가지고있어서

스크롤이생기게됩니다

모바일 웹기반게임을 만들고있기에 

스크롤이생기면 곤란하죠

background-repeat: no-repeat;
background-position : center;


이부분은 굳이 안넣어도됩니다.


그럼 html로 가볼까요?

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!DOCTYPE HTML>
<HTML>
 <HEAD>
   <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0">
 
  <TITLE> Test </TITLE>
 
  <script src="./jquery.min.js"></script>
  <script src="./common.js"></script>
 
 
  <link rel="stylesheet" href="./common.css" type="text/css">
 
 
 
 </HEAD>
 <body>
 
   <div id="back">
 
 </div>
 
 </body>
 
</HTML>
 
cs

뭐.. 기본적인 것들이니깐 넘어가고

하나만 집고 넘어갈까요?


게임을 만드려면 부분확대하는게임도 있겠지만

저희는 화면이 확대되지않는 게임을 원했기에

<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0">

이부분을 추가하였습니다

initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0"

이부분은 확대,축소를 못하게 막는부분이고


width=device-width

이부분은 width크기를 device크기에 맞춘다는 의미입니다


이렇게 해주면

이렇게됩니다!


컴퓨터에서도 모바일에서도 비율에 맞게 게임을 즐길 수 있어요!




'프로젝트일기' 카테고리의 다른 글

[DB]DB사전작업.  (0) 2018.08.02
[js]HTML5게임만들기-2.bgm넣기  (0) 2018.08.01
Oracle 계정만들기(아이디만들기)  (0) 2018.07.30
프로젝트파일을 Spring으로 옮겼습니다.  (0) 2018.01.16
Bootstrap4 프로젝트에 사용해 보았습니다.  (0) 2018.01.09
'프로젝트일기' Related Articles more