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. CodeChef August Lunchtime 2014 题解

    A题 给一个由a和b两种类型的字符组成的字符串,每次可以从中选取任意长度的回文子序列(不一定连续)并删除.问最少需要几次能将整个字符串为空. 思路:如果本身是个回文串,那么只需要一次,否则需要两次(第 ...

  2. Hackerrank--String Function Calculation(后缀数组)

    题目链接 Jane loves string more than anything. She made a function related to the string some days ago a ...

  3. 读书笔记--Head First Ajax 目录

    1.使用Ajax 2.设计Ajax 3.javascripte事件 4.多个事件处理程序 5.异步应用 6.文档对象模型 7.管理DOM 8.框架与工具包 9.xml请求与响应 10.json 11. ...

  4. C# params 用法简介

    params 是C#的关键字, params主要是在声明方法时参数类型或者个数不确定时使用,关于params 参数数组,需掌握以下几点: 一.参数数组必须是一维数组 二.不允许将params修饰符与r ...

  5. 学习JDK1.8集合源码之--HashMap

    1. HashMap简介 HashMap是一种key-value结构存储数据的集合,是map集合的经典哈希实现. HashMap允许存储null键和null值,但null键最多只能有一个(HashSe ...

  6. vuex的简单教程

    首先安装vuex npm install vuex --save 然后创建store.js文件里写 import Vue from 'vue' import Vuex from 'vuex' Vue. ...

  7. 将自己的代码托管到github - 秦时明月 - CSDN博客

    步骤: 1.建立自己的github 2.安装github客户端,并配置身份 3.建立github项目 4.将github项目库下载到本地 5.提交本地代码到github 详细操作: 1.github网 ...

  8. dns-prefetch对网站速度能提升有多少?详解dns-prefetch。

    DNS解析场景 有很多大型的网站,都会用N 个CDN 域名来做图片.静态文件等资源访问.比如新浪,我们经常会看到有下列域. img1.sina.com.cn . img2.sina.com.cn .i ...

  9. 使用dos行命令实现文件夹内文件名统计

    1.进入在dos环境下 2.进入需要统计的目录下. 3.使用命令 dir /b>e:1.xls 结果:会在路径(e:\资料\资料整理)下生成一个新的文件(1.xls).1.xls把路径(e:\资 ...

  10. LintCode刷题笔记-- BackpackIV

    标签: 动态规划 描述: Given an integer array nums with all positive numbers and no duplicates, find the numbe ...