五十音小遊戲中的前端知識小結
背景
在日語學習初期階段，我發現日語五十音的記憶並不是很容易的，片假名的記憶尤其令人費神。這時我想如果有一個應用可以充分利用碎片時間，在午休或地鐵上隨時可以練習五十音該多好。於是搜索 App Store，確實有很多五十音學習的小軟件，但是商店的軟件不是含有內購、夾帶廣告、就是動輒 40M 以上，沒找到一個自己滿意的應用。於是打算自己寫一個，主要介紹自己在開發設計該應用過程中的一些收獲。
實現
在線體驗地址 https://dragonir.github.io/kanaApp/
實現效果如下，該應用主要分為三個頁面：
- 首頁：包括菜單選項（平假名練習、片假名練習、混合練習）、深色模式切換按鈕。
- 答題頁：包括剩餘機會和分數顯示區、中間出題區、底部答題按鈕。
- 結果頁：結果分數顯示和返回首頁按鈕。
答題邏輯規則是從給出的 4 個答案按鈕中選出題目展示區的那個單詞對應正確的那個選項，應用根據點擊給出錯對反饋並進行記分，錯誤 10 次後遊戲結束，加載結果頁。遊戲邏輯實現不是本文的主要內容，因此後面不再贅述。本文後續主要內容是此次小遊戲開發流程涉及到的前端知識的介紹。
深色模式 ⚪⚫
隨著 Windows 10、 MacOs、 Android 等系統陸續推出深色模式，瀏覽器也開始支持檢測系統主題色配置，越來越多的網頁應用都配置瞭深色模式切換功能。為瞭優化 50音小遊戲 的視覺體驗，我也配置瞭深色樣式，實現效果如下：
CSS 媒體查詢判斷深色模式
prefers-color-scheme 媒體特性用於檢測用戶是否有將系統的主題色設置為亮色或者暗色。使用語法如下所示：
@media (prefers-color-scheme: value) {} 其中 value 有以下 3 種值，其中：
light：表示用戶系統支持深色模式，並且已設置為淺色主題（默認值）。dark：表示用戶系統支持深色模式，並且已設置為深色主題。no-preference：表示用戶系統不支持深色模式或無法得知是否設置為深色模式（已廢棄）。
若結果為 no-preference，無法通過此媒體特性獲知宿主系統是否支持設置主題色，或者用戶是否主動將其設置為無偏好。出於隱私保護等方面的考慮，用戶或用戶代理也可能在一些情況下在瀏覽器內部將其設置為 no-preference。
下面例子中，當系統主題色為深色時 .demo 元素的背景色為 #FFFFFF；當系統主題色為淺色時，.demo 元素的背景色為 #000000。
@media (prefers-color-scheme: dark) {
.demo { background: #FFFFFF; }
}
@media (prefers-color-scheme: light) {
.demo { background: #000000; }
}
JavaScript 判斷深色模式
window.matchMedia() 方法返回一個新的 MediaQueryList 對象，表示指定的媒體查詢 (en-US)字符串 解析後的結果。返回的 MediaQueryList 可被用於判定 Document 是否匹配媒體查詢，或者監控一個 document 來判定它匹配瞭或者停止匹配瞭此媒體查詢。其中 MediaQueryList 對象具有屬性 matches和 media，方法 addListener 和 removeListener。
使用 matchMedia 作為判斷媒介，也可以識別系統是否支持主題色：
if (window.matchMedia('(prefers-color-scheme)').media === 'not all') {
// 瀏覽器不支持主題色設置
}
if (window.matchMedia('(prefers-color-scheme: dark)').matches){
// 深色模式
} else {
// 淺色模式
}
另外還可以動態監聽系統深色模式的狀態，根據系統深色模式的切換做出實時響應：
window.matchMedia('(prefers-color-scheme: dark)').addListener(e => {
if (e.matches) {
// 開啟深色模式
} else {
// 關閉深色模式
}
});
或者單獨檢測深色或淺色模式：
const listeners = {
dark: (mediaQueryList) => {
if (mediaQueryList.matches) {
// 開啟深色模式
}
},
light: (mediaQueryList) => {
if (mediaQueryList.matches) {
// 開啟淺色模式
}
}
};
window.matchMedia('(prefers-color-scheme: dark)').addListener(listeners.dark);
window.matchMedia('(prefers-color-scheme: light)').addListener(listeners.light);
在50音小遊戲中，就是使用 JavaScript 檢測系統是否開啟深色模式，動態添加 css 類名來自動加載深色模式，同時也提供深淺色切換按鈕，可以手動切換主題。
HTML 元素中判斷深色模式
頁面使用圖片元素時，可以直接在 HTML 中判斷系統是否開啟深色模式。如：
<picture> <source srcset="dark.jpg" media="(prefers-color-scheme: dark)"> <img src="light.jpg"> </picture>
picture 元素允許我們在不同的設備上顯示不同的圖片，一般用於響應式。HTML5 引入瞭 <picture> 元素，該元素可以讓圖片資源的調整更加靈活。<picture> 元素零或多個 <source> 元素和一個 <img> 元素，每個 <source> 元素匹配不同的設備並引用不同的圖像源，如果沒有匹配的，就選擇 <img> 元素的 src 屬性中的 url。
註意: <img> 元素是放在最後一個 <picture> 元素之後，如果瀏覽器不支持該屬性則顯示 <img> 元素的的圖片。
離線緩存
為瞭能夠像原生應用一樣可以在桌面生成快捷方式快速訪問，隨時隨地離線使用，50音小遊戲 使用瞭離線緩存技術，它是一個 PWA應用 。下面內容是 PWA離線應用 實現技術的簡要描述。
PWA (progressing web app)，漸進式網頁應用程序，是 下一代WEB應用模型。一個 PWA 應用首先是一個網頁, 並借助於 App Manifest 和 Service Worker 來實現安裝和離線等功能。
特點：
- 漸進式：適用於選用任何瀏覽器的所有用戶，因為它是以漸進式增強作為核心宗旨來開發的。
- 自適應：適合任何機型：桌面設備、移動設備、平板電腦或任何未來設備。
- 連接無關性：能夠借助於服務工作線程在離線或低質量網絡狀況下工作。
- 離線推送：使用推送消息通知，能夠讓我們的應用像
Native App一樣，提升用戶體驗。及時更新：在服務工作線程更新進程的作用下時刻保持最新狀態。 - 安全性：通過
HTTPS提供，以防止窺探和確保內容不被篡改。
配置頁面參數
在項目根目錄添加文件 manifest.webmanifest 或 manifest.json 文件，並在文件內寫入如下配置信息，本例中 50音小遊戲 的頁面參數信息配置如下：
// manifest.webmainifest
{
"name": "かなゲーム",
"short_name": "かなゲーム",
"start_url": "index.html",
"display": "standalone",
"background_color": "#fff",
"description": "かなゲーム",
"icons": [
{
"src": "assets/images/icon-64x64.jpg",
"sizes": "64x64",
"type": "image/jpg"
},
{
"src": "assets/images/icon-256x256.jpg",
"sizes": "256x256",
"type": "image/jpg"
}
]
}
參數說明：
name：Web App的名稱，也是保存到桌面上時應用圖標的名稱。short_name：name過長時，將會使用short_name代替name顯示，是Web App的簡稱。start_url：指定瞭用戶打開該Web App時加載URL。URL會相對於manifest文件所在路徑。display：指定瞭應用的顯示模式，它有四個值可以選擇：
fullscreen：全屏顯示，會盡可能將所有的顯示區域都占滿。
standalone：瀏覽器相關 UI（如導航欄、工具欄等）將被隱藏，看起來更像一個 Native App。
minimal-ui：顯示形式與 standalone 類似，瀏覽器相關 UI 會最小化為一個按鈕，不同瀏覽器在實現上略有不同。browser：一般來說，會和正常使用瀏覽器打開樣式一致。
需要說明的是，當一些系統的瀏覽器不支持 fullscreen 時將會顯示成 standalone 效果，當不支持 standalone 時，將會顯示成 minimal-ui 的效果，以此類推。
description：應用描述。
icons：指定瞭應用的桌面圖標和啟動頁圖像，用數組表示：
- sizes：圖標大小。通過指定大小，系統會選取最合適的圖標展示在相應位置上。
- src：圖標路徑。相對路徑是相對於
manifest文件，也可以使用絕對路徑。 - type：圖標圖片類型。 瀏覽器會從
icons中選擇最接近128dp(px = dp * (dpi / 160))的圖片作為啟動畫面圖像。
background_color：指定啟動畫面的背景顏色，采用相同顏色可以實現從啟動畫面到首頁的平穩過渡，也可以用來改善頁面資源正在加載時的用戶體驗。
theme_color：指定瞭Web App 的主題顏色。可以通過該屬性來控制瀏覽器 UI 的顏色。比如狀態欄、內容頁中狀態欄、地址欄的顏色。
配置信息自動生成工具：https://tomitm.github.io/appmanifest/
配置 HTML 文件
在 index.html 中引入 manifest 配置文件，並在 head 中添加以下配置信息以兼容 iOS系統
<meta name=viewport content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no,viewport-fit=cover"> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"> <meta name="apple-mobile-web-app-title" content="かなゲーム"> <link rel="stylesheet" type="text/css" href="./assets/css/main.css" rel="external nofollow" > <link rel="stylesheet" type="text/css" href="./assets/css/dark.css" rel="external nofollow" > <link rel="stylesheet" type="text/css" href="./assets/css/petals.css" rel="external nofollow" > <link rel="shortcut icon" href="./assets/images/icon-256x256.jpg" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" > <link rel="apple-touch-icon" href="./assets/images/icon-256x256.jpg" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" /> <link rel="apple-touch-icon-precomposed" href="./assets/images/icon-256x256.jpg" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" > <link rel="Bookmark" href="./assets/images/icon-256x256.jpg" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" /> <link rel="manifest" href="./manifest.webmanifest" rel="external nofollow" > <title>かなゲーム</title>
apple-touch-icon: 指定應用圖標，類似與manifest.json文件的icons配置，也是支持sizes屬性，來供不同場景的選擇。apple-mobile-web-app-capable：類似於manifest.json中的display的功能，通過設置為yes可以進入standalone模式。apple-mobile-web-app-title：指定應用的名稱。apple-mobile-web-app-status-bar-style：指定iOS移動設備的狀態欄status bar的樣式，有Default，Black，Black-translucent可以設置。
註冊使用 Service Worker
在 index.html 中添加如下代碼進行server-worker註冊：
window.addEventListener('load', () => {
registerSW();
});
async function registerSW() {
if ('serviceWorker' in navigator) {
try {
await navigator.serviceWorker.register('./sw.js');
} catch (e) {
console.log(`SW registration failed`);
}
}
}
使用 serviceWorkerContainer.register() 進行 Service worker 註冊，同時添加 try...catch... 容錯判斷，以保證在不支持 Service worker 的情況下正常運行。另外需要註意的是隻有在 https 下，navigator 裡才會有 serviceWorker 對象。
Service workers 本質上充當 Web 應用程序、瀏覽器與網絡（可用時）之間的代理服務器。旨在創建有效的離線體驗，它會攔截網絡請求並根據網絡是否可用采取來適當的動作、更新來自服務器的的資源。它還提供入口以推送通知和訪問後臺同步 API。瞭解更多 Service workder 知識可以訪問文章末尾鏈接 🔗。
在根目錄添加 sw.js，定義緩存信息和方法
// 定義緩存的key值
const cacheName = 'kana-v1';
// 定義需要緩存的文件
const staticAssets = [
'./',
'./index.html',
'./assets/css/main.css',
'./assets/js/main.js',
'./assets/images/bg.jpg'
// ...
];
// 監聽install事件，安裝完成後，進行文件緩存
self.addEventListener('install', async e => {
// 找到key對應的緩存並且獲得可以操作的cache對象
const cache = await caches.open(cacheName);
// 將需要緩存的文件加進來
await cache.addAll(staticAssets);
return self.skipWaiting();
});
// 監聽activate事件來更新緩存數據
self.addEventListener('activate', e => {
// 保證第一次加載fetch觸發
self.clients.claim();
});
// 監聽fetch事件來使用緩存數據：
self.addEventListener('fetch', async e => {
const req = e.request;
const url = new URL(req.url);
if (url.origin === location.origin) {
e.respondWith(cacheFirst(req));
} else {
e.respondWith(networkAndCache(req));
}
});
async function cacheFirst(req) {
// 判斷當前請求是否需要緩存
const cache = await caches.open(cacheName);
const cached = await cache.match(req);
// 有緩存就用緩存，沒有就從新發請求獲取
return cached || fetch(req);
}
async function networkAndCache(req) {
const cache = await caches.open(cacheName);
try {
// 緩存報錯還直接從新發請求獲取
const fresh = await fetch(req);
await cache.put(req, fresh.clone());
return fresh;
} catch (e) {
const cached = await cache.match(req);
return cached;
}
}
在 sw.js 中采用的標準的 web worker 的編程方式，由於運行在另一個全局上下文中 （self），這個全局上下文不同於 window，所以采用 self.addEventListener()。
Cache API 是 Service Worker 提供用來操作緩存的的接口，這些接口基於 Promise 實現，包括 Cache 和 Cache Storage，Cache 直接和請求打交道，為緩存的 Request / Response 對象對提供存儲機制，CacheStorage 表示 Cache 對象的存儲實例，我們可以直接使用全局的 caches 屬性訪問 Cache API。
** Cache 相關 API 說明：
Cache.match(request, options)：返回一個Promise對象，resolve的結果是跟Cache對象匹配的第一個已經緩存的請求。Cache.matchAll(request, options)：返回一個Promise對象，resolve的結果是跟Cache對象匹配的所有請求組成的數組。Cache.addAll(requests)：接收一個URL數組，檢索並把返回的response對象添加到給定的Cache對象。Cache.delete(request, options)：搜索key值為request的Cache條目。如果找到，則刪除該Cache條目，並且返回一個resolve為true的Promise對象；如果未找到，則返回一個resolve為false的Promise對象Cache.keys(request, options)：返回一個Promise對象，resolve的結果是Cache對象key值組成的數組。
註：使用 request.clone() 和 response.clone() 是因為 request 和 response 是一個流，隻能消耗一次。緩存時已經消耗一次，再發起 HTTP 請求還要消耗一次，此時使用 clone 方法克隆請求。
至此，當已安裝的 Service Worker 頁面被打開時，便會觸發 Service Worker 腳本更新。當上次腳本更新寫入 Service Worker 數據庫的時間戳與本次更新超過 24小時，便會觸發 Service Worker 腳本更新。當 sw.js 文件改變時，便會觸發 Service Worker 腳本更新。更新流程與安裝類似，隻是在更新安裝成功後不會立即進入 active 狀態，更新後的 Service Worker 會和原始的 Service Worker 共同存在，並運行它的 install，一旦新 Service Worker 安裝成功，它會進入 wait 狀態，需要等待舊版本的 Service Worker 進/線程終止。
更多 Server Worker 進階知識可以查看文章末尾鏈接 🔗
實現效果：
PC端 🖥️：Windows上，在瀏覽器中初次打開應用後會有安裝提示，點擊安裝圖標之後進行安裝，桌面和開始菜單中會生成應用快捷方式，點擊快捷方式就可以打開應用。
Mac 💻： 上面 chromiumn內核 的瀏覽器（chrome、opera、新版edge）也是類似的。安裝之後會在 launchpad 中生成快捷方式。
移動端 📱：iPhone。瀏覽器中選擇保存到桌面，就可生成桌面圖標，點擊圖標打開離線應用。
櫻花飄落動畫 🌸
為增強視覺效果和趣味性，於是在頁面增加瞭櫻花 🌸 飄落的效果。飄落效果動畫主要使用到 Element.animate() 方法。
Element 的 animate() 方法是一個創建新 Animation 的便捷方法，將它應用於元素，然後運行動畫。它將返回一個新建的 Animation 對象實例。一個元素上可以應用多個動畫效果。你可以通過調用此函數獲得這些動畫效果的一個列表： Element.getAnimations()。
基本語法：
var animation = element.animate(keyframes, options);
參數：
keyframes：關鍵幀。一個對象，代表關鍵幀的一個集合。options：可選項代表動畫持續時間的整形數字 (以毫秒為單位), 或者一個包含一個或多個時間屬性的對象：
id： 可選，在 animate() 裡可作為唯一標識的屬性: 一個用來引用動畫的字符串（ DOMString ）delay：可選，開始時間的延遲毫秒數，默認值為 0。
direction：可選，動畫的運動方向。向前運行 normal、向後運行 reverse、每次迭代後切換方向 alternate，向後運行並在每次迭代後切換方向 alternate-reverse。默認為 normal。
duration：可選，動畫完成每次迭代的毫秒數，默認值為 0。easing：可選，動畫隨時間變化的頻率。接受預設的值包括 linear、ease、 ease-in、ease-out、ease-in-out及一個自定義值 cubic-bezier， 如 cubic-bezier(0.42, 0, 0.58, 1)。默認值為 linear。
endDelay：可選，一個動畫結束後的延遲，默認值為 0。
fill：可選，定義動畫效果對元素的影響時機，backwards 動畫開始前影響到元素上、 forwards 動畫完成後影響到元素上、both 兩者兼具。默認值為 none。
iterationStart：可選，描述動畫應該在迭代中的哪個點開始。例如，0.5 表示在第一次迭代中途開始，並且設置此值後，具有 2 次迭代的動畫將在第三次迭代中途結束。默認為 0.0。
iterations：可選，動畫應該重復的次數。默認為 1，也可以取 infinity 的值，使其在元素存在時重復。
以下代碼為本例中的具體實現，HTML中有若幹個 .petal 元素，然後 JavaScript 中獲取到所有 .petal 元素添加隨機動畫，css中添加兩種旋轉和變形兩種動畫，實現櫻花花瓣飄落的效果。
<div id="petals_container"> <div class="petal"></div> <!-- ... --> <div class="petal"></div> </div>
var petalPlayers = [];
function animatePetals() {
var petals = document.querySelectorAll('.petal');
if (!petals[0].animate) {
var petalsContainer = document.getElementById('petals_container');
return false;
}
for (var i = 0, len = petals.length; i < len; ++i) {
var petal = petals[i];
petal.innerHTML = '<div class="rotate"><img src="petal.jpg" class="askew"></div>';
var scale = Math.random() * .6 + .2;
var player = petal.animate([{
transform: 'translate3d(' + (i / len * 100) + 'vw,0,0) scale(' + scale + ')',
opacity: scale
},
{
transform: 'translate3d(' + (i / len * 100 + 10) + 'vw,150vh,0) scale(' + scale + ')',
opacity: 1
}
], {
duration: Math.random() * 90000 + 8000,
iterations: Infinity,
delay: -(Math.random() * 5000)
});
petalPlayers.push(player);
}
}
animatePetals();
.petal .rotate {
animation: driftyRotate 1s infinite both ease-in-out;
perspective: 1000;
}
.petal .askew {
transform: skewY(10deg);
display: block;
animation: drifty 1s infinite alternate both ease-in-out;
perspective: 1000;
}
.petal:nth-of-type(7n) .askew {
animation-delay: -.6s;
animation-duration: 2.25s;
}
.petal:nth-of-type(7n + 1) .askew {
animation-delay: -.879s;
animation-duration: 3.5s;
}
/* ... */
.petal:nth-of-type(9n) .rotate {
animation-duration: 2s;
}
.petal:nth-of-type(9n + 1) .rotate {
animation-duration: 2.3s;
}
/* ... */
@keyframes drifty {
0% {
transform: skewY(10deg) translate3d(-250%, 0, 0);
display: block;
}
100% {
transform: skewY(-12deg) translate3d(250%, 0, 0);
display: block;
}
}
@keyframes driftyRotate {
0% {
transform: rotateX(0);
display: block;
}
100% {
transform: rotateX(359deg);
display: block;
}
}
完整代碼可查看文後鏈接 🔗。
CSS 判斷手機橫屏
本例 50音小遊戲 應用是針對移動端開發，未作pc端的樣式適配，所以可以添加一個橫屏引導頁面提示用戶使用豎屏。在 CSS 中判斷移動設備是否處於橫屏狀態，需要用到 aspect-ratio 進行媒體查詢，通過測試 viewport 的寬高比來進行判斷。
aspect-ratio寬高比屬性被指定為 <ratio> 值來代表 viewport 的寬高比。其為一個范圍，可以使用 min-aspect-ratio 和 max-aspect-ratio 分別查詢最小和最大值。基本語法如下：
/* 最小寬高比 */
@media (min-aspect-ratio: 8/5) {
// ...
}
/* 最大寬高比 */
@media (max-aspect-ratio: 3/2) {
// ...
}
/* 明確的寬高比, 放在最下部防止同時滿足條件時的覆蓋 */
@media (aspect-ratio: 1/1) {
// ...
}
在應用中的具體實現方式是添加一個 .mod_orient_layer 引導層並隱藏，當達到最小寬高比時將其顯示：
<div class="mod_orient_layer"></div>
.mod_orient_layer {
display: none;
position: fixed;
height: 100%;
width: 100%;
left: 0;
top: 0;
right: 0;
bottom: 0;
z-index: 999;
background: #FFFFFF url('landscape.jpg') no-repeat center;
background-size: auto 100%;
}
@media screen and (min-aspect-ratio: 13/8) {
.mod_orient_layer {
display: block;
}
}
實現效果：
兼容性
下面是本文中涉及的幾個屬性的兼容性視圖，在實際生產項目中需要註意兼容性適配。
Photoshop 技能
logo設計
logo 主要由兩個元素構成由一個 ⛩️ 圖標和日語平假名 あ 構成，都是經典的日系元素，同時對 あ 進行拉伸漸變，形成類似 ⛩️ 的陰影，使字母和圖形巧妙連接在一起，使畫面和諧。logo背景色使用應用主題背景色，與頁面在無形之中建立聯系，形成 全鏈路 統一風格標準。（編不下去瞭。。。😂
⛩ 鳥居原始模型來源於 dribbble： https://dribbble.com
外部鏈接及參考資料
櫻花散落動畫完整版 https://codepen.io/dragonir/full/WNjEPwW
Dark Mode Support in WebKit https://webkit.org/blog/8840/dark-mode-support-in-webkit
PWA技術理論+實戰全解析 https://www.cnblogs.com/yangyangxxb/p/9964959.html
H5 PWA技術 https://zhuanlan.zhihu.com/p/144512343
aspect-ratio https://developer.mozilla.org/zh-CN/docs/Web/CSS/@media/aspect-ratio
Service Worker https://developer.mozilla.org/zh-CN/docs/Web/API/Service_Worker_API
Element.animate() https://developer.mozilla.org/zh-CN/docs/Web/API/Element/animate
作者：dragonir 博客地址：https://www.cnblogs.com/dragonir/p/15041977.html
到此這篇關於五十音小遊戲中的前端知識的文章就介紹到這瞭,更多相關前端知識小遊戲內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！