30 個(gè)純 HTML5 實(shí)現(xiàn)的游戲

覽器和 JavaScript 的功能逐年不斷的變強(qiáng)變大。曾幾何時(shí)，任何類型的游戲都需要Flash。但隨著 HTML5 發(fā)展，HTML5 + WebGL 游戲式就慢慢占領(lǐng)著這個(gè)舞臺(tái)。以下是30款流行的游戲，它們可以在所有現(xiàn)代瀏覽器中運(yùn)行，并且只使用web技術(shù)構(gòu)建。

1. HexGL

地址：http://hexgl.bkcore.com/

類型：街機(jī)，賽車

HexGL 是一款基于HTML5，JavaScript和WebGL的快節(jié)奏的賽車游戲。玩家可以使用鍵盤，觸摸屏設(shè)備或leap motion(體感控制器)來控制太空飛船。

2. CrossCode

地址：http://www.cross-code.com/en/home

類型：動(dòng)作，角色扮演

一個(gè)復(fù)古靈感的2D游戲設(shè)定在遙遠(yuǎn)的未來。這是一個(gè)充滿偉大的游戲機(jī)制，如組合，拼圖，技能樹，任務(wù)，物品等等。

3. Sketchout

地址：https://sketch-out.appspot.com/

類型：街機(jī)

Sketchout的任務(wù)保護(hù)你的行星，并通過改變流星的方向來消滅對(duì)手，通過使流星偏轉(zhuǎn)來保護(hù)您的星球并消滅對(duì)方，這款游戲有很棒的視覺效果和音樂特效。

4. Treasure Arena

地址：http://www.treasurearena.com/類型：多人，角色扮演，動(dòng)作

Treasure Arena 是一款動(dòng)態(tài)的競(jìng)技場(chǎng)戰(zhàn)斗游戲，最多可容納4名玩家。它具有不同的游戲模式，出色的幀率和配樂，是一個(gè)非常有趣的游戲。

5. Bejeweled

地址：http://bejeweled.popcap.com/html5/

類型：街機(jī)，解謎，娛樂

HTML5格式的經(jīng)典“寶石迷陣”游戲。這是一個(gè)官方克隆，因此可以正常運(yùn)行且外觀完美。

6. Missile Game

地址：http://missile-game.bwhmather.com/類型：街機(jī)

這是一款非常具有挑戰(zhàn)性的游戲，游戲中我們扮演的是一枚被發(fā)射進(jìn)隧道的導(dǎo)彈。游戲有很酷的黑白圖像，玩的時(shí)候會(huì)有很強(qiáng)的場(chǎng)景效果。

7. Gods Will Be Watching

地址：http://www.deconstructeam.com/games/gods-will-be-watching/類型：拼圖

在這個(gè)令人毛骨悚然（但又很棒）的游戲中，我和自己團(tuán)隊(duì)必須獨(dú)自生存40天。團(tuán)隊(duì)有六名成員，其中包括一只狗，一名精神病醫(yī)生和一個(gè)機(jī)器人，您必須與他們互動(dòng)，以使其保持溫暖，溫飽和理智的狀態(tài)。

8. Sinuous

地址：http://www.sinuousgame.com/類型：街機(jī)

一個(gè)簡(jiǎn)單的游戲，極簡(jiǎn)的圖形和流暢的幀率。拾取電源時(shí)避免與紅點(diǎn)碰撞。此外，如果你想要那些額外的積分，就需要不停向前移動(dòng)

9. Swooop

地址：http://swooop.playcanvas.com/類型：街機(jī)

在一個(gè)美麗多彩的3D世界里，到處飛翔，收集寶石和星星。

10. Free Rider HD

地址：http://www.freeriderhd.com/

Free Rider HD 是一款令人上癮的游戲，你可以在其他玩家繪制的賽道上騎自行車。可以在成千上萬的播放器曲目中選擇一個(gè)播放，也可以創(chuàng)建自己的曲目并分享。

11. Entanglement

