Game主题

category
tags
type
status
slug
summary
date
Last edited time
Nov 5, 2024 09:59 AM
icon
password
状态
天气
星期
日期
💡
年龄大了,只能玩得动一点小游戏。
可以搭建网页小游戏网站的主题。在线预览:https://games.tangly1024.com/
对应示例数据库,完全开放可复制:

开启方式

更新代码至最新的4.4.1;并配置主题为game即可。

Game 主题概要

特色:
  • 支持在线预览游戏的视频
  • 在线游玩
  • 显示最近游戏记录
  • 将游戏保存到桌面快捷方式(PWA)。

1.最近访问

顶栏会记录最近访问的页面,该数据存在浏览器的localstorage中
notion image

2.数据库Ext字段

数据库新增字段ext,用来存放一些扩展的字段功能。
notion image
用json-string格式存放game的详细配置(游戏地址预览视频)例如以下json:
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的全屏功能:
notion image
 
详情可以在源码中找到。
嵌入iframe相关源码
 

4. 支持保存到桌面快捷方式

采用渐进式WEB应用,PWA的方式,点击浏览器地址栏右侧的安装按钮,即可添加到桌面快捷方式,一键启动。
notion image
notion image

关于游戏

游戏来源

游戏主要来源于 crazygames , poki , gameis 和 iogames、regtrogames.cc 这些网站,更多游戏网站可以通过similarweb查找对标。

游戏推荐

  • 拳皇97(风云再起)
    • 引入了retrogames的模拟器游戏,有趣的是支持创建房间、支持存档、联网对战,可以在游戏中设置键位,以及创建房间。
      notion image
      notion image
  • Block Post
    • 一款像素风射击游戏。玩法丰富:炸弹模式、武器模式、团队死斗模式;体验流畅:游戏打开速度快、单局节奏快、对电脑配置要求低,对战的网速也不错。和CSGO这款老牌反恐枪战游戏有很多神似:peek闪身、预瞄、搜点、提前枪、爆头线、手雷道具、压枪、开箱子、各种皮肤武器在这里都能体验,老少皆宜。
      notion image
      游戏中的开箱子画面
      游戏中的开箱子画面
Prev
Movie主题
Next
Commerce主题
Loading...
Article List
Notion开源、免费、快速建站
✨ 更新日志
🚀 安装部署
✒ Notion教程
🛠 站点配置
⭐ 主题参数
📊 网站统计
📩 评论插件
🧷 外部扩展
⌨ 开发教程
🔊 运营教程
👨‍👦‍👦 获取帮助
💪 支持我们