整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
览器和 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小时内与您取得联系。
