2048 原作者就是用Js写的,一直想尝试。但久久未动手。

昨天教学生学习JS代码。最好还是就做个有趣的游戏好了。2048这么火,是一个不错的选择。

思路:

1. 数组 ,2维数组4x4

2. 移动算法,移动后有数字的对齐。无数字(我用的0。但不显示)补齐。

移动前

移动后(注意程序合并了第一行2个2,并产生了新的2)

移动算法分2步:

第一步骤:移动

第二步骤:合并

移动代码參考:

    function left(t,i)
{
var j;
var len = t[i].length;
for (j=0;j<len-1;j++)
{
if (t[i][j] == 0 && t[i][j+1] != 0)
{
temp = t[i][j];
t[i][j] = t[i][j+1];
t[i][j+1] = temp;
left(t,i); }
} }

合并代码參考:

    function lcombine(a,i)
{
var len = a[i].length; for(var j=0;j<len-2;j++)
{
if (a[i][j] == a[i][j+1])
{
a[i][j] *=2;
a[i][j+1] = 0;
left(a,i);
break;
}
}
}

3.显示

显示部分CSS来源 2048源作者程序。

显示代码:

    function display_div ()
{
var i,j;
var n = "#d";
for (i = 0 ;i < 4 ;i++)
{
for(j=0;j<4;j++)
{
if (a[i][j] !=0)
$(n+(i*4+j)).html("<div class='tile tile-"+a[i][j]+"'><div class='tile-inner'>"+a[i][j]+"</div></div>");
else
$(n+(i*4+j)).html(""); }
}
}

这段代码是把数组内容显示到  4x4表格内。

所有代码:http://jsbin.com/biximuho/6/edit

280多行。

js280行代码写2048的更多相关文章

  1. python实战:用70行代码写了一个山炮计算器!

    python实战训练:用70行代码写了个山炮计算器! 好了...好了...各位因为我是三年级而发牢骚的各位伙伴们,我第一次为大家插播了python的基础实战训练.这个,我是想给,那些python基础一 ...

  2. 【编程教室】PONG - 100行代码写一个弹球游戏

    大家好,欢迎来到 Crossin的编程教室 ! 今天跟大家讲一讲:如何做游戏 游戏的主题是弹球游戏<PONG>,它是史上第一款街机游戏.因此选它作为我这个游戏开发系列的第一期主题. 游戏引 ...

  3. 50行代码写的一个插件,破解一个H5小游戏

    小游戏链接:测测你的眼睛对色差的辨识度http://www.webhek.com/post/color-test.html?from=timeline 废话不多说,先放代码: window.onloa ...

  4. [500lines]500行代码写web server

    项目地址:https://github.com/aosabook/500lines/tree/master/web-server.作者是来自Mozilla的Greg Wilson.项目是用py2写成. ...

  5. 几百行代码写个Mybatis,原理搞的透透的!

    作者:小傅哥 博客:https://bugstack.cn 沉淀.分享.成长,让自己和他人都能有所收获! 一.前言 Mybatis 最核心的原理也是它最便于使用的体现,为什么这说? 因为我们在使用 M ...

  6. 200行Python代码实现2048

    200行Python代码实现2048 一.实验说明 1. 环境登录 无需密码自动登录,系统用户名shiyanlou 2. 环境介绍 本实验环境采用带桌面的Ubuntu Linux环境,实验中会用到桌面 ...

  7. 10 行 Python 代码写的模糊查询

    导语: 模糊匹配可以算是现代编辑器(在选择要打开的文件时)的一个必备特性了,它所做的就是根据用户输入的部分内容,猜测用户想要的文件名,并提供一个推荐列表供用户选择. 样例如下: Vim (Ctrl-P ...

  8. 不写1行代码,在Mac上体验ASP.NET 5的最简单方法

    昨天微软发布了ASP.NET 5 beta2(详见ASP.NET 5 Beta2 发布),对ASP.NET 5的好奇心又被激发了. 今天下午在Mac OS X上体验了一下ASP.NET 5,而且借助Y ...

  9. 只写104行代码!在nopCommerce中如何实现自动生成网站地图

    表告诉我说你不知道nopCommerce是什么.它是目前.NET中最流行的完全开源网上商城,由俄罗斯的团队在2008年开始立项一直开发到现在已经是3.3版本了.代码目前托管在codeplex上,有兴趣 ...

随机推荐

  1. 【maven】maven pom文件详解

    maven pom文件详解 最近配置maven中的pom文件,maven中有些属性不太清楚,在这里记录一下 <project xmlns="http://maven.apache.or ...

  2. 解决springmvc 中文post请求乱码的过滤器配置

    在web.xml中添加如下配置 <!-- 过滤器 解决post乱码 --> <filter> <filter-name>characterEncodingFilte ...

  3. python 随机模块random

  4. h5滚动页面固定导航

    1.需要效果 2.实现方法 (1)原生js实现 document.addEventListener('scroll', function (event) { var scrollDamo = wind ...

  5. 编译libusb库

    之前需要安装依赖库 : libudevautomakeautoconflibtool ./bootstrap.sh ./configure --with-pic --prefix=/home/libu ...

  6. NFS服务器搭建与配置

    原文:https://blog.csdn.net/qq_38265137/article/details/83146421 NFS服务简介什么是NFS?NFS就是Network File System ...

  7. 使用Git Bash进行代码管理

    前提是已经安装了GitBash,这个稍后再出教程 1.新建一个目录,存放下载下来的项目,我在D盘新建了一个“gitspace”文件夹,用来存放下载下来的项目 2.进入刚刚新建的文件夹,即进入“gits ...

  8. 【风马一族_php】

    原文来自:http://www.cnblogs.com/sows/p/6054383.html  (博客园的)风马一族 侵犯版本,后果自负 2016-11-11   15:13:51 回顾 数组:分配 ...

  9. Linux常用命令6 压缩解压命令

    .zip是Linux和Windows共有的压缩格式 1.压缩解压命令:gzip 命令英文原意:GNU zip   命令所在路径:/bin/gzip 执行权限:所有用户 语法: gzip [文件]   ...

  10. 删除重复节点 Remove Duplicates from Sorted List

    Given a sorted linked list, delete all duplicates such that each element appear only once. For examp ...