Summary of front-end knowledge in the Gokudō game

background

In the early stages of learning Japanese, I found that it was not very easy to remember the Japanese 50 sounds, and remembering the katakana was particularly difficult. At this time, I thought it would be great if there was an app that could make full use of fragmented time and allow me to practice the 50 sounds at any time during lunch break or on the subway. So I searched App Store , and indeed there are a lot of apps for learning the 50 sounds, but the apps in the store either contain in-app purchases, have ads, or are over 40M in size. I didn't find an app that satisfied me. So I decided to write one myself, mainly introducing some of my gains in the process of developing and designing this application.

accomplish

Online experience address: https://dragonir.github.io/kanaApp/

The implementation effect is as follows. The application is mainly divided into three pages:

• Home page: includes menu options (Hiragana practice, Katakana practice, Mixed practice), dark mode switch button.
• Answer page: includes remaining chances and score display area, middle question area, and answer button at the bottom.
• Results page: result score display and return to home page button.

The answering logic rule is to select the correct option corresponding to the word in the question display area from 4 answer buttons given. The application will give feedback and score the wrong answers based on the clicks. After 10 mistakes, the game ends and the result page is loaded. The game logic implementation is not the main content of this article, so it will not be discussed in detail later. The main content of this article is the introduction of the front-end knowledge involved in the development process of this mini-game.

Dark Mode ⚪⚫

As Windows 10 , MacOs , Android and other systems have successively launched dark modes, browsers have also begun to support the detection of system theme color configurations, and more and more web applications have been configured with dark mode switching functions. In order to optimize the visual experience of 50音小游戲, I also configured a dark style, and the effect is as follows:

CSS media query to determine dark mode

prefers-color-scheme media feature is used to detect whether the user has set the system's theme color to light or dark. The usage syntax is as follows:

@media (prefers-color-scheme: value) {} value has the following 3 values:

• light : Indicates that the user's system supports dark mode and is set to a light theme (the default).
• dark : Indicates that the user's system supports dark mode and is set to a dark theme.
• no-preference : Indicates that the user's system does not support dark mode or cannot know whether it is set to dark mode (deprecated).

If the result is no-preference , this media feature cannot be used to determine whether the host system supports setting the theme color, or whether the user has actively set it to no preference. For privacy protection and other reasons, users or user agents may also set it to no-preference within the browser in some cases.

In the following example, when the system theme color is dark, the background color of the .demo element is #FFFFFF ; when the system theme color is light, the background color of the .demo element is #000000 .

