&&|&&责编：刘建
&&&&2048是最近一款非常火爆的益智游戏，很多网友自称“一旦玩上它就根本停不下来”，这是不是让你想到了不久前爆红的动作游戏“Flappy&Bird”？其实，与Flappy&Bird一样，2048也非常简单，其基于的HTML5技术，玩家只需要用方向键让16宫格内两两相同的数字碰撞就会诞生一个翻倍的数字。初始数字由2或者4构成，当界面全部被数字填满时，游戏就会结束。（&（AI版））根本停不下来？2048小游戏高分技巧攻略&&&&这款游戏上手非常简单，但想让数字达到2048就非常难，需要玩家进行精确的测算。下面，笔者就带给大家一些2048游戏的高分攻略。&&&&2048游戏的规则很简单：每次控制所有方块向同一个方向运动，两个相同数字的方块撞在一起之后合并成为他们的和，每次操作之后会在空白的方格处随机生成一个2或者4，最终得到一个“2048”的方块就算胜利了。如果16个格子全部填满并且相邻的格子都不相同也就是无法移动的话，那么游戏就会结束。最大数和次大数在的那一列/行是满的&&&&高分法则：&&&&1、最大数尽可能放在角落。&&&&2、数字按顺序紧邻排列。&&&&3、首先满足最大数和次大数在的那一列/行是满的。&&&&4、时刻注意活动较大数（32以上）旁边要有相近的数。&&&&5、以大数所在的一行为主要移动方向&&&&6、不要急于“清理桌面”。&&&&需要注意的是，为了保持最大数在角落，所有最大数可能移动的方向都不能再操作了，比如选择了左上角，那么就不能向右和向下移动其他的方块，这样操作的灵活性会相对减少，难度就会增加。这时，建议玩家除了选定一个角以外，再固定一条边，将大的数字放这条边上，这样就可以朝三个方向移动，比如选定左上角，填满最大数右边的所有方块，就可以朝上，左，右三个方向移动了。成功达到2048！&&&&本文第一段链接2048游戏2中提供了AI通关版，如果玩家实在玩不过去，可以参考一下计算机AI的过关技巧。&&&&还有，2048支持主流的智能，大家在手机上也能玩哦！
更新时间：日
用户评分：8.5 | 19人点评
下载次数：1,488,039
软件类型：免费软件
软件语言：简体中文
4￥33495￥12606￥6487￥42008￥16009￥145010￥4982048游戏高分攻略技巧大全_2048诀窍
日 来源：游迅网 编辑：
& 是时下一款简单易上手的小游戏，但又十分。最近很多玩家都在询问关于2048游戏高分攻略技巧，下面小编就为大家整理了一些2048诀窍。
&&2048游戏高分攻略技巧大全_2048诀窍:
& 2048攻略一：有耐心是2048游戏得高分的先决条件之一；
& 2048攻略二：最大数尽可能放在角落；
& 2048攻略三：数字按顺序紧邻排列；
& 2048攻略四：首先满足最大数和次大数在的那一列／行是满的；
& 2048攻略五：注意活动较大数（32以上）旁边要有相近的数；
& 2048攻略六：以大数所在的一行为主要移动方向。
& 2048攻略：心态平和。
& 2048攻略八：确定主次方向。
& 2048攻略九：时刻注意活动较大数（32以上）旁边要有相近的数。
& 2048攻略十:不要急于&清理&。
& 以上就是今天小编为大家带来的2048游戏高分攻略技巧大全_2048诀窍，只要都练习相信大家都能掌握技巧！
&&2048游戏通关技巧攻略:
2048你感兴趣吗？
看完这篇文章有何感觉？
相关攻略及下载:8-265-214-153-253-253-253-213-203-19·7-10
48小时热门评论
一周热点资讯
高铁空调不给力，妹子只好这么穿了
CopyRight&2004年-年 < 游迅网 All Rights Reserved
备案编号:沪ICP备号-6Javascript编写2048小游戏
投稿：hebedich
字体：[ ] 类型：转载 时间：
本文给大家介绍的是去年很火的一款小游戏--2048用javascript实现的思路以及代码，有需要的小伙伴可以参考下。
　　去年2048很火， 本来我也没玩过， 同事说如果用JS写2048 只要100多行代码；
　　今天试了一下， 逻辑也不复杂， 主要是数据构造函数上的数据的各种操作， 然后通过重新渲染DOM实现界面的更新， 整体不复杂， JS，css，和HTML合起来就300多行；
　　界面的生成使用了underscore.js的template方法， 使用了jQuery，主要是DOM的选择和操作以及动画效果，事件的绑定只做了PC端的兼容，只绑定了keydown事件；
　　把代码放到github-page上， 通过点击这里查看 实例： 打开2048实例；
　　效果图如下：
　　所有的代码分为两大块，Data， V
　　Data是构造函数， 会把数据构造出来， 数据会继承原型上的一些方法；
　　View是根据Data的实例生成视图，并绑定事件等, 我直接把事件认为是controller了，和View放在了一起， 没必要分开;
　　Data的结构如下：
* @desc 构造函数初始化
init : function
* @desc 生成了默认的数据地图
* @param void
generateData : function
* @desc 随机一个block填充到数据里面
* @return void
generationBlock : function
* @desc 获取随机数 2 或者是 4
* @return 2 || 4;
getRandom : function
* @desc 获取data里面数据内容为空的位置
* @return {x:number, y:number}
getPosition : function
* @desc 把数据里第y排， 第x列的设置， 默认为0， 也可以传值;
* @param x, y
set : function
* @desc 在二维数组的区间中水平方向是否全部为0
* @desc i明确了二维数组的位置， k为开始位置， j为结束为止
no_block_horizontal : function
no_block_vertica : function
* @desc 往数据往左边移动，这个很重要
moveLeft : function
moveRight : function
moveUp : function
moveDown : function
　　有了数据模型，那么视图就简单了，主要是用底线库underscore的template方法配合数据生成html字符串，然后对界面进行重绘：
View的原型方法：
&&&&&&& renderHTML : function //生成html字符串，然后放到界面中
&&&&&&& init : function //构造函数初始化方法
&&&&&&& bindEvents : function //给str绑定事件， 认为是控制器即可
　　因为原始的2048有方块的移动效果， 我们独立起来了一个服务(工具方法，这个工具方法会被View继承）， 主要是负责界面中的方块的移动, getPost是给底线库用的， 在模板生成的过程中需要根据节点的位置动态生成横竖坐标，然后定位:
var util = {
animateShowBlock : function() {
setTimeout(function() {
this.renderHTML();
}.bind(this),200);
animateMoveBlock : function(prop) {
$("#num"+prop.form.y+""+prop.form.x).animate({top:40*prop.to.y,left:40*prop.to.x},200);
//底线库的模板中引用了这个方法;
getPost : function(num) {
return num*40 + "px";
//这个应该算是服务;
　　下面是全部的代码， 引用的JS使用了CDN，可以直接打开看看：
&!DOCTYPE html&
&head lang="en"&
&meta charset="UTF-8"&
&title&&/title&
&script src="/underscore.js/1.8.3/underscore-min.js"&&/script&
&script src="/jquery/2.1.4/jquery.js"&&/script&
.block,.num-block{
height: 40
line-height: 40
text-align:
border-radius: 4
border:1px solid #
box-sizing: border-
.num-block{
color:#27AE60;
font-weight:
&div class="container"&
&div class="row"&
&div id="g"&
&script id="tpl" type="text/template"&
&% for(var i=0; i&data. i++) {%&
&!--生成背景块元素---&
&% for(var j=0; j& data[i]. j++ ) { %&
&div id="&%=i%&&%=j%&" class="block" style="left:&%=util.getPost(j)%&;top:&%=util.getPost(i)%&" data-x="&%=j%&" data-y="&%=i%&" data-info='{"x":&%=[j]%&,"y":&%=[i]%&}'&
&!--生成数字块元素---&
&% for(var j=0; j& data[i]. j++ ) { %&
&!--如果数据模型里面的值为0，那么不显示这个数据的div---&
&% if ( 0!==data[i][j] ) {%&
&div id="num&%=i%&&%=j%&" class="num-block" style="left:&%=util.getPost(j)%&;top:&%=util.getPost(i)%&" &
&%=data[i][j]%&
var Data = function() {
this.init();
$.extend(Data.prototype, {
* @desc 构造函数初始化
init : function() {
this.generateData();
* @desc 生成了默认的数据地图
* @param void
generateData : function() {
var data = [];
for(var i=0; i&4; i++) {
data[i] = data[i] || [];
for(var j=0; j&4; j++) {
data[i][j] = 0;
this.map =
* @desc 随机一个block填充到数据里面
* @return void
generationBlock : function() {
var data = this.getRandom();
var position = this.getPosition();
this.set( position.x, position.y, data)
* @desc 获取随机数 2 或者是 4
* @return 2 || 4;
getRandom : function() {
return Math.random()&0.5 ? 2 : 4;
* @desc 获取data里面数据内容为空的位置
* @return {x:number, y:number}
getPosition : function() {
var data = this.
var arr = [];
for(var i=0; i&data. i++ ) {
for(var j=0; j& data[i]. j++ ) {
if( data[i][j] === 0) {
arr.push({x:j, y:i});
return arr[ Math.floor( Math.random()*arr.length ) ];
* @desc 把数据里第y排， 第x列的设置， 默认为0， 也可以传值;
* @param x, y
set : function(x,y ,arg) {
this.map[y][x] = arg || 0;
* @desc 在二维数组的区间中水平方向是否全部为0
* @desc i明确了二维数组的位置， k为开始位置， j为结束为止
no_block_horizontal: function(i, k, j) {
for( ;k&j; k++) {
if(this.map[i][k] !== 0)
//和上面一个方法一样，检测的方向是竖排;
no_block_vertical : function(i, k, j) {
var data = this.
for(; k&j; k++) {
if(data[k][i] !== 0) {
* @desc 往左边移动
moveLeft : function() {
* 往左边移动；
* 从上到下， 从左到右， 循环；
* 从0开始继续循环到当前的元素 ，如果左侧的是0，而且之间的空格全部为0 ， 那么往这边移，
* 如果左边的和当前的值一样， 而且之间的空格值全部为0, 就把当前的值和最左边的值相加,赋值给最左边的值;
var data = this.
var result = [];
for(var i=0; i&data. i++ ) {
for(var j=1; j&data[i]. j++) {
if (data[i][j] != 0) {
for (var k = 0; k & k++) {
//当前的是data[i][j], 如果最左边的是0， 而且之间的全部是0
if (data[i][k] === 0 && this.no_block_horizontal(i, k, j)) {
result.push( {form : {y:i,x:j}, to :{y:i,x:k}} );
data[i][k] = data[i][j];
data[i][j] = 0;
//加了continue是因为，当前的元素已经移动到了初始的位置，之间的循环我们根本不需要走了
}else if(data[i][j]!==0 && data[i][j] === data[i][k] && this.no_block_horizontal(i, k, j)){
result.push( {form : {y:i,x:j}, to :{y:i,x:k}} );
data[i][k] += data[i][j];
data[i][j] = 0;
moveRight : function() {
var result = [];
var data = this.
for(var i=0; i&data. i++ ) {
for(var j=data[i].length-2; j&=0; j--) {
if (data[i][j] != 0) {
for (var k = data[i].length-1; k&j; k--) {
//当前的是data[i][j], 如果最左边的是0， 而且之间的全部是0
if (data[i][k] === 0 && this.no_block_horizontal(i, k, j)) {
result.push( {form : {y:i,x:j}, to :{y:i,x:k}} );
data[i][k] = data[i][j];
data[i][j] = 0;
}else if(data[i][k]!==0 && data[i][j] === data[i][k] && this.no_block_horizontal(i, j, k)){
result.push( {form : {y:i,x:j}, to :{y:i,x:k}} );
data[i][k] += data[i][j];
data[i][j] = 0;
moveUp : function() {
var data = this.
var result = [];
// 循环要检测的长度
for(var i=0; i&data[0]. i++ ) {
// 循环要检测的高度
for(var j=1; j&data. j++) {
if (data[j][i] != 0) {
//x是确定的, 循环y方向;
for (var k = 0; k& k++) {
//当前的是data[j][i], 如果最上面的是0， 而且之间的全部是0
if (data[k][i] === 0 && this.no_block_vertical(i, k, j)) {
result.push( {form : {y:j,x:i}, to :{y:k,x:i}} );
data[k][i] = data[j][i];
data[j][i] = 0;
}else if(data[j][i]!==0 && data[k][i] === data[j][i] && this.no_block_vertical(i, k, j)){
result.push( {form : {y:j,x:i}, to :{y:k,x:i}} );
data[k][i] += data[j][i];
data[j][i] = 0;
moveDown : function() {
var data = this.
var result = [];
// 循环要检测的长度
for(var i=0; i&data[0]. i++ ) {
// 循环要检测的高度
for(var j=data.length - 1; j&=0 ; j--) {
if (data[j][i] != 0) {
//x是确定的, 循环y方向;
for (var k = data.length-1; k& k--) {
if (data[k][i] === 0 && this.no_block_vertical(i, k, j)) {
result.push( {form : {y:j,x:i}, to :{y:k,x:i}} );
data[k][i] = data[j][i];
data[j][i] = 0;
}else if(data[k][i]!==0 && data[k][i] === data[j][i] && this.no_block_vertical(i, j, k)){
result.push( {form : {y:j,x:i}, to :{y:k,x:i}} );
data[k][i] += data[j][i];
data[j][i] = 0;
var util = {
animateShowBlock : function() {
setTimeout(function() {
this.renderHTML();
}.bind(this),200);
animateMoveBlock : function(prop) {
$("#num"+prop.form.y+""+prop.form.x).animate({top:40*prop.to.y,left:40*prop.to.x},200);
//底线库的模板中引用了这个方法;
getPost : function(num) {
return num*40 + "px";
//这个应该算是服务;
var View = function(data) {
this.data = data.
this.el = data.
this.renderHTML();
this.init();
$.extend(View.prototype, {
renderHTML : function() {
var str = _.template( document.getElementById("tpl").innerHTML )( {data : this.data.map} );
this.el.innerHTML =
init : function() {
this.bindEvents();
bindEvents : function() {
$(document).keydown(function(ev){
var animationArray = [];
switch(ev.keyCode) {
animationArray = this.data.moveLeft();
animationArray = this.data.moveUp();
animationArray = this.data.moveRight();
animationArray = this.data.moveDown();
if( animationArray ) {
for(var i=0; i&animationArray. i++ ) {
var prop = animationArray[i];
this.animateMoveBlock(prop);
this.data.generationBlock();
this.animateShowBlock();
}.bind(this));
$(function() {
var data = new Data();
//随机生成两个节点;
data.generationBlock();
data.generationBlock();
//生成视图
var view = new View({ data :data, el : document.getElementById("g") });
//继承工具方法, 主要是动画效果的继承;
$.extend( true, view, util );
//显示界面
view.renderHTML();
以上所述就是本文的全部内容了，希望大家能够喜欢。
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具