web前端|js教程
Javascript,2048小游戏
web前端-js教程
去年2048很火， 本来我也没玩过， 同事说如果用JS写2048 只要100多行代码；
ucenter 源码,ubuntu网络配置路径,tomcat+开启线程池,资源爬虫引擎,php实现秒定时,阜平SEO招聘 阜平招聘SEOlzw
今天试了一下， 逻辑也不复杂， 主要是数据构造函数上的数据的各种操作， 然后通过重新渲染DOM实现界面的更新， 整体不复杂， JS，css，和HTML合起来就300多行；
安全认证网站源码,ubuntu安装c 命令,嵌入式tomcat打包运行,爬虫数据采集立法,函数可能导致php命令执行漏洞,网页被动seolzw
界面的生成使用了underscore.js的template方法， 使用了jQuery，主要是DOM的选择和操作以及动画效果，事件的绑定只做了PC端的兼容，只绑定了keydown事件；
欢乐抓娃娃源码,ubuntu .md文件,tomcat配置下载文件,go爬虫开发,php 分数,郑州seo搜索引擎优化方案lzw
把代码放到github-page上， 通过点击这里查看 实例： 打开2048实例；
效果图如下：
所有的代码分为两大块，Data， View;
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，可以直接打开看看：
<% for(var i=0; i<% for(var j=0; j<div data-x="" data-y="" data-info={"x":,"y":}>
<% for(var j=0; j<div >
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; j0.5 ? 2 : 4; }, /*** @desc 获取data里面数据内容为空的位置* @return {x:number, y:number}* */ getPosition : function() {var data = this.map;var arr = [];for(var i=0; i<data.length; i++ ) { for(var j=0; j< data[i].length; 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) {k++;for( ;k<j; k++) { if(this.map[i][k] !== 0) return false;};return true; }, //和上面一个方法一样，检测的方向是竖排; no_block_vertical : function(i, k, j) {var data = this.map;k++;for(; k<j; k++) { if(data[k][i] !== 0) {return false; };};return true; }, /*** @desc 往左边移动* */ moveLeft : function() {/** 往左边移动；* 从上到下， 从左到右， 循环；* 从0开始继续循环到当前的元素 ，如果左侧的是0，而且之间的空格全部为0 ， 那么往这边移，* 如果左边的和当前的值一样， 而且之间的空格值全部为0, 就把当前的值和最左边的值相加,赋值给最左边的值;* */var data = this.map;var result = [];for(var i=0; i<data.length; i++ ) { for(var j=1; j<data[i].length; j++) {if (data[i][j] != 0) { for (var k = 0; 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;//加了continue是因为，当前的元素已经移动到了初始的位置，之间的循环我们根本不需要走了break; }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;break; }; };}; };};return result; }, moveRight : function() {var result = [];var data = this.map;for(var i=0; i=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;break; }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;break; }; };}; };};return result; }, moveUp : function() {var data = this.map;var result = [];// 循环要检测的长度for(var i=0; i<data[0].length; i++ ) { // 循环要检测的高度 for(var j=1; j<data.length; j++) {if (data[j][i] != 0) { //x是确定的, 循环y方向; for (var k = 0; k<j ; 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;break; }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;break; }; };}; };};return result; }, moveDown : function() {var data = this.map;var result = [];// 循环要检测的长度for(var i=0; i=0 ; j--) {if (data[j][i] != 0) { //x是确定的, 循环y方向; for (var k = data.length-1; k>j ; 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;break; }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;break; }; };}; };};return result; } }); 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.data; this.el = data.el; this.renderHTML(); this.init(); }; $.extend(View.prototype, { renderHTML : function() {var str = _.template( document.getElementById("tpl").innerHTML )( {data : this.data.map} );this.el.innerHTML = str; }, init : function() {this.bindEvents(); }, bindEvents : function() {$(document).keydown(function(ev){ var animationArray = []; switch(ev.keyCode) {case 37: animationArray = this.data.moveLeft(); break;case 38 : animationArray = this.data.moveUp(); break;case 39 : animationArray = this.data.moveRight(); break;case 40 : animationArray = this.data.moveDown(); break; }; if( animationArray ) {for(var i=0; i以上所述就是本文的全部内容了，希望大家能够喜欢。
