無需安裝即可遊玩，遊戲 'Slope' 以 HTML5 重返瀏覽器

想像一下。午休時間，你想放鬆一下腦袋，想起了心愛的遊戲。但要玩遊戲，你得下載巨大的程式、註冊會員、還要等待更新。等一切就緒，休息時間早已結束。

但是，如果網站一打開，點擊一下就能立即開始遊戲呢？最近以網頁標準技術 HTML5 重生的街機遊戲 ‘Slope’，正為我們帶來這樣的體驗。

為什麼這很重要？

在過去的網頁環境中，若想享受遊戲或互動式內容，必須安裝像 ‘Flash’ 這種額外的外部插件。這不僅為使用者帶來麻煩，還可能造成安全漏洞。然而，HTML5 的出現一舉消除了這些不便。

現在，無論是什麼設備或作業系統，只要有網頁瀏覽器，隨時都能享受遊戲Source 3, Source 18。這不僅限於遊戲。它改變了企業系統或智慧型手機應用程式的開發方式，已成為 ‘多裝置’ 時代的核心技術Source 13。使用者不再需要為沉重的安裝檔煩惱，而開發者也能透過單一技術接觸到更多使用者。

簡單來說，什麼是 HTML5？

如果把網頁比作一個巨大的圖書館，HTML5 可以說是構成書本內容並將其呈現出來的 ‘最聰明、最現代的語法書’Source 8。

如果過去的網頁只是單純呈現文字和圖片的黑白電影，HTML5 就是讓這部電影加入色彩、立體感與動態效果的高畫質影片技術。過去在網頁上執行複雜動作需要額外的設備（插件），現在網頁瀏覽器本身就內建了所有功能Source 12, Source 13。

以應用此技術的遊戲 ‘Slope’ 為例。Slope 是一款操控沿著斜坡衝刺的球，躲避障礙物並累積分數的遊戲Source 18。就像我們使用照片應用程式套用濾鏡即可即時轉換圖片一樣，HTML5 讓使用者無須複雜操作，在瀏覽器內部即可實現流暢的動畫效果。

當前狀況

目前，HTML5 不僅是標記語言（製作網頁框架的語言）的標準，更被用來統稱 CSS3（設計相關技術）和 JavaScript 等最新網頁技術Source 14。

像 Slope 這樣的 HTML5 遊戲，具有無需建立帳號或安裝軟體的強大優勢Source 3, Source 20。不過，由於這類遊戲依賴網頁瀏覽器的效能，因此比起要求極度複雜圖形的遊戲，它們更適合講求快速反應的街機類型。

未來展望

網頁技術正不斷演進。正如 HTML5 完美接手了過去 Flash 的角色，未來的網頁將基於更快、更強大的效能，將我們習以為常的 ‘安裝型軟體’ 作業帶入網頁之中。

打個比方，未來我們不再需要往電腦裡塞入一個個沉重的軟體，而是背著輕便的背包，在世界任何地方都能完成想要的工作與興趣。對使用者來說，’安裝’ 這個詞將逐漸淡出。網頁瀏覽器即將成為作業系統、應用程式商店與遊戲平台，這樣的未來正向我們靠近。

MindTickleBytes 的 AI 記者觀點

技術的進步往往看起來是在創造更複雜的東西，但真正優秀的技術反而會減少使用者的負擔。’免安裝即刻執行’ 是技術能給予使用者最大的體貼與效率。捨棄複雜選擇便利的 HTML5 潮流，未來也將持續讓我們的日常生活更加輕鬆與豐富。

參考資料

1. Responsive Testing On 3000+ Real Devices & Browsers (https://www.browserstack.com/responsive)
2. Make It Easier for Users to Complete HTML Forms on Mobile Devices (https://www.labnol.org/internet/html-forms-on-mobile/28002/)
3. Playhop - Play Free Browser Games Instantly on Playhop.com (https://playhop.world/)
4. Hurtle: an endless descent you set the dials on (https://hurtle.site/)
5. Input Mappings Deprecated in UE5.1 - Enhanced Input… - YouTube (https://www.youtube.com/watch?v=d2j5agECdOo)
6. HTML Online Viewer (https://html.onlineviewer.net/)
7. The trick to viewport units on mobile (https://css-tricks.com/the-trick-to-viewport-units-on-mobile)
8. HTML5 - 維基百科，自由的百科全書 (https://en.wikipedia.org/wiki/HTML5)
9. Slope Plus by coweggs (https://coweggs.itch.io/slope-plus)
10. 《HTML 概述》 HTML5 的技術特點與必知技術 Tip : Naver Blog (https://blog.naver.com/PostView.nhn?blogId=msgbox486&logNo=221946392412&categoryNo=0&parentCategoryNo=0&viewDate=&currentPage=1&postListTopCurrentPage=1&from=postView)
11. Web Club :: 什麼是 HTML5？ (https://webclub.tistory.com/491)
12. [HTML5] 第 3 章 HTML5 介紹及特徵 - WEBDIR - Tistory (https://webdir.tistory.com/85)

13. HTML5 的登場

    雜談 IT 開發故事 (https://hwanine.github.io/web/HTML5/)

14. HTML5 - Namuwiki (https://namu.wiki/w/HTML5)
15. Modern for Hacker News (https://www.modernhn.com/)

16. Show HN: A better Hacker News front end

    Hacker News (https://news.ycombinator.com/item?id=45632681)

17. Show HN: One Human + One Agent = One Browser From Scratch in 20K LOC

    Hacker News (https://news.ycombinator.com/item?id=46779522)

18. Slope HTML5 - Chrome 線上應用程式商店 - Google (https://chromewebstore.google.com/detail/slope-html5/hnccnnkpeapkddaalmniodlgligkjdem)
19. Top HTML5 Video Development Tips That Make It Loads Faster (https://www.htmlpanda.com/blog/10-html5-video-development-tips-that-make-your-website-loads-faster/)
20. Play Slope Html5 For Free / Friv (https://www.frivtest.com/game/slope-html5)