整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
覽器和 JavaScript 的功能逐年不斷的變強變大。曾幾何時，任何類型的游戲都需要Flash。但隨著 HTML5 發展，HTML5 + WebGL 游戲式就慢慢占領著這個舞臺。以下是30款流行的游戲，它們可以在所有現代瀏覽器中運行，并且只使用web技術構建。
地址：http://hexgl.bkcore.com/
類型：街機，賽車
HexGL 是一款基于HTML5，JavaScript和WebGL的快節奏的賽車游戲。玩家可以使用鍵盤，觸摸屏設備或leap motion(體感控制器)來控制太空飛船。
地址：http://www.cross-code.com/en/home
類型：動作，角色扮演
一個復古靈感的2D游戲設定在遙遠的未來。這是一個充滿偉大的游戲機制，如組合，拼圖，技能樹，任務，物品等等。
地址：https://sketch-out.appspot.com/
類型：街機
Sketchout的任務保護你的行星，并通過改變流星的方向來消滅對手，通過使流星偏轉來保護您的星球并消滅對方，這款游戲有很棒的視覺效果和音樂特效。
地址：http://www.treasurearena.com/類型：多人，角色扮演，動作
Treasure Arena 是一款動態的競技場戰斗游戲，最多可容納4名玩家。它具有不同的游戲模式，出色的幀率和配樂，是一個非常有趣的游戲。
地址：http://bejeweled.popcap.com/html5/
類型：街機，解謎，娛樂
HTML5格式的經典“寶石迷陣”游戲。這是一個官方克隆，因此可以正常運行且外觀完美。
地址：http://missile-game.bwhmather.com/類型：街機
這是一款非常具有挑戰性的游戲，游戲中我們扮演的是一枚被發射進隧道的導彈。游戲有很酷的黑白圖像，玩的時候會有很強的場景效果。
地址：http://www.deconstructeam.com/games/gods-will-be-watching/類型：拼圖
在這個令人毛骨悚然（但又很棒）的游戲中，我和自己團隊必須獨自生存40天。團隊有六名成員，其中包括一只狗，一名精神病醫生和一個機器人，您必須與他們互動，以使其保持溫暖，溫飽和理智的狀態。
地址：http://www.sinuousgame.com/類型：街機
一個簡單的游戲，極簡的圖形和流暢的幀率。拾取電源時避免與紅點碰撞。此外，如果你想要那些額外的積分，就需要不停向前移動
地址：http://swooop.playcanvas.com/類型：街機
在一個美麗多彩的3D世界里，到處飛翔，收集寶石和星星。
地址：http://www.freeriderhd.com/
Free Rider HD 是一款令人上癮的游戲，你可以在其他玩家繪制的賽道上騎自行車。可以在成千上萬的播放器曲目中選擇一個播放，也可以創建自己的曲目并分享。
地址：http://entanglement.gopherwoodstudios.com/zh-CN-index.html類型:拼圖,娛樂
這個游戲的目的是通過在網格上放置線段來創建一條盡可能長的路徑。你可以單獨玩，也可以和朋友一起玩。
地址：https://www.modern.ie/en-us/ie6countdown#escape-from-xp
類型：動作，街機
用“Escape from XP”來慶祝 Windows XP 的終結。你的任務是拯救最后一個陷入Clippy暴政的開發人員。
地址：http://polycraftgame.com/類型：角色扮演，塔防，動作
在這個很棒的3D游戲中，你到處收集資源，建造東西，完成任務。關于它的所有東西都經過拋光，并且運行也非常順暢。
地址：https://gabrielecirulli.github.io/2048/類型：拼圖
一個非常上癮的游戲，你可能已經玩過了。在 2048 ，你移動編號的圖塊并合并它們。當界面中最大數字是`2048 時，游戲勝利。
地址：http://arcade.lostdecadegames.com/onslaught_arena/
類型:動作
一種快節奏的復古生存游戲，您可以使用不同的武器與成群的敵人作戰。
地址：http://chrome.angrybirds.com/類型:游戲
《憤怒的小鳥》游戲，這就不用介紹了。
地址:https://www.cubeslam.com/mcycrs
類型：街機，多人
具有豐富的色彩和炫酷的3D圖形乒乓球游戲。我們可以通過向朋友發送一個URL來挑戰他們，還可以通過網絡攝像頭看到對方。
地址：http://hypnoticowl.com/games/the-wizard/類型：動作，角色扮演，策略
Wizard 是基于回合的地牢爬行者，在里面會遇到神話般的怪物并找到奇妙的咒語。該游戲具有酷炫的戰斗機制，有時可能會帶來很大挑戰。
地址：http://phoboslab.org/xtype/類型：動作，街機
在這款酷炫的太空射擊游戲中，你目的就是要起戰勝 Boss。
地址：http://orteil.dashnet.org/cookieclicker/類型：休閑，搞笑
Cookie clicker 是一款可能為了開玩笑而創建的游戲，但仍然提供了大量的樂趣。你可以從0個cookie開始，然后單擊一些有效率的cookie，最后你可能會發現自己擁有數十億個cookie。
地址：http://play.elevatorsaga.com/類型：拼圖，編碼
這類屬于程序員類型游戲 。在電梯中的任務是通過對電梯的運動進行編程，以最有效的方式運送人員，這些都是用 JavaScript 來完成的。
地址：http://gameofbombs.com/landing類型：動作，角色扮演，多人
Game of Bombs是一個轟炸機類型的游戲，在廣闊地圖上，都有著敵方玩家。收集力量，皮膚和成就，以成為最佳轟炸機玩家的方式。
地址：http://or.paleozoic.com/類型：平臺游戲，動作
Olympia Rising具有漂亮復古外觀圖形的游戲。它坐落在古希臘，在那里我們扮演的女人被賦予了重新的機會，所以我們的任務就是逃離死者的世界。
地址: https://ned.im/pixel-race-game/類型：街機，賽車
Pixel Race是一款簡單概念概念，你可以在收集硬幣的同時控制汽車以避開障礙物。如果有足夠的耐心和空閑時間，那么你可能會打破記錄（記錄為36309個硬幣）。
地址：https://littlealchemy.com/類型：拼圖
從這四個基本元素開始，將它們組合起來，創建510種可能的組合。
地址：http://www.kevs3d.co.uk/dev/arena5/類型：街機
在數字領域中飛行并射擊幾何敵人以獲得高分。
地址:https://vector-runner-remix.tresensa.com/
類型：街機
在這個充滿色彩和幾何形狀的平臺游戲中，盡你所能奔跑吧。
地址：http://playbiolab.com/類型:動作
一款出色的像素藝術平臺游戲，你必須在這里逃脫充滿突變生物和其他不良生物的實驗室。
地址:http://worldsbiggestpacman.com/#類型：街機
地址：http://games.jessefreeman.com/new-super-resident-raver/
從即將到來的僵尸入侵中拯救驚慌失措的人們。收集錢，升級你的武器和戰斗僵尸。
作者：Danny Markov 來源：tutorialzin 譯者：前端小智
原文：https://tutorialzine.com/2015/02/30-amazing-games-made-only-with-html5
JavaScript做一個貪吃蛇小游戲，無需網絡 => 打開即可玩。
<!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;
/* 設置邊框*/
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.頁面的布局
- 注意事項：
背景顏色 #B7D4A8
窗口大小（10的倍數）
蛇的大小 10px(可見框)
食物的大小 10px（可見框）
2.隨機設置食物的位置
修改食物的top和left值（范圍0-290）
并且必須是10的倍數
3.設置蛇的移動
蛇的速度 10px
檢查蛇是否吃到食物（蛇頭的坐標和食物一致）
記分
4.吃到食物蛇的身體要增加
- 設置身體的位置？
5.設置游戲的結束機制
- 撞墻
- 撞自己
*/
window.onload = function () {
//獲取食物的對象
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')
//創建一個變量，存儲最大的left和top
var MAXLEFT = main.clientWidth - 10 // 290
var MAXTOP = main.clientHeight - 10 // 290
//創建一個變量，表示蛇頭的運動方向
var dir = null
//創建一個變量，表示蛇的速度
var speed = 10
//創建一個變量，存儲用戶的分數
var score = 0
//獲取分數的span
var scoreText = document.getElementById('score_text')
//創建一個定時器用來控制蛇的運動
var timer = setInterval(function () {
//獲取蛇頭當前的位置
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值，和第二節身子的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('撞墻了，游戲結束！')
return
}
//檢查蛇是否吃到食物
if(left === food.offsetLeft && top === food.offsetTop){
//進入判斷，證明蛇吃到了食物（蛇頭與食物重合）
//加分
score++
// 000000001 00000000100
scoreText.innerHTML = ('00000000' + score).slice(-8)
//蛇變長..
//創建一個表示蛇的div
var body = document.createElement('div')
//設置class，part
body.className = 'part'
//設置蛇身體的位置, 獲取最后一個元素的位置
//parts是一個數組，里邊保存了蛇所有，包括蛇頭和身體
body.style.left = parts[parts.length - 1].offsetLeft + 'px'
body.style.top = parts[parts.length - 1].offsetTop + 'px'
//將身體添加到蛇里邊
snake.appendChild(body)
//改變食物的位置
changeFood(food)
}
//設置身體的位置，將當前身體設置為它前一個身體的位置
for(var i=parts.length-1 ; i>0 ; i--){
var pLeft = parts[i-1].offsetLeft
var pTop = parts[i-1].offsetTop
//檢查蛇頭的坐標是否和身體重合
if(left === pLeft && top === pTop){
//撞到自己了
clearInterval(timer)
alert('撞自己了，游戲結束！')
return
}
parts[i].style.left = pLeft + 'px'
parts[i].style.top = pTop + 'px'
}
//修改蛇的位置
head.style.left = left + 'px'
head.style.top = top + 'px'
},200)
//創建一個數組，存儲所有的方向鍵的值
var keys = ['ArrowDown','ArrowUp','ArrowLeft','ArrowRight','Right','Up','Left','Down']
//綁定一個鍵盤事件
document.onkeydown = function (event) {
//檢查用戶按的是否是方向鍵
if(keys.indexOf(event.key) !== -1){
//修改dir的值
dir = event.key
}
}
//定義一個函數，來隨機生成food的位置
function changeFood(food) {
//隨機生成left和top
// left 和 top 應該是10的倍數
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">
<!-- 創建表示蛇的元素-->
<div id="snake">
<div id="head" class="part"></div>
</div>
<!-- 定義食物-->
<div id="food"></div>
</div>
</div>
</div>
</body>
</html>
直接按上下左右鍵就可以玩起來了
歡迎關注我的原創文章：小伙伴們！我是一名熱衷于前端開發的作者，致力于分享我的知識和經驗，幫助其他學習前端的小伙伴們。在我的文章中，你將會找到大量關于前端開發的精彩內容。
學習前端技術是現代互聯網時代中非常重要的一項技能。無論你是想成為一名專業的前端工程師，還是僅僅對前端開發感興趣，我的文章將能為你提供寶貴的指導和知識。
在我的文章中，你將會學到如何使用HTML、CSS和JavaScript創建精美的網頁。我將深入講解每個語言的基礎知識，并提供一些實用技巧和最佳實踐。無論你是初學者還是有一定經驗的開發者，我的文章都能夠滿足你的學習需求。
此外，我還會分享一些關于前端開發的最新動態和行業趨勢。互聯網技術在不斷發展，新的框架和工具層出不窮。通過我的文章，你將會了解到最新的前端技術趨勢，并了解如何應對這些變化。
我深知學習前端不易，因此我將盡力以簡潔明了的方式解釋復雜的概念，并提供一些易于理解的實例和案例。我希望我的文章能夠幫助你更快地理解前端開發，并提升你的技能。
如果你想了解更多關于前端開發的內容，不妨關注我的原創文章。我會不定期更新，為你帶來最新的前端技術和知識。感謝你的關注和支持，我們一起探討交流技術共同進步，期待與你一同探索前端開發的奇妙世界！
#2023年度創作挑戰#?
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
