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