网站嵌入的游戏,用的是iframe嵌入的技术。

原理就是在网页之中嵌入一个网页模块。
理解了这一点,也就是只需要找到一个网址嵌入即可。

先找到你想嵌入的H5游戏。



以下以suikagame.cc为例:

步骤一:

打开suikagame.cc

右键--检查:

文章配图

步骤二:
找到嵌入游戏的部分

一般直接按顺序看网页代码就能找到,快一点的话,直接搜索 iframe也行。
找到【https://suikagame.io/suika-game.embed】
就是我们要用的网址。
可以把这个地址直接丢到浏览器,看看能不能访问成功。
一般来说,嵌入的能用,单独的都是可以的。

文章配图

步骤三:
让gpt帮你写一个网页代码

文章配图

生成的代码如下:
<!DOCTYPE html><html lang="zh-CN"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>游戏网页</title>    <style>        body {            font-family: Arial, sans-serif;            margin: 0;            padding: 0;            background-color: #f4f4f4;        }        header {            background-color: #333;            color: #fff;            padding: 20px;            text-align: center;        }        section {            margin: 20px;            padding: 20px;            background-color: #fff;            border-radius: 8px;            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);        }        iframe {            width: 100%;            height: 500px;            border: none;        }        h1, h2 {            margin-bottom: 10px;        }        .faq {            margin-top: 20px;        }        .faq dt {            font-weight: bold;            margin-top: 10px;        }        .faq dd {            margin-left: 20px;        }</style></head><body>
<header> <h1>欢迎来到我们的游戏页面</h1></header>
<section> <h2>游戏嵌入模块</h2> <iframe src="你的游戏链接" title="游戏"></iframe></section>
<section> <h2>游戏介绍</h2> <p>这是一款非常有趣的游戏,玩家可以在这里体验到刺激的冒险。游戏玩法简单直观,适合各个年龄段的玩家。</p></section>
<section class="faq"> <h2>游戏FAQ</h2> <dl> <dt>1. 如何开始游戏?</dt> <dd>点击页面中的"开始游戏"按钮,等待加载后即可开始游戏。</dd>
<dt>2. 游戏是否需要付费?</dt> <dd>这款游戏是免费的,但部分道具或功能可能需要付费解锁。</dd>
<dt>3. 游戏支持哪些设备?</dt> <dd>游戏支持PC、手机和平板等设备。</dd>
<dt>4. 如何保存游戏进度?</dt> <dd>登录账号后,游戏进度将自动保存到云端。</dd> </dl></section>
</body></html>
步骤四:

把代码放到编辑器
vs code或者cursor里面可以。
然后替代掉网址。
把代码另存为game.html.

文章配图

//其实3和4现在可以用cursor一次性解决,但是我想着5比4好听一点。

步骤五:

本地打开存好的html文件,一个很丑的网站就有了。
体验下,是可以正常游戏的。

文章配图


可以让gpt/cursor 帮你调一调样式。
再加点宣传图;
再把iframe的嵌入框尺寸改一改;

文章配图

就能变成跟suikagame.cc差不多的样子了。

开发流程基本完成,剩下的就是部署。
部署的流程可以参考上一篇文章,就不再赘述。

从0到1搭建游戏多语言网站|跑通谷歌adsense广告收款|全流程分享

有兴趣的朋友们可以自己试试。