GamePageExample - rikuryo-bukken/rikuryo-bukken.github.io GitHub Wiki

ゲームのページの例

ゲームのページの例を示す。

ファイル構造

new_game
├── index.html
├── style.css
├── script.js
└── source
    ├── index.html
    └── ...

sourceフォルダにはunityでwebGLとしてビルドして生成されたファイルやフォルダを全て入れる。正しく入れれば、sourceフォルダの直下にindex.htmlがあるはずである。

その他のindex.html、style.css、script.jsは、例えば以下のようにする。

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{game title} | {grade}期 | 北野高校物理研究部</title>
    <link rel="icon" href="/favicon.ico">
    <meta name="description" content="北野高校物理研究部{grade}期が制作した{game title}です。このページでプレイできます。物理研究部は、ゲーム制作など、プログラミングを中心に、情報に関連する制作を自由に行っています。">
    <link rel="stylesheet" href="./../default.css">
    <link rel="stylesheet" href="./style.css">
</head>
<body>
    <div id="game">
        <button id="fullscreen_game">ゲームをフルスクリーンで表示（ゲームが再読み込みされます）</button>
        <iframe id="game_frame" src="./source/index.html" title="{game title}"></iframe>
    </div>
    <nav id="pager">
        <ul>
            <li><a href="/">トップページ</a></li>
            <li><a href="/works/">期ごと一覧</a></li>
            <li><a href="/{grade}/">{grade}期</a></li>
        </ul>
        <ul>
            <li><a href="/games/">ゲーム集</a></li>
        </ul>
        <ul>
            <li><a href="/sitemap/">サイトマップ</a></li>
        </ul>
        <ul>
            <li><a href="./source/" target="_blank">別タブでプレイ</a></li>
        </ul>
    </nav>
    <script src="./script.js"></script>
</body>
</html>

style.css

body {
    font-family: 'Noto Sans JP', 'BIZ UDGothic', 'メイリオ', 'Meiryo', 'Meiryo UI', sans-serif;
    color: #333333;
    line-height: 1.5;
}

#game {
    flex: 8;
}

#fullscreen_game {
    width: 100%;
    padding: 6px;
}

#game iframe {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
}

#pager {
    flex: 2;
    background-color: darkcyan;
    box-sizing: border-box;
    width: 100%;
    height: 100vh;
    padding: 10% 2em;
    overflow: auto;
}

#pager ul {
    background-color: azure;
    border-radius: 10px;
    margin-top: 0;
    margin-bottom: 10%;
    list-style: none;
    padding: 0.1px 0;
    padding-left: 0;
}
#pager ul:last-child {
    margin-bottom: 0;
}

#pager ul li {
    margin: 7px 0;
}

#pager ul li a {
    padding: 3px 5px;
    text-decoration: none;
}
#pager ul li a:link {
    color: #33007b;
}
#pager ul li a:visited {
    color: #33007b;
}
#pager ul li a:active {
    color: #7b0000;
}

body {
    display: flex;
    flex-direction: row;
    margin: 0;
    overflow: hidden;
    height: 100%;
}
html {
    height: 100%;
}

@media (orientation: portrait) {
    body {
        display: flex;
        flex-direction: column;
    }
    #pager {
        flex: initial;
        height: auto;
        padding: 1.2em 2em;
    }
    #pager ul {
        margin-bottom: 15px;
    }
}

script.js

const iframeElementForGame = document.getElementById("game_frame");

document.getElementById("fullscreen_game").addEventListener('click', event => {
    iframeElementForGame.requestFullscreen();
});

iframeElementForGame.addEventListener('fullscreenchange', event => {
    iframeElementForGame.contentWindow.location.reload();
});

ゲームのページを作成する方法に戻る

ホームへ

⚠️ **GitHub.com Fallback** ⚠️