地址：http://entanglement.gopherwoodstudios.com/zh-CN-index.html類型:拼圖,娛樂

這個(gè)游戲的目的是通過在網(wǎng)格上放置線段來創(chuàng)建一條盡可能長(zhǎng)的路徑。你可以單獨(dú)玩，也可以和朋友一起玩。

12. Escape from XP

地址：https://www.modern.ie/en-us/ie6countdown#escape-from-xp

類型：動(dòng)作，街機(jī)

用“Escape from XP”來慶祝 Windows XP 的終結(jié)。你的任務(wù)是拯救最后一個(gè)陷入Clippy暴政的開發(fā)人員。

13. Polycraft

地址：http://polycraftgame.com/類型：角色扮演，塔防，動(dòng)作

在這個(gè)很棒的3D游戲中，你到處收集資源，建造東西，完成任務(wù)。關(guān)于它的所有東西都經(jīng)過拋光，并且運(yùn)行也非常順暢。

14. 2048

地址：https://gabrielecirulli.github.io/2048/類型：拼圖

一個(gè)非常上癮的游戲，你可能已經(jīng)玩過了。在 2048 ，你移動(dòng)編號(hào)的圖塊并合并它們。當(dāng)界面中最大數(shù)字是`2048 時(shí)，游戲勝利。

15. Onslaught Arena

地址：http://arcade.lostdecadegames.com/onslaught_arena/

類型:動(dòng)作

一種快節(jié)奏的復(fù)古生存游戲，您可以使用不同的武器與成群的敵人作戰(zhàn)。

16. Angry Birds

地址：http://chrome.angrybirds.com/類型:游戲

《憤怒的小鳥》游戲，這就不用介紹了。

17. Cube Slam

地址:https://www.cubeslam.com/mcycrs

類型：街機(jī)，多人

具有豐富的色彩和炫酷的3D圖形乒乓球游戲。我們可以通過向朋友發(fā)送一個(gè)URL來挑戰(zhàn)他們，還可以通過網(wǎng)絡(luò)攝像頭看到對(duì)方。

18. The Wizard

地址：http://hypnoticowl.com/games/the-wizard/類型：動(dòng)作，角色扮演，策略

Wizard 是基于回合的地牢爬行者，在里面會(huì)遇到神話般的怪物并找到奇妙的咒語。該游戲具有酷炫的戰(zhàn)斗機(jī)制，有時(shí)可能會(huì)帶來很大挑戰(zhàn)。

19. X-Type

地址：http://phoboslab.org/xtype/類型：動(dòng)作，街機(jī)

在這款酷炫的太空射擊游戲中，你目的就是要起戰(zhàn)勝 Boss。

20. Cookie Clicker

地址：http://orteil.dashnet.org/cookieclicker/類型：休閑，搞笑

Cookie clicker 是一款可能為了開玩笑而創(chuàng)建的游戲，但仍然提供了大量的樂趣。你可以從0個(gè)cookie開始，然后單擊一些有效率的cookie，最后你可能會(huì)發(fā)現(xiàn)自己擁有數(shù)十億個(gè)cookie。

21. Elevator Saga

地址：http://play.elevatorsaga.com/類型：拼圖，編碼

這類屬于程序員類型游戲。在電梯中的任務(wù)是通過對(duì)電梯的運(yùn)動(dòng)進(jìn)行編程，以最有效的方式運(yùn)送人員，這些都是用 JavaScript 來完成的。

22. Game of Bombs

地址：http://gameofbombs.com/landing類型：動(dòng)作，角色扮演，多人

Game of Bombs是一個(gè)轟炸機(jī)類型的游戲，在廣闊地圖上，都有著敵方玩家。收集力量，皮膚和成就，以成為最佳轟炸機(jī)玩家的方式。

23. Olympia Rising

地址：http://or.paleozoic.com/類型：平臺(tái)游戲，動(dòng)作

Olympia Rising具有漂亮復(fù)古外觀圖形的游戲。它坐落在古希臘，在那里我們扮演的女人被賦予了重新的機(jī)會(huì)，所以我們的任務(wù)就是逃離死者的世界。

24. Pixel Race

地址: https://ned.im/pixel-race-game/類型：街機(jī)，賽車

Pixel Race是一款簡(jiǎn)單概念概念，你可以在收集硬幣的同時(shí)控制汽車以避開障礙物。如果有足夠的耐心和空閑時(shí)間，那么你可能會(huì)打破記錄（記錄為36309個(gè)硬幣）。

25. Little Alchemy

地址：https://littlealchemy.com/類型：拼圖

從這四個(gè)基本元素開始，將它們組合起來，創(chuàng)建510種可能的組合。

26. Arena5

地址：http://www.kevs3d.co.uk/dev/arena5/類型：街機(jī)

在數(shù)字領(lǐng)域中飛行并射擊幾何敵人以獲得高分。

27.Vector Runner Remix

地址:https://vector-runner-remix.tresensa.com/

類型：街機(jī)

在這個(gè)充滿色彩和幾何形狀的平臺(tái)游戲中，盡你所能奔跑吧。

28. Biolab Disaster

地址：http://playbiolab.com/類型:動(dòng)作

一款出色的像素藝術(shù)平臺(tái)游戲，你必須在這里逃脫充滿突變生物和其他不良生物的實(shí)驗(yàn)室。

29. World's Biggest PAC-MAN

地址:http://worldsbiggestpacman.com/#類型：街機(jī)

30. New Super Resident Raver

地址：http://games.jessefreeman.com/new-super-resident-raver/

從即將到來的僵尸入侵中拯救驚慌失措的人們。收集錢，升級(jí)你的武器和戰(zhàn)斗僵尸。

作者：Danny Markov 來源：tutorialzin 譯者：前端小智

原文：https://tutorialzine.com/2015/02/30-amazing-games-made-only-with-html5

JavaScript做一個(gè)貪吃蛇小游戲，無需網(wǎng)絡(luò) => 打開即可玩。

html代碼：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

        #game{
            width: 344px;
            background-color: #000;
            padding: 20px 8px;
            margin: 100px auto;
        }

        #score{
            color: #B7D4A8;
            text-align: center;
            font-size: 20px;
            font-weight: bold;
            margin-bottom: 10px;
        }

        #bg{
            width: 304px;
            height: 304px;
            background-color: #B7D4A8;
            padding: 20px;
            border-radius: 5%;
        }
        
        #main{
            width: 300px;
            height: 300px;
        /*    設(shè)置邊框*/
            border: 2px solid black;
            position: relative;
        }
        
        #food, .part{
            width: 8px;
            height: 8px;
            background-color: #000;
            border: 1px solid #B7D4A8;
            position: absolute;
            top: 0;
            left: 0;
        }

        #food{
            top: 50px;
            left: 100px;
        }
        
    </style>
    <script>

        /*
            1.頁面的布局
                - 注意事項(xiàng)：
                    背景顏色 #B7D4A8
                    窗口大小（10的倍數(shù)）
                        蛇的大小 10px(可見框)
                        食物的大小 10px（可見框）

             2.隨機(jī)設(shè)置食物的位置
                修改食物的top和left值（范圍0-290）
                并且必須是10的倍數(shù)

             3.設(shè)置蛇的移動(dòng)
                蛇的速度 10px
                檢查蛇是否吃到食物（蛇頭的坐標(biāo)和食物一致）
                記分

             4.吃到食物蛇的身體要增加
                - 設(shè)置身體的位置？

             5.設(shè)置游戲的結(jié)束機(jī)制
                - 撞墻
                - 撞自己
         */

        window.onload = function () {
            //獲取食物的對(duì)象
            var food = document.getElementById('food')
            //獲取主窗口
            var main = document.getElementById('main')
            //獲取蛇頭
            var head = document.getElementById('head')
            //獲取蛇
            var snake = document.getElementById('snake')
            //獲取蛇的所有的部分
            var parts = document.getElementsByClassName('part')

            //創(chuàng)建一個(gè)變量，存儲(chǔ)最大的left和top
            var MAXLEFT = main.clientWidth - 10 // 290
            var MAXTOP = main.clientHeight - 10 // 290

            //創(chuàng)建一個(gè)變量，表示蛇頭的運(yùn)動(dòng)方向
            var dir = null
            //創(chuàng)建一個(gè)變量，表示蛇的速度
            var speed = 10
            //創(chuàng)建一個(gè)變量，存儲(chǔ)用戶的分?jǐn)?shù)
            var score = 0
            //獲取分?jǐn)?shù)的span
            var scoreText = document.getElementById('score_text')


            //創(chuàng)建一個(gè)定時(shí)器用來控制蛇的運(yùn)動(dòng)
            var timer = setInterval(function () {
                //獲取蛇頭當(dāng)前的位置
                var left = head.offsetLeft
                var top = head.offsetTop


                switch (dir) {
                    case 'ArrowDown':
                    case 'Down':
                        //向下
                        top += 10
                        if(parts[1] && top === parts[1].offsetTop){
                            top -= 20
                        }
                        break
                    case 'ArrowUp':
                    case 'Up':
                        //向上
                        top -= 10
                        if(parts[1] && top === parts[1].offsetTop){
                            top += 20
                        }
                        break
                    case 'ArrowLeft':
                    case 'Left':
                        //向左
                        left -= 10
                        //如果蛇頭的left值，和第二節(jié)身子的left一樣了，則說明蛇掉頭了
                        if(parts[1] && left === parts[1].offsetLeft){
                            left += 20
                        }
                        break
                    case 'ArrowRight':
                    case 'Right':
                        //向右
                        left += 10
                        if(parts[1] && left === parts[1].offsetLeft){
                            left -= 20
                        }
                        break
                }

                //檢查蛇是否撞墻
                if(left < 0 || left > MAXLEFT || top < 0 || top > MAXTOP){
                    clearInterval(timer)
                    alert('撞墻了，游戲結(jié)束！')
                    return
                }


                //檢查蛇是否吃到食物
                if(left === food.offsetLeft && top === food.offsetTop){
                    //進(jìn)入判斷，證明蛇吃到了食物（蛇頭與食物重合）
                    //加分
                    score++
                    // 000000001    00000000100
                    scoreText.innerHTML = ('00000000' + score).slice(-8)


                    //蛇變長(zhǎng)..
                    //創(chuàng)建一個(gè)表示蛇的div
                    var body = document.createElement('div')

                    //設(shè)置class，part
                    body.className = 'part'

                    //設(shè)置蛇身體的位置, 獲取最后一個(gè)元素的位置
                    //parts是一個(gè)數(shù)組，里邊保存了蛇所有，包括蛇頭和身體
                    body.style.left = parts[parts.length - 1].offsetLeft + 'px'
                    body.style.top = parts[parts.length - 1].offsetTop + 'px'


                    //將身體添加到蛇里邊
                    snake.appendChild(body)

                    //改變食物的位置
                    changeFood(food)
                }


                //設(shè)置身體的位置，將當(dāng)前身體設(shè)置為它前一個(gè)身體的位置
                for(var i=parts.length-1 ; i>0 ; i--){

                    var pLeft = parts[i-1].offsetLeft
                    var pTop = parts[i-1].offsetTop

                    //檢查蛇頭的坐標(biāo)是否和身體重合
                    if(left === pLeft && top === pTop){
                        //撞到自己了
                        clearInterval(timer)
                        alert('撞自己了，游戲結(jié)束！')
                        return

                    }


                    parts[i].style.left = pLeft + 'px'
                    parts[i].style.top = pTop + 'px'
                }


                //修改蛇的位置
                head.style.left = left + 'px'
                head.style.top = top + 'px'


            },200)

            //創(chuàng)建一個(gè)數(shù)組，存儲(chǔ)所有的方向鍵的值
            var keys = ['ArrowDown','ArrowUp','ArrowLeft','ArrowRight','Right','Up','Left','Down']

            //綁定一個(gè)鍵盤事件
            document.onkeydown = function (event) {
                //檢查用戶按的是否是方向鍵
                if(keys.indexOf(event.key) !== -1){
                    //修改dir的值
                    dir = event.key
                }

            }


            //定義一個(gè)函數(shù)，來隨機(jī)生成food的位置
            function changeFood(food) {
                //隨機(jī)生成left和top
                // left 和 top 應(yīng)該是10的倍數(shù)
                var left = Math.round(Math.random() * (MAXLEFT/10)) * 10
                var top = Math.round(Math.random() * (MAXTOP/10)) * 10

                //修改food的位置
                food.style.left = left+'px'
                food.style.top = top + 'px'
            }

            // setInterval(function () {
            //     changeFood(food)
            // },500)


        }

    </script>
</head>
<body>

<div id="game">
    <div id="score">
        score:<span id="score_text">00000000</span>
    </div>
    <div id="bg">
        <!--游戲的主窗口-->
        <div id="main">
<!--            創(chuàng)建表示蛇的元素-->
            <div id="snake">
                <div id="head" class="part"></div>
            </div>

<!--            定義食物-->
            <div id="food"></div>

        </div>
    </div>
</div>


</body>
</html>

在瀏覽器打開該文件：

直接按上下左右鍵就可以玩起來了

撞墻了=>刷新網(wǎng)頁即可重新開始哦：

歡迎關(guān)注我的原創(chuàng)文章：小伙伴們！我是一名熱衷于前端開發(fā)的作者，致力于分享我的知識(shí)和經(jīng)驗(yàn)，幫助其他學(xué)習(xí)前端的小伙伴們。在我的文章中，你將會(huì)找到大量關(guān)于前端開發(fā)的精彩內(nèi)容。

學(xué)習(xí)前端技術(shù)是現(xiàn)代互聯(lián)網(wǎng)時(shí)代中非常重要的一項(xiàng)技能。無論你是想成為一名專業(yè)的前端工程師，還是僅僅對(duì)前端開發(fā)感興趣，我的文章將能為你提供寶貴的指導(dǎo)和知識(shí)。

在我的文章中，你將會(huì)學(xué)到如何使用HTML、CSS和JavaScript創(chuàng)建精美的網(wǎng)頁。我將深入講解每個(gè)語言的基礎(chǔ)知識(shí)，并提供一些實(shí)用技巧和最佳實(shí)踐。無論你是初學(xué)者還是有一定經(jīng)驗(yàn)的開發(fā)者，我的文章都能夠滿足你的學(xué)習(xí)需求。

此外，我還會(huì)分享一些關(guān)于前端開發(fā)的最新動(dòng)態(tài)和行業(yè)趨勢(shì)。互聯(lián)網(wǎng)技術(shù)在不斷發(fā)展，新的框架和工具層出不窮。通過我的文章，你將會(huì)了解到最新的前端技術(shù)趨勢(shì)，并了解如何應(yīng)對(duì)這些變化。

我深知學(xué)習(xí)前端不易，因此我將盡力以簡(jiǎn)潔明了的方式解釋復(fù)雜的概念，并提供一些易于理解的實(shí)例和案例。我希望我的文章能夠幫助你更快地理解前端開發(fā)，并提升你的技能。

如果你想了解更多關(guān)于前端開發(fā)的內(nèi)容，不妨關(guān)注我的原創(chuàng)文章。我會(huì)不定期更新，為你帶來最新的前端技術(shù)和知識(shí)。感謝你的關(guān)注和支持，我們一起探討交流技術(shù)共同進(jìn)步，期待與你一同探索前端開發(fā)的奇妙世界！

#2023年度創(chuàng)作挑戰(zhàn)#?

在線咨詢

上一篇：阿六帶你用python appium搭建app自動(dòng)化測(cè)試環(huán)境
下一篇：jQuery中CSS簡(jiǎn)單操作（獲取，追加，移除，切換，判斷）「406」

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷服務(wù)商