闲暇看到慕课网上有liuyubobobo老师讲的2048小游戏制作，看了教程，感觉应该不是太难，于是就跟着教程开始了游戏的制作，有兴趣的同学去慕课网看下该视频，自己做出一个小游戏应该蛮好玩的。做完这个小游戏断断续续花了3天的时间，发布程序的时候走了一些坑，视频中讲到的Dropbox和Droppages都用不了，后来直接用了github page，只要访问自己创建的仓库的github pages地址就可以了，我创建的地址是，有兴趣的同学可以玩下，适配网页和移动端，因为只是学习用，可能有些细节没有实现，比如分数动画显示等。想要看源码的同学也可以去我的github上面看，地址：
阅读(...) 评论()最少javascript代码完成一个2048游戏 - 开源中国社区
当前访客身份：游客 [
当前位置：
发布于 日 10时,
原生javascript代码写的2048游戏。建议在谷歌浏览器下跑。&WASD&控制方向。演示地址请移步：/detail/bp8baf8b&
代码片段(3)
1.&[代码]2048.html&&&&
&!DOCTYPE&
&html xmlns="http://www.w3.org/1999/xhtml"&
&meta http-equiv="Content-Type" content="text/ charset=utf-8" /&
&title&2048&/title&
&link rel="stylesheet" type="text/css" href="css/2048.css" /&
&!-- &script type="text/javascript" src="/jquery-latest.js"&&/script& --&
&script type="text/javascript" src="js/2048.js"&&/script&
&div id="div2048"&
&a id="start"&tap to start :-)&/a&
2.&[代码]2048.css&&&&
@charset "utf-8";
width: 500
height: 500
background-color: #b8af9e;
width: 500
height: 500
line-height: 500
text-align:
font-size: 30
background: #f2b179;
color: #FFFFFF;
#div2048 div.tile
margin: 20px 0px 0px 20
width: 100
height: 40
padding: 30px 0;
font-size: 40
line-height: 40
text-align:
#div2048 div.tile0{
background: #ccc0b2;
#div2048 div.tile2
color: #7c736a;
background: #eee4
#div2048 div.tile4
color: #7c736a;
background: #ece0c8;
#div2048 div.tile8
color: #fff7
background: #f2b179;
#div2048 div.tile16
color:#fff7
background:#f59563;
#div2048 div.tile32
color:#fff7
background:#f57c5f;
#div2048 div.tile64
color:#fff7
background:#f65d3b;
#div2048 div.tile128
color:#fff7
background:#edce71;
#div2048 div.tile256
color:#fff7
background:#edcc61;
#div2048 div.tile512
color:#fff7
background:#ecc850;
#div2048 div.tile1024
color:#fff7
background:#edc53f;
#div2048 div.tile2048
color:#fff7
background:#eec22e;
3.&[代码]2048.js&&&&
function game2048(container)
this.container =
this.tiles = new Array(16);
game2048.prototype = {
init: function(){
for(var i = 0, len = this.tiles. i & i++){
var tile = this.newTile(0);
tile.setAttribute('index', i);
this.container.appendChild(tile);
this.tiles[i] =
this.randomTile();
this.randomTile();
newTile: function(val){
var tile = document.createElement('div');
this.setTileVal(tile, val)
setTileVal: function(tile, val){
tile.className = 'tile tile' +
tile.setAttribute('val', val);
tile.innerHTML = val & 0 ? val : '';
randomTile: function(){
var zeroTiles = [];
for(var i = 0, len = this.tiles. i & i++){
if(this.tiles[i].getAttribute('val') == 0){
zeroTiles.push(this.tiles[i]);
var rTile = zeroTiles[Math.floor(Math.random() * zeroTiles.length)];
this.setTileVal(rTile, Math.random() & 0.8 ? 2 : 4);
move:function(direction){
switch(direction){
for(var i = 4, len = this.tiles. i & i++){
while(j &= 4){
this.merge(this.tiles[j - 4], this.tiles[j]);
for(var i = 11; i &= 0; i--){
while(j &= 11){
this.merge(this.tiles[j + 4], this.tiles[j]);
for(var i = 1, len = this.tiles. i & i++){
while(j % 4 != 0){
this.merge(this.tiles[j - 1], this.tiles[j]);
for(var i = 14; i &= 0; i--){
while(j % 4 != 3){
this.merge(this.tiles[j + 1], this.tiles[j]);
this.randomTile();
merge: function(prevTile, currTile){
var prevVal = prevTile.getAttribute('val');
var currVal = currTile.getAttribute('val');
if(currVal != 0){
if(prevVal == 0){
this.setTileVal(prevTile, currVal);
this.setTileVal(currTile, 0);
else if(prevVal == currVal){
this.setTileVal(prevTile, prevVal * 2);
this.setTileVal(currTile, 0);
equal: function(tile1, tile2){
return tile1.getAttribute('val') == tile2.getAttribute('val');
max: function(){
for(var i = 0, len = this.tiles. i & i++){
if(this.tiles[i].getAttribute('val') == 2048){
over: function(){
for(var i = 0, len = this.tiles. i & i++){
if(this.tiles[i].getAttribute('val') == 0){
if(i % 4 != 3){
if(this.equal(this.tiles[i], this.tiles[i + 1])){
if(i & 12){
if(this.equal(this.tiles[i], this.tiles[i + 4])){
clean: function(){
for(var i = 0, len = this.tiles. i & i++){
this.container.removeChild(this.tiles[i]);
this.tiles = new Array(16);
var game, startB
window.onload = function(){
var container = document.getElementById('div2048');
startBtn = document.getElementById('start');
startBtn.onclick = function(){
this.style.display = 'none';
game = game || new game2048(container);
game.init();
window.onkeydown = function(e){
var keynum,
if(window.event){
keynum = e.keyC
else if(e.which){
// Netscape/Firefox/Opera
keynum = e.
keychar = String.fromCharCode(keynum);
if(['W', 'S', 'A', 'D'].indexOf(keychar) & -1){
if(game.over()){
game.clean();
startBtn.style.display = 'block';
startBtn.innerHTML = 'game over, replay?';
game.move(keychar);
开源中国-程序员在线工具：
相关的代码(115)
[JavaScript]
[JavaScript]
[JavaScript]
[JavaScript]
[JavaScript]
[JavaScript]
[JavaScript]
[JavaScript]
[JavaScript]
[JavaScript]
Nice！这才是我一直找的代码，谢谢！
2楼：chaogel 发表于
应该加个状态，页面不发生改变时，是不产生新数字的
3楼：刘国添 发表于
谢谢，有空好好研究一下
4楼：touzi 发表于
貌似不能用
5楼：OpenSo 发表于
建议复制代码的时候能把行号去掉，这个太不人性化了吧
6楼：OpenSo 发表于
开始之后数字就不能动了
7楼：曹超 发表于
楼上的同学，请看好html文件 ，把目录结构弄正确哦
8楼：skysakuya 发表于
9楼：车开源 发表于
10楼：zhoushen 发表于
11楼：loongchao 发表于
赞 1024 * 10
12楼：灌直 发表于
很好，很不错。
13楼：2EZ 发表于
14楼：KYZGJ 发表于
15楼：OSDaven 发表于
引用来自“OpenSo”的评论建议复制代码的时候能把行号去掉，这个太不人性化了吧你没看到上面有个 “copy to clipbord”吗？
16楼：老李99 发表于
17楼：曹超 发表于
引用来自“ll99”的评论不能动?/detail/bp8baf8b
18楼：曹超 发表于
引用来自“头子”的评论貌似不能用/detail/bp8baf8b
19楼：老李99 发表于
原来是用wsad来移动的,话说这个游戏没玩懂
开源从代码分享开始
曹超的其它代码&&原jquery开发实现的2048游戏网页版源代码下载jquery实现的网页版《2048》，兼容IE，FF，Chrome等主流浏览器。由编辑于 13:35:31猜你喜欢3个牛币请下载代码后再发表评论//css/css/styles.css/demo.html/js/js/jquery-2.0.3.js/js/new2048.js精精精精原精精原精原精原精原相关分享精原最近下载暂无贡献等级暂无贡献等级暂无贡献等级暂无贡献等级暂无贡献等级暂无贡献等级暂无贡献等级暂无贡献等级暂无贡献等级暂无贡献等级最近浏览暂无贡献等级暂无贡献等级暂无贡献等级暂无贡献等级暂无贡献等级暂无贡献等级暂无贡献等级暂无贡献等级暂无贡献等级扫描二维码关注最代码为好友"/>扫描二维码关注最代码为好友热门搜索：
当前位置：>>>>>>
需要：0 共享分
环境：jQuery
大小：71KB
方式：免费素材
更新： 14:30:25
下载次数：147
jquery制作2048小游戏,html5,小游戏,2048下载
周下载排行
下载次数：14
下载次数：40
友情链接申请：8472863(QQ) 站长信箱：. 素材交流QQ群:(未满)
免责声明：本站所有内容来源于互联网。如果本站部分内容侵犯您的权益，请您告知，站长会立即处理。
Copyright @ 2016 非凡图库 |
| {$icp} | 带宽赞助：群英云服务器 |jQuery（1）
前端开发（4）
前言：受网上看到的一个2048视频游戏制作的启发，做了一个网页版的，很多细节参照了一下别人的。暂时还没有分数统计功能，找时间再做好。先上一个demo版。
程序架构：
演示地址：
程序地址：
代码：太多了就不贴了，有兴趣的看管请到以上地址下载吧。
&&相关文章推荐
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：4561次
排名：千里之外}