整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
著互聯網的普及和技術的發展，網頁游戲已經成為娛樂和休閑活動的重要組成部分。無需安裝任何應用程序，只需打開瀏覽器，您就可以暢玩各種類型的網頁游戲。然而，開發網頁游戲并不是一項容易的任務，因為不同類型的游戲需要不同的開發方式和技術。在本文中，我們將探討一些常見的網頁游戲類型以及它們的開發方式。
1. 休閑游戲開發
休閑游戲通常以其簡單的玩法和易于上手的特點而聞名。這些游戲包括匹配三消、點擊放置、太空射擊等類型。它們通常采用HTML、CSS和JavaScript等前端技術進行開發。對于初學者來說，休閑游戲是一個很好的起點，因為它們的開發相對簡單，但仍然可以提供有趣的游戲體驗。
2. 益智游戲開發
益智游戲側重于解謎和問題解決。數獨、拼圖游戲和逃脫房間游戲是其中的代表。這些游戲需要復雜的邏輯和算法，通常使用JavaScript來實現。開發益智游戲需要精心設計的謎題和游戲機制，以挑戰玩家的智力。
3. 動作游戲開發
動作游戲要求玩家具備快速反應和出色的手眼協調能力。平臺游戲、射擊游戲和跑酷游戲都屬于這一類別。為了實現流暢的游戲體驗，開發者通常使用HTML5 Canvas或WebGL等技術進行圖形渲染，同時使用JavaScript處理游戲邏輯。
4. 角色扮演游戲開發 (RPG)
RPG游戲允許玩家扮演虛構角色，在虛擬世界中冒險、戰斗和升級。這類游戲的開發涉及到角色管理、任務系統和戰斗機制的設計。前端技術，如HTML、CSS和JavaScript，通常用于創建游戲界面，而JavaScript用于實現游戲邏輯。
5. 卡牌和策略游戲開發
卡牌游戲和策略游戲要求玩家制定策略和使用卡牌或資源來獲勝。這些游戲的開發通常需要前端技術來創建游戲界面，同時使用JavaScript來處理游戲規則和邏輯。玩家需要思考策略，因此這類游戲往往具有深度和復雜性。
6. 多人在線游戲開發 (MMO)
MMO游戲允許多個玩家在線互動，通常包括多種游戲類型，如角色扮演、戰略和社交互動。開發MMO游戲需要服務器端和客戶端的開發，服務器端通常使用后端技術（如Node.js或Python），而客戶端使用前端技術和游戲引擎來創建用戶界面和游戲體驗。
7. 體育游戲
體育游戲模擬各種體育運動，玩家可以參與并體驗。足球、籃球、賽車等體育游戲通常使用HTML5 Canvas或WebGL來呈現游戲場景，同時使用JavaScript來實現游戲控制和邏輯。玩家需要運用戰術和技巧來取得勝利。
8. 教育游戲開發
教育游戲旨在教育和培訓。數學游戲、語言學習游戲和歷史模擬游戲等類型的教育游戲通常使用前端技術和自定義邏輯來創建教育內容和互動元素。這些游戲可以幫助玩家學到新知識和技能。
總之，網頁游戲的類型多種多樣，每種類型都有其獨特的特點和開發要求。開發者可以根據自己的興趣和技能選擇適合的類型，并學習相關的技術來實現各種令人興奮的網頁游戲。無論您是初學者還是有經驗的開發者，網頁游戲的開發都是一個創造性和有趣的過程，可以為玩家帶來娛樂和挑戰。在不斷進化的互聯網游戲世界中，創造和分享您的游戲是一種獨特的樂趣。
簫 發自 凹非寺
量子位 | 公眾號 QbitAI
一位小哥耗時16個月打造的3D版賽車游戲，這兩天忽然火了起來。
只需一個瀏覽器，就能駕車從森林、海灘，“無縫切換”到廣袤的沙漠甚至平原：
無論春夏秋冬還是白天黑夜，也無論你用的是電動汽車、自行車（？）還是公共汽車：
甚至不想開的時候，還可以開啟自動駕駛模式，感受一波“AI飆車”的快樂。
△甚至有“自”行車&自動駕駛小巴
據小哥表示，這個名叫Slow Road的3D賽車游戲沒有用到任何傳統引擎，而是基于JavaScript編寫的，無需登錄就能直接在瀏覽器上運行。
要是電腦發出了吃力的聲音，稍微更改一下渲染配置就能搞定。
網友們也是嗨得不行：此情此景怎能少得了經典BGM逮蝦戶（Deja Vu）
△作者回復：我寫代碼時聽的是10小時沉浸版
還有網友回憶起了自己幾十年前做過的3D賽車游戲，這波屬實“爺青回”了：
來看看它究竟是怎么實現的。
與大多數3D賽車游戲采用Unity3D、UE等傳統引擎不同，Slow Roads是基于JavaScript編寫的。
具體來說，它采用了一個名叫Three.js的開源框架，相當于一個能實現3D效果的JavaScript庫，基于原生WebGL運行，可以在大部分網頁瀏覽器中搞定交互式2D/3D圖形。
除了開頭提到的隨意切換地點、季節和天氣以外，這個賽車游戲也可以隨意切換各種車型和視角。
此外，考慮到不同電腦對瀏覽器的適配，這款賽車游戲還給出了不同級別的渲染設置，從“粗糙大色塊”到更精細的樹木和圍欄都能生成。
要是有電腦顯卡的話，還可以更改一下瀏覽器設置，給圖形渲染加加速。
所以，這個賽車游戲中“任意變幻”的環境是如何生成的？
首先是生成環境地形。
小哥采用了類似柏林噪聲（Perlin noise）的自定義算法，來生成環境高度圖（Heightmap，用于生成三維地形的圖像），隨后進行簡單修改讓山景看起來更逼真。
柏林噪聲，Ken Perlin發明的自然噪聲生成算法，經常用于在游戲和特效中生成隨機內容，包括火焰、云彩、奇形怪狀的巖石以及樹木和大理石表面等。
△高度圖，圖源維基百科
隨后是制作賽道。
選擇地圖上一個不太陡峭/凹陷的地方作為起點后，選擇一個方向并測量周圍高度圖，以坡度最緩的路線作為道路中線，并給每個點注釋上元數據，包括道路寬度、曲率等。
值得注意的是，如果賽道鋪到一半出現“打結”的情況，也就是鋪到一半撞到了一起，一定要想辦法解決。這也是道路鋪設最難的地方之一：
△車在島上狂轉
接下來就是渲染環境了。
從圖中來看，整體環境被分成了很多個分辨率10m的大型網格，最大視距1km2；靠近道路時，每個網格又會被分成5×5的較小網格。
越接近道路中線，渲染越精細，最終道路高度和底層環境高度之間會進行插值，盡量讓它保持“無縫銜接”。
當然小哥表示，這種銜接并不是“真·無縫”的，但通常看不出來。
最后就是整個環境的渲染了，這里面也有一些小細節：
包括地面和懸崖紋理、基于柏林噪音做草色變化，以及給樹木等植被加上簡單陰影、在湖泊周圍渲染更多樹等。
除了環境之外，就是一些基礎物理學的配置了，包括重力、表面摩擦力和動力學計算等。
不過為了節省性能，小哥忽略了提示牌和樹木的碰撞。
此外，他也采用了更“平和”的電動汽車作為核心賽車手，因為這樣一來就不需要考慮齒輪或RPM等部件，而音頻和物理特性也更容易編寫了。（小哥稱：內燃機正逐漸過時！）
當然，隨著這款游戲的關注度上升，他表示后續還會進行更多優化。
隨著人們對這款游戲的好奇度提升，小哥也著重解答了幾個熱點問題。
例如，采用JavaScript編寫游戲的原因，是因為小哥想改變人們對瀏覽器的“刻板印象”，它可以做到比查資料更廣泛的事情，甚至還能更好地對游戲性能進行優化。
不過，目前這款游戲還沒有開源。小哥表示，后續可能會開源部分子系統，如圖形MOD接口等。
對于這款游戲的未來，小哥也立下了幾個flag，包括在環境上，開發更多的越野地點、加入更多環境細節，包括建筑、動物、植物陰影、燈光效果等；
賽車上，加入更多的賽車皮膚和車輛類型；天氣上，細化天氣類型（下雨、下雪、刮風等），也進一步改善已有天氣的效果；
功能上，將來會加入競爭模式和全球排行榜（包括限時競速、比拼距離等），同時對系統進一步進行優化，未來適配手柄、賽車模擬器等。
你做好上班摸魚的準備了嗎？（手動狗頭）
玩耍地址：
https://slowroads.io/
參考鏈接：
[1]https://twitter.com/anslogen
[2]https://news.ycombinator.com/item?id=33305234
[3]https://anslo.medium.com/slow-roads-tl-dr-a664ac6bce40
[4]10小時版逮蝦戶:https://www.youtube.com/watch?v=9ILQNSgE7mw
— 完 —
量子位 QbitAI · 頭條號簽約
關注我們，第一時間獲知前沿科技動態
幾天跟同事聊到最近在看什么小說，想起之前看過一篇文章說的是網絡十大水文，就想把起點上的小說信息爬一下，搞點可視化數據看看。這段時間正在看爬蟲框架-pyspider，覺得這種網站用框架還是很方便的，所以今天就給大家帶來這篇---起點中文網小說爬取。可視化我們放到下一集。
安裝使用
安裝和基本使用請查看pyspider中文文檔，我們這篇主要不是介紹pyspider哦。Mac安裝的過程中出現了一些問題，請看Mac安裝pycurl失敗，裝好以后使用pyspider all啟動。然后打開瀏覽器輸入：http://localhost:5000/
創建以后，我們就開始分析并編寫起點爬蟲了。
爬蟲編寫
打開起點中文網(https://www.qidian.com/)，選擇全部作品并按照字數排序
右鍵檢查元素，因為是靜態網頁，所以我們就直接解析網頁元素就行了，可以使用BeautifulSoup、PyQuery、xpath或者正在表達式。我習慣用xpath，所以就采這個坑了。
Chrome可自動生成xpath
但是生成的大部分情況下都不是很合適，比如/html/body/div[2]/div[5]/div[2]/div[2]/div/ul/li[1]/div[2]/h4/a，你看這有多長，還是自己寫吧，chrome瀏覽器可以幫我們驗證xpath這個是很方便的，有的人是按照xpathhelper插件，我覺得原生就很好用了, CTRL+F
按照此方式我們匹配到小說名、作者、更新狀態、更新時間、字數信息然后存儲到數據庫。
pyspider這個可視化調試的功能確實非常方便，但是我們看到了什么？框框？字數竟然是框框？我就懵逼了
網頁元素里看到的竟然也是這個？？？我不死心，再看看網頁源碼
好像有些什么編碼，但是為什么xpath查出來的是框框的，我百思不得騎姐，試了各種方式發現確實是方框，腫么辦捏？我考慮可以把獲取到的元素的html源碼打印出來，然后再提取一下，是不是可以呢？
OK，得到我們需要的數據了，但是這也不是小說字數呀，這就是我寫這篇文章的原因了，我們看到上面元素查看截圖中的font-face了，里面有一些.ttf、.woff，這些我們應該知道是字體文件，下載下來看一下
這到底是什么鬼？不明白，那就問谷哥和度姐吧，然后我就知道了字體反爬這個概念，漲姿勢呀！我明白了一個道理，要想漲姿勢，就得多嘗試，不然你怎么能知道還有這種姿勢呢？我的意思大家都懂吧，然后我就找到了fonttools這個python庫，但是還是走了很多彎路，里面提供的命令行識別不了，最后還是通過源碼調試找到了getBestCmap這個接口
下載woff字體文件，然后通過BytesIO轉化為內存文件，使用TTFont處理
看到打印的結果了嗎？只不過對應的數字變成了英文，我們自己定義一個字典對應一下就行了
字體搞定了，那最初我們需要的數據都有了
調試成功了，啟動我們的工程抓取吧
接下來是pyspider的坑（主要還是不熟悉）
首先要存儲數據，我們把detail_page函數最后的print換成return就行了，在pyspider的爬蟲回調函數中，return的數據將會記錄在默認數據庫中，默認數據庫在哪里？pyspider會創建一個data目錄，以Mac為例在~/data/result.db
我們在界面上看到的數據都記錄在這里，我在調試的過程中發現想要刪除已創建的工程非常麻煩，網上搜到的都是把group改成delete，status改成stop，然后24個小時候會刪除，可以通過修改配置時間來刪除，但是很麻煩，我們直接在數據庫里刪除豈不是更方便
還有一個task.db和result.db，result的就是我們return以后里面會寫入數據
result字段里面就是我們return的值，task.db里面是我們每次訪問的時候記錄的url信息，為什么嘞？pyspider中有一個很方便的功能，就是過濾已爬取的網頁
這個age配置的意思就是10天內再遇到這個任務就會忽略掉，所以我們在上面一個網頁中獲取其他的網頁鏈接進行訪問的時候，不用擔心會循環訪問。但是，這里又出現了另外一個問題
我們最后是通過先訪問字體鏈接，然后解析字數，再進行存儲，我本來以為起點的文字字體是每次請求的時候隨機生成的，每次都不一樣，結果后來發現總共也就生成了五種，這就出現了一個問題，同樣的請求不會被訪問，也就是當第二次出現這個字體文件的時候，我們的請求不會被處理，那么就沒法解析存儲了，我在網上查了怎么去除這個請求的過濾限制，沒找到，可能是我沒檢索到有效信息吧。但是發現一個有用的信息，pyspider是通過taskid來判斷重復的，就是我們在task.db中看到的taskid
這個taskid是怎么來的呢？我們在crawl函數源碼中看到
taskid是url的md5碼，而且在crawl的參數中如果傳遞了taskid，那么它就不會自動生成taskid了，那就到我靈機一動的時候了
在crawl中傳入taskid參數，這個參數可以搞一個整型每次都加1，這樣taskid就不會重復了，這樣我們訪問起點每頁小說數據的時候可以過濾重復的，訪問我們的字體信息時就不會過濾了，滿足了需求，beautiful！！！
那么本次爬取就結束了，數據有了下次我們再搞可視化，這次主要是想讓大家了解一下網絡字體反爬，你get到了嗎？
這一篇寫的可能有些人看不太明白，要說明一下這篇主要是想告訴大家網絡字體反爬的概念，所以其他的描述基本一筆帶過，因為這個靜態網頁爬取很簡單，也沒什么好詳細說的。之后有時間的話可以就爬蟲基礎單獨出一系列文章。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
