Game 테마
이전 문서: Game 테마 게시일: 2024-3-24 마지막 편집: 2024-11-5 원래 분류: ⭐ 테마 매개변수
테마 미리보기
💡 가볍게 즐길 수 있는 웹 미니게임 사이트를 만들기 위한 테마입니다.
웹 게임 사이트를 만들 수 있는 테마입니다. 온라인 미리보기: https://games.tangly1024.com/.
예시 데이터베이스는 공개되어 있으며 복제할 수 있습니다.
Play Fee Online Game on Game1024
활성화 방법
코드를 4.4.1 이상으로 업데이트한 뒤 테마를 game으로 설정하면 됩니다.
Game 테마 개요
특징:
- 게임 미리보기 동영상을 온라인으로 표시할 수 있습니다.
- 온라인 플레이를 지원합니다.
- 최근 게임 기록을 표시합니다.
- PWA 방식으로 게임 사이트를 데스크톱 바로가기에 저장할 수 있습니다.
1. 최근 방문
상단 바는 최근 방문한 페이지를 기록합니다. 이 데이터는 브라우저의 localStorage에 저장됩니다.
2. 데이터베이스 Ext 필드
데이터베이스에 ext 필드를 추가해 확장 기능용 필드를 저장합니다.
게임의 상세 설정(게임 주소와 미리보기 동영상)은 JSON string 형식으로 저장합니다. 예:
{
"href": "/games-external/common/index.htm?n=https://unblocked-games.s3.amazonaws.com/games/2023/q/1/tap-tap-shots/index.html",
"video": "https://videos.crazygames.com/tap-tap-shots/1/tap-tap-shots-494x276.mp4"
}href는 게임 플레이 주소이고, video는 마우스를 게임 커버 위에 올렸을 때 표시되는 미리보기 동영상입니다.
3. 게임 임베드 기능
href에는 기본적으로 외부 주소를 입력합니다. 예를 들어 https://unblocked-games.s3.amazonaws.com/games/2023/q/1/tap-tap-shots/index.html은 바로 임베드할 수 있는 온라인 게임 주소입니다.
예시 데이터베이스의 href가 왜 /games-external/common/index.htm?n=https://unblocked-games.s3.amazonaws.com/games/2023/q/1/tap-tap-shots/index.html 형식인지 궁금할 수 있습니다.
/games-external/common/index.htm?n= 문자열은 아래의 보조 컴포넌트를 의미합니다.
games-external 컴포넌트
프로젝트의 /public/games-external/common/index.htm에는 장식용 스크립트 페이지가 포함되어 있습니다.
이 페이지를 방문할 때 경로의 ?n=[외부 도메인] 값이 iframe으로 페이지 안에 임베드됩니다. 장식용 스크립트 페이지를 통해 외부 링크를 불러오면 이후 커스터마이징이나 검사용 기능을 확장하기 쉽습니다.
[사이트]/games-external/common/index.htm?n=[도메인]에 직접 접속하면 외부 웹 주소를 프로젝트 안에 iframe으로 임베드할 수 있습니다. 예를 들어 https://games.tangly1024.com/games-external/common/index.htm?n=https://www.tangly1024.com은 www.tangly1024.com을 iframe으로 임베드합니다.
현재 이 스크립트 페이지의 유일한 기능은 임베드된 iframe에 toggleFullscreen() 함수를 추가하는 것입니다. 이를 통해 NotionNext 글 상세 페이지에서 iframe 전체 화면 기능을 직접 호출할 수 있습니다.
자세한 내용은 소스 코드에서 확인할 수 있습니다.
iframe 임베드 관련 소스
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="robots" content="noindex, nofollow">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Full Screen iFrame</title>
<style>
html,
body {
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
#myIframe {
width: 100%;
height: 100%;
border: none;
/* Optional: remove border */
}
</style>
</head>
<body>
<!-- <div style="position: absolute;
right: 0px;
bottom: 0px;
background: white;">
<button onclick="toggleFullScreen()">Toggle Full Screen</button>
</div> -->
<iframe id="myIframe" allowfullscreen="allowfullscreen" allow="autoplay" scrolling="no"></iframe>
<!-- https://letsplay247.github.io/cz.html?n=space-wars-battleground -->
<script>
var myParam = location.search.split('n=')[1]
document.getElementById("myIframe").src = myParam;
</script>
<script src="/js/fullscreen.js" type="text/javascript"></script>
</body>
</html>window.toggleFullScreen = toggleFullScreen
function toggleFullScreen() {
var iframe = document.getElementById('myIframe')
if (!document.fullscreenElement) {
if (iframe.requestFullscreen) {
iframe.requestFullscreen()
} else if (iframe.mozRequestFullScreen) {
/* Firefox */
iframe.mozRequestFullScreen()
} else if (iframe.webkitRequestFullscreen) {
/* Chrome, Safari and Opera */
iframe.webkitRequestFullscreen()
} else if (iframe.msRequestFullscreen) {
/* IE/Edge */
iframe.msRequestFullscreen()
}
} else {
if (document.exitFullscreen) {
document.exitFullscreen()
} else if (document.mozCancelFullScreen) {
/* Firefox */
document.mozCancelFullScreen()
} else if (document.webkitExitFullscreen) {
/* Chrome, Safari and Opera */
document.webkitExitFullscreen()
} else if (document.msExitFullscreen) {
/* IE/Edge */
document.msExitFullscreen()
}
}
}4. 데스크톱 바로가기 저장 지원
Progressive Web App(PWA) 방식으로 동작합니다. 브라우저 주소창 오른쪽의 설치 버튼을 클릭하면 데스크톱 바로가기에 추가하고 한 번에 실행할 수 있습니다.
게임 관련
게임 출처
게임은 주로 CrazyGames, Poki, GameIS, IO Games, retrogames.cc 같은 사이트에서 가져옵니다. 더 많은 게임 사이트는 Similarweb에서 유사 사이트를 찾아 참고할 수 있습니다.
게임 추천
retrogames의 에뮬레이터 게임을 가져온 예시입니다. 방 만들기, 저장, 온라인 대전, 키 설정을 지원합니다.
픽셀 스타일 슈팅 게임입니다. 폭탄 모드, 무기 모드, 팀 데스매치 모드 등 플레이 방식이 다양하고, 로딩이 빠르며 한 판의 템포가 빠릅니다. 낮은 사양에서도 비교적 매끄럽게 실행되고 네트워크 대전 품질도 괜찮습니다. CSGO 같은 전통적인 대테러 슈팅 게임과 비슷한 요소도 많아 피킹, 프리 에임, 위치 확인, 헤드라인 조준, 수류탄 도구, 반동 제어, 상자 열기, 다양한 스킨 무기를 경험할 수 있습니다.
