2048 根本停不下来的开源HTML5游戏

简介: 2048是现在开始火起来的一个HTML5小游戏。这个游戏借鉴了有名的手机游戏1024。

2048是现在开始火起来的一个HTML5小游戏。这个游戏借鉴了有名的手机游戏1024

image.png

游戏的玩法很简单,在4x4的棋盘上,用方向键选择数字移动的方向,遇到相同的数字就会合并,每次移动会增加一个数字。合并出2048就算通关。虽然简单,但是很有乐趣,被誉为“根本停不下来的游戏”。


这个游戏完全使用HTML5开发,代码基于MIT协议开源


游戏的CSS部分使用了Sass,一门编译到CSS的语言。Sass基于Ruby,诞生于2007年,是最早也是最成熟的一款编译到CSS的高级语言,它可以使用变量、常量、嵌套、混入、函数等功能,加速CSS的开发。


JavaScript部分使用jQuery,jQuery应该算是目前最流行的前端JavaScript库,越来越多的开发者使用jQuery开发HTML 5游戏。我们以前介绍过的HTML5版的flappy bird也使用了jQuery框架。


这个HTML 5游戏不仅可以在浏览器里玩哦~ 在手机上玩效果也很不错。

比如,在iPhone上玩的话,会进入全屏模式,让你玩得尽心。也可以将这个游戏加入主屏幕(home screen)。这些实现起来其实很简单,只需在html的header中声明一下即可:

<meta name="apple-mobile-web-app-capable"content="yes">

这就告诉Safari这个页面在全屏模式下运行。

<link rel="apple-touch-icon"href="apple-touch-icon.png">

这个relapple-touch-icon的文件就是显示在主屏幕上的图标(注意必须是PNG格式)。

还有一个彩蛋就是,官方的说明是用方向键控制移动,其实还可以用别的键:

KeyboardInputManager.prototype.listen = function () {

 var self = this;

 var map = {

   38: 0, // Up

   39: 1, // Right

   40: 2, // Down

   37: 3, // Left

   75: 0, // vim keybindings

   76: 1,

   74: 2,

   72: 3,

   87: 0, // W

   68: 1, // D

   83: 2, // S

   65: 3  // A

 };

很多游戏都支持的W、D、S、A键,还有vim党最爱的h、j、k、l哦~

2048的GitHub页面

更新 玩了一晚上都玩不到2048? 别急,有攻略

相关文章
|
移动开发 HTML5
html5掷骰子跳棋游戏源码
html5掷骰子跳棋游戏源码
743 1
html5掷骰子跳棋游戏源码
|
6月前
|
移动开发 JavaScript 前端开发
HTML5最新经典俄罗斯方块游戏插件
HTML5最新经典俄罗斯方块游戏插件
|
7月前
|
前端开发
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
183 1
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
|
9月前
HTML在线扫雷游戏网页源码
HTML在线扫雷游戏网页源码是一款基于HTML+CSS+JavaScript开发的在线扫雷小游戏单页源码,为用户提供了一个无需安装即可在浏览器中直接玩的扫雷游戏。该游戏的源码不仅包含了完整的游戏逻辑,还具备丰富的界面设计和用户交互功能,使得玩家能够轻松上手并享受扫雷带来的乐趣。
336 22
|
12月前
|
移动开发 JavaScript 数据管理
HTML5 拖放在游戏中的应用
HTML5的拖放功能在游戏开发中广泛应用,尤其在创建交互式网页游戏时。它支持多种场景,如拖动角色或物品、选择和装备物品、拼图或配对游戏以及自定义界面布局。通过简单的HTML和JavaScript代码,可实现流畅的拖放交互,并提供视觉反馈,增强用户体验。此外,还需考虑设备兼容性和数据管理,确保游戏在不同设备和浏览器上都能良好运行。总之,HTML5拖放功能使网页游戏更生动有趣。
|
移动开发 前端开发 程序员
程序员必知:基于HTML5堆木头游戏
程序员必知:基于HTML5堆木头游戏
78 0
|
安全 Windows
在线网页版扫雷游戏HTML源码
在线网页版扫雷游戏HTML源码
555 1
在线网页版扫雷游戏HTML源码
切方块游戏 HTML5+jQuery【附源码】
切方块游戏 HTML5+jQuery【附源码】
163 0
|
前端开发 JavaScript iOS开发
开源Windows12网页版HTML源码
开源Windows12网页版HTML源码,无需安装就能用的Win12网页版来了Windows12概念版(PoweredbyPowerPoint)后深受启发,于是通过使用HTML、CSS、js等技术做了这样一个模拟板的Windows12系统,并已发布至github进行开源。
187 0
开源Windows12网页版HTML源码
|
前端开发 JavaScript
html+css+js开发一个猜数字游戏
【1月更文挑战第5天】html+css+js开发一个猜数字游戏
309 1