| 漏洞检测 |
| 隐藏捆绑 |
一篇文带你走进国外的Html5游戏网站
国内H5游戏遍地开花的今日，让我们一起来看看国外的Html5 Games。 2014年，《围住神经猫》横空出世，刷爆整个朋友圈，如同在一夜之间，H5游戏进入大众的视野。 与一般的手机游戏不同，H5游戏的便捷性迎合了现在互联网移动端用户的使用习惯，人们好像很乐意
国内H5游戏遍地开花的今日，让我们一起来看看国外的Html5 Games。2014年，《围住神经猫》横空出世，刷爆整个朋友圈，如同在一夜之间，H5游戏进入大众的视野。
与一般的手机游戏不同，H5游戏的便捷性迎合了现在互联网移动端用户的使用习惯，人们好像很乐意利用碎片时间刷刷手机，玩玩简单的小游戏以打发光阴；再加上H5游戏能够通过朋友圈等社交平台快速传播。H5游戏成为了热点，也仿佛成为了“站在风口上的猪”。虽然目前大部分的H5游戏都存在一定的低留存、低转化问题，但对于这一大块蛋糕，很多公司都还是想参与分一杯羹。于是在近两年，国内开始涌现出大量的H5游戏开发商、社区、游戏引擎、专属渠道，以及一些传统游戏公司在H5领域也进行了开拓。不可否认两年来国内H5游戏市场火热，各种类型的H5游戏如同春笋般一夜之间破土而出。我们关心着国内市场，想要做好一款H5游戏，也曾模仿一些优秀作品，但是鲜有文章来聊聊国外H5游戏。其实国外是没有H5游戏这一种说法的，都称之它为Html5 Games。今天我带大家来看看国外的Html5 Games游戏网站。或许在这些Html5 Games当中，可以给你带来一些新的灵感。国外有一些类似国内牛游戏等游戏门户网站，可以供玩家直接在线玩游戏，比如：①HTML5 Games
点评：这是我看的所有国外Html5 Games网站里面最喜欢的一个。网页设计上来说，整个页面干净简单，导航栏分类清晰，也比较醒目；不同板块下游戏数量不同，但只在首页显示推荐游戏“BEST”和新游戏“NEW”两个栏目的游戏。游戏方面，跟国内的分类大同小异，类型上角色扮演类游戏比国内少很多；一些游戏简单易懂让我在测试时总是想多玩一会儿，一些游戏中规中矩，其中也不乏模仿者：Fruita Crush与Candy Crush几乎一致，只是画面更加粗糙，把糖果换成了水果；Jewelish简直是Jewely的翻版......大部分游戏相对低龄化，但做的比较漂亮。一些游戏也是我这个游戏迷原来未曾体验过的，这一点不错。令我非常意外的一点是，这里面的游戏都做成了响应式的，不仅能在手机端玩耍，当你用PC端打开时依然可以进行体验，在不同终端都能完美适配（见上面几张截图），只是有的游戏操作起来PC端的游戏体验会更好一些。网站响应速度和游戏加载速度都非常快。综合评价：好评！②HTML5GAMES.LINK
点评：知道这个网站是上百度搜寻了Html5 Games并且仅显示英文搜索结果，打开网页后觉得网站名字还是比较厉害的，相比上一个网站，导航旁边多了搜索功能，然而整个网页的设计让我感到好像回到了小学时期是什么鬼，大家看图就好，不做赘述。游戏方面，可玩性一般，画面设计一般，网站响应速度和游戏打开速度都非常慢，某些游戏甚至让我怀疑这是不是htlm5游戏。并且，并不支持在移动端玩耍：）综合评价：差评！③Crazy Games
(责任编辑：幽灵学院)
------分隔线----------------------------
2016年即将过去。 这一年，《西部世界》开播了，阿法狗赢了...
日星期五 宝安区慈善会成立十周年 打造阳光慈善...
中国***网讯年来，新余市袁河公安分局不断加强和改进执法工...
亮科节目狂撒***，更有相互邀约一起9元看电影 最近火到不行...
1为何要用双离合变速箱？ [汽车之家 变速箱技术] 在现在的中...
此前魅族发布了全新的Flyme 6系统，全新的设计风格、平行空...
工作日：9:00-21:00
周　六：9:00-18:00
&&扫一扫关注幽灵学院想要快速上手HTML5 Canvas小游戏开发？下面通过一个例子来进行手把手教学。（如果你怀疑我的资历， 这个游戏的半数以上开发是由我完成的）
我们直接来看源码里的,当然你也可以一下游戏先。
// Create the canvas
var canvas = document.createElement(&canvas&);
var ctx = canvas.getContext(&2d&);
canvas.width = 512;
canvas.height = 480;
document.body.appendChild(canvas);
首先我们需要创建一张作为游戏的舞台。这里通过JS代码而不是直接在HTML里写一个&canvas&元素目的是要说明代码创建也是很方便的。有了画布后就可以获得它的上下文来进行绘图了。然后我们还设置了画布大小，最后将其添加到页面上。
// 背景图片
var bgReady = false;
var bgImage = new Image();
bgImage.onload = function () {
bgReady = true;
bgImage.src = &images/background.png&;
游戏嘛少不了图片的，所以我们先加载一些图片先。简便起见，这里仅创建简单的图片对象，而不是专门写一个类或者Helper来做图片加载。bgReady这个变量用来标识图片是否已经加载完成从而可以放心地使用了，因为如果在的。
整个游戏中需要用到的三张图片：，及我们都用上面的方法来处理。
// 游戏对象
var hero = {
speed: 256, // 每秒移动的像素
var monster = {
var monstersCaught = 0;
现在定义一些对象将在后面用到。我们的英雄有一个speed属性用来控制他每秒移动多少像素。怪物游戏过程中不会移动，所以只有坐标属性就够了。monstersCaught则用来存储怪物被捉住的次数。
处理用户的输入
// 处理按键
var keysDown = {};
addEventListener(&keydown&, function (e) {
keysDown[e.keyCode] = true;
}, false);
addEventListener(&keyup&, function (e) {
delete keysDown[e.keyCode];
}, false);
现在开始处理用户的输入(对初次接触游戏开发的前端同学来说，这部分开始可能就需要一些脑力了)。在前端开发中，一般是用户触发了点击事件然后才去执行动画或发起异步请求之类的，但这里我们希望游戏的逻辑能够更加紧凑同时又要及时响应输入。所以我们就把用户的输入先保存下来而不是立即响应。
为此，我们用keysDown这个对象来保存用户按下的键值(keyCode)，如果按下的键值在这个对象里，那么我们就做相应处理。
开始一轮游戏
// 当用户抓住一只怪物后开始新一轮游戏
var reset = function () {
hero.x = canvas.width / 2;
hero.y = canvas.height / 2;
// 将新的怪物随机放置到界面上
monster.x = 32 + (Math.random() * (canvas.width - 64));
monster.y = 32 + (Math.random() * (canvas.height - 64));
reset方法用于开始新一轮和游戏，在这个方法里我们将英雄放回画布中心同时将怪物放到一个随机的地方。
// 更新游戏对象的属性
var update = function (modifier) {
if (38 in keysDown) { // 用户按的是↑
hero.y -= hero.speed * modifier;
if (40 in keysDown) { // 用户按的是↓
hero.y += hero.speed * modifier;
if (37 in keysDown) { // 用户按的是←
hero.x -= hero.speed * modifier;
if (39 in keysDown) { // 用户按的是→
hero.x += hero.speed * modifier;
// 英雄与怪物碰到了么？
hero.x &= (monster.x + 32)
&& monster.x &= (hero.x + 32)
&& hero.y &= (monster.y + 32)
&& monster.y &= (hero.y + 32)
++monstersCaught;
这就是游戏中用于更新画面的update函数，会被规律地重复调用。首先它负责检查用户当前按住的是中方向键，然后将英雄往相应方向移动。
有点费脑力的或许是这个传入的modifier 变量。你可以在main 方法里看到它的来源，但这里还是有必要详细解释一下。它是基于1开始且随时间变化的一个因子。例如1秒过去了，它的值就是1，英雄的速度将会乘以1，也就是每秒移动256像素；如果半秒钟则它的值为0.5，英雄的速度就乘以0.5也就是说这半秒内英雄以正常速度一半的速度移动。理论上说因为这个update 方法被调用的非常快且频繁，所以modifier的值会很小，但有了这一因子后，不管我们的代码跑得快慢，都能够保证英雄的移动速度是恒定的。
现在英雄的移动已经是基于用户的输入了，接下来该检查移动过程中所触发的事件了，也就是英雄与怪物相遇。这就是本游戏的胜利点，monstersCaught +1然后重新开始新一轮。
// 画出所有物体
var render = function () {
if (bgReady) {
ctx.drawImage(bgImage, 0, 0);
if (heroReady) {
ctx.drawImage(heroImage, hero.x, hero.y);
if (monsterReady) {
ctx.drawImage(monsterImage, monster.x, monster.y);
ctx.fillStyle = &rgb(250, 250, 250)&;
ctx.font = &24px Helvetica&;
ctx.textAlign = &left&;
ctx.textBaseline = &top&;
ctx.fillText(&Monsterrs caught: & + monstersCaught, 32, 32);
之前的工作都是枯燥的，直到你把所有东西画出来之后。首先当然是。然后如法炮制将英雄和怪物也画出来。这个过程中的顺序是有讲究的，因为后画的物体会覆盖之前的物体。
这之后我们改变了一下Canvas的绘图上下文的样式并调用fillText来绘制文字，也就是记分板那一部分。本游戏没有其他复杂的动画效果和打斗场面，绘制部分大功告成！
主循环函数
// 游戏主函数
var main = function () {
var now = Date.now();
var delta = now - then;
update(delta / 1000);
then = now;
// 立即调用主函数
requestAnimationFrame(main);
上面的主函数控制了整个游戏的流程。先是拿到当前的时间用来计算时间差（距离上次主函数被调用时过了多少毫秒）。得到modifier后除以1000(也就是1秒中的毫秒数)再传入update函数。最后调用render 函数并且将本次的时间保存下来。
关于游戏中循环更新画面的讨论可参见「」。
关于循环的进一步解释
// requestAnimationFrame 的浏览器兼容性处理
var w = window;
requestAnimationFrame = w.requestAnimationFrame || w.webkitRequestAnimationFrame || w.msRequestAnimationFrame || w.mozRequestAnimationFrame;
如果你不是完全理解上面的代码也没关系，我只是觉得拿出来解释一下总是极好的
为了循环地调用main函数，本游戏之前用的是setInterval。但现今已经有了更好的方法那就是requestAnimationFrame。使用新方法就不得不考虑浏览器兼容性。上面的就是出于这样的考虑，它是的一个简化版本。
启动游戏！
// 少年，开始游戏吧！
var then = Date.now();
总算完成了，这是本游戏最后一段代码了。先是设置一个初始的时间变量then用于首先运行main函数使用。然后调用 reset 函数来开始新一轮游戏（如果你还记得的话，这个函数的作用是将英雄放到画面中间同时将怪物放到随机的地方以方便英雄去捉它）。
到此，相信你已经掌握了开发一个简单H5小游戏需要的基本功了。或者自己研究研究吧 :)
阅读(...) 评论()
恭喜?发现本彩蛋， happy coding
\(^___________^)/