모바일에서도 게임 플레이가 가능하게 화살표 버튼을 구현한 적이 있다.
그러나 문제가 있었다.
일단 화면이 너무 작고, 버튼을 클릭 시 두 번 연속으로 클릭하면 화면이 확대되어 게임이 불가능했다.
그래서 임시 방편으로 화면 확대를 막고 게임화면 크기를 키웠다.
// mobile인지
const isMobile = (function() {
var userAgent = navigator.userAgent;
var isMobile = false;
if (userAgent.indexOf("iPhone") > 0 || userAgent.indexOf("iPot") > 0 || userAgent.indexOf("iPad") > 0) {
console.log("iPhone or iPot or iPad");
isMobile = true;
} else if (userAgent.indexOf("Android") > 0) {
console.log("Android");
isMobile = true;
} else {
console.log("PC");
}
return isMobile;
})();mobile인지는 크롬 개발자도구에서 플랫폼을 바꿔가면 테스트가 가능하게 navigator의 userAgent를 이용했다.
// PC인 경우 상하좌우, 스페이스 keyCode
const PC_BUTTON = {
LEFT: 37,
UP: 38,
RIGHT: 39,
DOWN: 40,
SPACEBAR: 32
}
// MOBILE인 경우 상하좌우, 스페이스 keyCode
const MOBILE_BUTTON = {
LEFT: -1,
UP: -1,
RIGHT: -1,
DOWN: -1,
SPACEBAR: -1
}
// button 정보 세팅
const keyCode = {
...(isMobile ? MOBILE_BUTTON : PC_BUTTON)
};그리고 PC일때와 MOBILE일 때 keyCode를 나눠서 저장했고 모바일인지에 따라 다른 keyCode를 적용하게 했다.
MOBILE_BUTTON은 아직 제대로 등록하지는 않았다. 하지만 저렇게 두면 모바일에서는 상하좌우 키보드 입력이 안먹는것을 확인할 수 있다.
저렇게 수정 후, 기존에 LEFT, RIGHT 등의 상수만 보던 코드들을 keyCode.LEFT, keyCode.RIGHT 들을 보게 수정한다.
(function() {
if(isMobile) { // mobile인 경우
// 300% 확대
document.body.style.zoom = "300%";
}
})();모바일인 경우 300% 확대하는 코드를 넣었다.
<!-- main.html -->
<head>
<!-- add -->
<meta name="viewport" content="user-scalable=0" />
</head>모바일에서 화면 2번 클릭 시 화면이 확대되는 것을 방지하게 하기 위해 위와 같은 meta 태그를 추가했다.
이제 모바일에서도 게임이 가능하다.
플레이해본 결과 버튼들이 너무 다닥다닥 붙어있어서 버튼을 누르면서 게임하는것은 어려웠다.
모바일에서는 모바일 제스쳐를 적용해서 플레이하게 바꿔야 할 듯 하다.
깃허브 : When connected to mobile, 300% enlarged screen, prevented the user zoom.
'Project > 테트리스' 카테고리의 다른 글
| [테트리스] 12. 블록이 바닥에 닿았을 때 모습 출력. (0) | 2020.04.27 |
|---|---|
| [테트리스] 11. 블럭 저장, 불러오기 (0) | 2019.09.10 |
| [테트리스] 9. 게임 맵 경계 구분 (0) | 2019.08.31 |
| [테트리스] 8. 키보드 버튼 구현 (0) | 2019.08.27 |
| [테트리스] 7. 블럭 한 칸 구별, 스페이스 구현 (0) | 2019.08.27 |
댓글