HTML5 게임을 post 로 넣다
게임 컨텐츠를 추가하고 싶어서 HTML5 게임정보를 구해서 POST 로 작성했는데
게임정보를 추가하는 방법이 2가지 있었습니다
- iframe 으로 넣는 방법
- 링크를 추가해서 새창으로 띄우는 방법
HTML5 게임이 웹브라우저에서 실행되기 때문에
PC 에서는 그나마 인터페이스가 나쁘지 않았지만
모바일에서는 인터페이스가 좋지 않아서 두 방법 다 만족스럽지 않았습니다
전체화면으로 띄우는 방법
다른 게임 WEB 을 보니 전체화면으로 제공을 해주고 있었고
전체화면으로 띄우는 기능을 Hexo 블로그에도 적용하고 싶어졌습니다
역시나 풀스크린 API 가 있네요
더 찾아보니 풀스크린 API 를 이용한 screenfull.js 서비스도 있었습니다
screenfull.js 서비스를 Hexo 블로그에 적용
우선 테스트용 HTML 페이지 를 만들고
Jquery 와 screenfull.min.js 를 라이브러리로 사용하고
a 태그의 title 로 클릭을 판단하고
iframe id 를 고유값으로 부여하여 해당 iframe 을 전체화면으로 띄운다
전체화면에서 돌아올 때 iframe 정보를 초기화 한다
<title>fullscreen player</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://skyksit.com/skip/screenfull.min.js"></script>
<script>
$(function() {
var fullscreenelem;
$("a[title='fullscreen']").click(function() {
var gameCode = $(this).attr('href').substr(1);
console.log('gameCode = ' + gameCode);
const goUrl = 'https://html5.gamemonetize.com/' + gameCode + '/';
const iframe = document.getElementById(gameCode);
iframe.setAttribute('src', goUrl);
if (screenfull.isEnabled) {
screenfull.request(iframe, {navigationUI: 'hide'});
}
});
});
function fullscreenchange() {
if (screenfull.isFullscreen) {
fullscreenelem = screenfull.element;
} else {
fullscreenelem.setAttribute('src', '');
}
}
if (screenfull.isEnabled) {
screenfull.on('change', fullscreenchange);
}
</script>
</head>
<body>
<div>
<a href="#w6hncjwrs6sxd1gme8eegi947gasnc3k" title="fullscreen" rel="external nofollow noopener noreferrer">🕹️게임하기</a>
</div>
<div>
<iframe id="w6hncjwrs6sxd1gme8eegi947gasnc3k"></iframe>
</div>
<div>
<a href="#7pazfjvm0adas1zpdkvem3xcpi4cqc4x" title="fullscreen" rel="external nofollow noopener noreferrer">🕹️게임하기</a>
</div>
<div>
<iframe id="7pazfjvm0adas1zpdkvem3xcpi4cqc4x"></iframe>
</div>
</body>Hexo 를 수정하다
skip_render 옵션 활성화
html과 js파일이 Hexo 엔진으로 변경되지 않도록 skip_render 옵션을 추가해줬다
skip_render: "skip/**/*"tagplugin link 를 수정
# 으로 입력된 정보도 link 로 인식하도록 link.js 를 수정
4줄 추가했다
const rUrl = /((([A-Za-z]{3,9}:(?:\/\/)?)(?:[-;:&=+$,\w]+@)?[A-Za-z0-9.-]+|(?:www.|[-;:&=+$,\w]+@)[A-Za-z0-9.-]+)((?:\/[+~%/.\w-_]*)?\??(?:[-+=&;%@.\w_]*)#?(?:[.!/\\w]*))?)/;
+ const sharpUrl = /^#\w+/;
..
..
..
if (rUrl.test(item)) {
url = item;
break;
+ } else if (sharpUrl.test(item)) {
+ url = item;
+ break;
} else {
text.push(item);
}footer 에 javascript 추가
screenfull.min.js 와 gmplayer_fullscreen.js 를 footer 에 추가합니다
return <footer class="footer">
+ <script src="/skip/screenfull.min.js"></script>
+ <script src="/skip/gmplayer_fullscreen.js"></script>
<div class="container">layout 에서 Scripts 가 Footer 위로 위치 변경
Hexo 는 Scripts 태그에 jquery 에 있기 때문에 jquery 가 먼저 로딩되도록 위치를 위로 한줄 올렸습니다
+- <Scripts site={site} config={config} helper={helper} page={page} />
<Footer config={config} helper={helper} />
<Search config={config} helper={helper} />결론
만족스럽게 헥소(Hexo)블로그에서도 전체화면으로 띄울 수 있게 되었습니다.
단지 현재는 html5 게임을 거의 빼서 잘 사용하지는 않게 되었습니다.
'IT > Hexo' 카테고리의 다른 글
| 네이버 Billboard.js 캔들차트 DataURL 사용법 (0) | 2022.07.04 |
|---|---|
| 검색엔진(네이버,구글)에 검색 잘되게 하는 방법 (0) | 2022.07.04 |
| 네이버 Billboard.js 차트 를 사용해보자 (0) | 2022.07.04 |
| Hexo 대소문자 인식 오류 문제 해결방법 (0) | 2022.07.04 |
| Hexo 에 나만의 스크립트(script)를 만들기 (0) | 2022.07.04 |
| 헥소(Hexo) 에 네이버 billboard 차트 추가 (0) | 2022.07.04 |
| 헥소(Hexo) 에 차트 추가 (0) | 2022.06.30 |
| 헥소(Hexo)에 구글애드센스(Google AdSense)추가 (0) | 2022.06.30 |