@media (prefers-color-scheme: dark) {
  .demo { background: #FFFFFF; }
}
@media (prefers-color-scheme: light) {
  .demo { background: #000000; }
}

JavaScript to determine dark mode

window.matchMedia() method returns a new MediaQueryList object that represents the results of parsing the specified media query (en-US)字符串. The returned MediaQueryList can be used to determine whether Document matches a media query, or to monitor a document to determine if it matches or stops matching the media query. The MediaQueryList object has the properties matches and media , and the methods addListener and removeListener .

Use matchMedia as the judgment medium to identify whether the system supports the theme color:

if (window.matchMedia('(prefers-color-scheme)').media === 'not all') {
  // The browser does not support the theme color setting}
if (window.matchMedia('(prefers-color-scheme: dark)').matches){
  // dark mode } else {
  // Light mode}

In addition, you can also dynamically monitor the status of the system's dark mode and respond in real time according to the switching of the system's dark mode:

window.matchMedia('(prefers-color-scheme: dark)').addListener(e => {
  if (e.matches) {
    // Turn on dark mode } else {
    // Turn off dark mode }
});

Or detect dark or light mode individually:

const listeners = {
  dark: (mediaQueryList) => {
    if (mediaQueryList.matches) {
      // Turn on dark mode}
  },
  light: (mediaQueryList) => {
    if (mediaQueryList.matches) {
      // Turn on light mode}
  }
};
window.matchMedia('(prefers-color-scheme: dark)').addListener(listeners.dark);
window.matchMedia('(prefers-color-scheme: light)').addListener(listeners.light);

In the 50-tone game, JavaScript is used to detect whether the system has turned on the dark mode, and dynamically add css class names to automatically load the dark mode. At the same time, a dark and light color switching button is also provided, so that the theme can be switched manually.

Determining dark mode in HTML elements

When the page uses image elements, you can directly determine whether the system has enabled dark mode in HTML . like:

<picture>
  <source srcset="dark.jpg" media="(prefers-color-scheme: dark)">
  <img src="light.jpg">
</picture>

The picture element allows us to display different pictures on different devices and is generally used for responsiveness. HTML5 introduces the <picture> element, which allows more flexible adjustment of image resources. The <picture> element contains zero or more <source> elements and one <img> element. Each <source> element matches a different device and references a different image source. If there is no match, url in src attribute of the <img> element is selected.

Note: The <img> element is placed after the last <picture> element. If the browser does not support this attribute, the image in <img> element will be displayed.

Offline Cache

In order to be able to generate shortcuts on the desktop for quick access like native applications and use it offline anytime and anywhere, 50音小游戲uses offline caching technology. It is a PWA應用. The following is a brief description of PWA離線應用implementation technology.

PWA (progressing web app) is下一代WEB應用模型. A PWA application is first a web page, and uses App Manifest and Service Worker to implement functions such as installation and offline.

Features:

• Progressive: Suitable for all users with any browser, as it is developed with progressive enhancement as its core purpose.
• Responsive: fits any form factor: desktop, mobile, tablet, or whatever comes next.
• Connection independence: Ability to work offline or in low-quality network conditions with the help of service workers.
• Offline push: Using push message notifications can make our application like Native App and improve the user experience. Timely updates: Always kept up to date with the service worker update process.
• Security: Served over HTTPS to prevent snooping and ensure content has not been tampered with.

Configuration page parameters

Add the manifest.webmanifest or manifest.json file to the project root directory and write the following configuration information into the file. In this example, the page parameter information of 50音小游戲is configured as follows:

// 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"
    }
  ]
}

Parameter Description:

• name : The name of Web App , which is also the name of the application icon when saved on the desktop.
• short_name : When name is too long, short_name will be used instead of name , which is the abbreviation of Web App .
• start_url : Specifies URL to load when the user opens the Web App . URL will be relative to the path where manifest file is located.
• display : Specifies the display mode of the application. It has four values ​​to choose from:

fullscreen : Full screen display, will fill up all the display area as much as possible.

standalone : ​​Browser-related UI (such as navigation bar, toolbar, etc.) will be hidden, looking more like a Native App .

minimal-ui : The display form is similar to standalone , and the browser-related UI will be minimized to a button. Different browsers have slightly different implementations. browser : Generally speaking, the style will be the same as when opening it with a normal browser.

It should be noted that when the browser of some systems does not support fullscreen , it will be displayed as a standalone effect. When it does not support standalone , it will be displayed as minimal-ui effect, and so on.

description : Application description.

icons : Specifies the application's desktop icon and launch page image, expressed as an array:

• sizes: icon size. By specifying the size, the system will select the most appropriate icon to display in the corresponding position.
• src: icon path. A relative path is relative to the manifest file, and an absolute path can also be used.
• type: icon image type. The browser will select the image closest to 128dp(px = dp * (dpi / 160)) from icons as the startup screen image.

background_color : Specifies the background color of the startup screen. Using the same color can achieve a smooth transition from the startup screen to the home page, and can also be used to improve the user experience when page resources are loading.

theme_color : Specifies the theme color of Web App . This property can be used to control the color of the browser UI . For example, the color of the status bar, the status bar in the content page, and the address bar.

Configuration information automatic generation tool: https://tomitm.github.io/appmanifest/

Configuring HTML Files

Import the manifest configuration file into index.html and add the following configuration information in head to make it compatible with 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>Kana Game</title>

• apple-touch-icon : Specifies the application icon, similar to the icons configuration in the manifest.json file, and also supports the sizes attribute for selection in different scenarios.
• apple-mobile-web-app-capable : Similar to the display function in manifest.json , you can enter standalone mode by setting it to yes .
• apple-mobile-web-app-title : Specifies the name of the app.
• apple-mobile-web-app-status-bar-style : Specifies the style of狀態欄status bar on iOS mobile devices. The options are Default , Black , and Black-translucent .

Registering Service Worker

Add the following code in index.html to register the 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`);
    }
  }
}

Use serviceWorkerContainer.register() to register Service worker , and add try...catch... fault-tolerant judgment to ensure normal operation when Service worker is not supported. Another thing to note is that only under https will there be a serviceWorker object in navigator .

Service workers essentially act as a proxy server between your Web application, the browser, and the network (when available). Designed to create an effective offline experience, it intercepts network requests and takes appropriate actions based on whether the network is available, updating resources from the server. It also provides entry points for push notifications and access to the background sync API . To learn more about Service workder , please visit the link at the end of the article 🔗 .

Add sw.js to the root directory and define cache information and methods

// Define the key value of the cache const cacheName = 'kana-v1';
// Define the files that need to be cached const staticAssets = [
  './',
  './index.html',
  './assets/css/main.css',
  './assets/js/main.js',
  './assets/images/bg.jpg'
  // ...
];

// Listen for the install event and cache the file after the installation is complete self.addEventListener('install', async e => {
  // Find the cache corresponding to the key and obtain the cache object that can be operated const cache = await caches.open(cacheName);
  // Add the files that need to be cached await cache.addAll(staticAssets);
  return self.skipWaiting();
});

// Listen for the activate event to update cached data self.addEventListener('activate', e => {
  // Ensure that the first load fetch triggers self.clients.claim();
});

// Listen for fetch events to use cached data:
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) {
  // Determine whether the current request needs to be cached const cache = await caches.open(cacheName);
  const cached = await cache.match(req);
  // If there is cache, use the cache. If not, get it from a new request. return cached || fetch(req);
}

async function networkAndCache(req) {
  const cache = await caches.open(cacheName);
  try {
    // Cache error is also obtained directly from the new request const fresh = await fetch(req);
    await cache.put(req, fresh.clone());
    return fresh;
  } catch (e) {
    const cached = await cache.match(req);
    return cached;
  }
}

The standard web worker programming method used in sw.js runs in another global context （self） , which is different from window , so self.addEventListener() is used.

Cache API is an interface provided by Service Worker to operate cache. These interfaces are implemented based on Promise , including Cache and Cache Storage . Cache directly interacts with requests and provides a storage mechanism for cached Request / Response object pairs. CacheStorage represents the storage instance of Cache object. We can directly access Cache API using the global caches property.

** Cache related API description:

• Cache.match(request, options) : Returns a Promise object that resolve to the first cached request that matches the Cache object.
• Cache.matchAll(request, options) : Returns a Promise object, the result of resolve is an array of all requests that match the Cache object. Cache.addAll(requests) : Receives an array of URL , retrieves and adds the returned response objects to the given Cache object.
• Cache.delete(request, options) : Searches for a Cache entry with key value request . If found, the Cache entry is deleted and a Promise object resolve to true is returned; if not found, a Promise object resolve to false is returned.
• Cache.keys(request, options) : Returns a Promise object, the result of resolve is an array of Cache object key values.

Note: request.clone() and response.clone() are used because request and response are a stream and can only be consumed once. The cache has been consumed once, and it will be consumed again when the HTTP request is initiated. At this time, clone method is used to clone the request.

Now, when the installed Service Worker page is opened, it will trigger Service Worker script update. When the timestamp of the last script update written to the Service Worker database is more than 24小時away from the current update, a Service Worker script update is triggered. When the sw.js file changes, it triggers Service Worker script to update. The update process is similar to the installation process, except that the updated Service Worker will not enter the active state immediately after the update is successfully installed. The updated Service Worker will coexist with the original Service Worker and run its install . Once the new Service Worker is installed successfully, it will enter the wait state and need to wait for the old version of Service Worker to enter/thread terminate.

For more advanced knowledge about Server Worker please refer to the link at the end of the article 🔗

Result:

PC side 🖥️: On Windows , there will be an installation prompt after opening the app for the first time in the browser. Click the installation icon to install it. An application shortcut will be generated on the desktop and start menu. Click the shortcut to open the app.

Mac 💻 : The above chromiumn內核browsers ( chrome , opera , new version edge ) are also similar. After installation, a shortcut will be generated in launchpad .

Mobile 📱: iPhone . Select Save to Desktop in the browser to generate a desktop icon. Click the icon to open the offline application.

Cherry Blossom Falling 🌸

In order to enhance the visual effect and interest, the effect of falling cherry blossoms 🌸 was added to the page. The falling effect animation mainly uses Element.animate() method.

Element 's animate() method is a convenience method that creates a new Animation , applies it to the element, and then runs the animation. It will return a newly created Animation object instance. Multiple animation effects can be applied to an element. You can get a list of these animation effects by calling this function: Element.getAnimations() .

Basic syntax:

var animation = element.animate(keyframes, options);

parameter:

• keyframes : keyframes. An object representing a collection of keyframes.
• options : An optional integer representing the duration of the animation (in milliseconds), or an object containing one or more time properties:

id : Optional, a property that can be used as a unique identifier in animate() : a string ( DOMString ) used to reference the animation delay : Optional, the number of milliseconds to delay the start time, the default value is 0 .

direction : optional, the direction of the animation. Runs forward normal , runs backward reverse , switching direction after each iteration alternate , runs backward and switching direction after each iteration alternate-reverse . The default is normal .

duration : Optional, the number of milliseconds the animation takes to complete each iteration. The default value is 0 . easing : optional, how often the animation changes over time. Acceptable preset values ​​include linear , ease , ease-in , ease-out , ease-in-out , and a custom value cubic-bezier , such as cubic-bezier(0.42, 0, 0.58, 1) . The default value is linear .

endDelay : optional, a delay after the end of an animation, the default value is 0 .

fill : optional, defines when the animation effect affects the element. It affects the element before the backwards animation starts, affects the element after forwards animation is completed, both . The default value is none .

iterationStart : Optional, describes at which point in the iteration the animation should start. For example, 0.5 means starting halfway through the first iteration, and with this value set, an animation with 2 iterations will end halfway through the third iteration. The default is 0.0 .

iterations : Optional, the number of times the animation should be repeated. The default value is 1 , and it can also take a value of infinity to repeat the element if it exists.

The following code is the specific implementation in this example. There are several .petal elements in HTML . Then JavaScript gets all .petal elements and adds random animations. Two types of rotation and deformation animations are added in CSS to achieve the effect of cherry blossom petals falling.

<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;
  }
}

The complete code can be found in the link after the article 🔗 .

CSS determines the horizontal screen of the mobile phone

In this example, 50音小游戲application is developed for mobile devices and has not been adapted to the PC style, so a horizontal screen guidance page can be added to prompt users to use the vertical screen. To determine whether a mobile device is in landscape mode in CSS , you need to use aspect-ratio for media query, which is done by testing the aspect ratio of viewport .

aspect-ratio ratio property is specified as a <ratio> value representing the aspect ratio of viewport . It is a range, and you can use min-aspect-ratio and max-aspect-ratio to query the minimum and maximum values ​​respectively. The basic syntax is as follows:

/* Minimum aspect ratio */
@media (min-aspect-ratio: 8/5) {
  // ...
}
/* Maximum aspect ratio */
@media (max-aspect-ratio: 3/2) {
  // ...
}
/* Clear aspect ratio, put it at the bottom to prevent overlap when all conditions are met*/
@media (aspect-ratio: 1/1) {
  // ...
}

The specific implementation method in the application is to add a .mod_orient_layer guide layer and hide it, and then display it when the minimum aspect ratio is reached:

<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;
  }
}

Result:

compatibility

The following is a compatibility view of several attributes involved in this article. In actual production projects, you need to pay attention to compatibility adaptation.

Photoshop skills

Logo Design

logo is mainly composed of two elements: a ⛩️ icon and Japanese Hiraganaあ, both of which are classic Japanese elements. At the same time, theあis stretched and gradient to form a shadow similar to ⛩️ , which cleverly connects the letters and graphics and makes the picture harmonious. The logo background color uses the application theme background color, which establishes an invisible connection with the page and forms a unified style standard for全鏈路. (I can’t continue writing…😂

⛩ original model of Torii comes from dribbble : https://dribbble.com

External links and references

Sakura scattering animation full version https://codepen.io/dragonir/full/WNjEPwW

Dark Mode Support in WebKit https://webkit.org/blog/8840/dark-mode-support-in-webkit

PWA technology theory + practical analysis https://www.cnblogs.com/yangyangxxb/p/9964959.html

H5 PWA technology 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

Author: dragonir Blog address: https://www.cnblogs.com/dragonir/p/15041977.html

This is the end of this article about the front-end knowledge in the Gokudō game. For more relevant front-end knowledge game content, please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope everyone will support 123WORDPRESS.COM in the future!