1171人阅读
javascript（17）
&!DOCTYPE html PUBLIC &-//W3C//DTD XHTML 1.0 Transitional//EN& &&&
&html xmlns=&&&
&meta http-equiv=&Content-Type& content=&text/ charset=utf-8& /&
&title&无标题文档&/title&
&style type=&text/css&&
#container{
&width:800
&margin-top:60
&width:800
&height:400
&background-color:#CCC;
&border-color:#00F;
&border-style:
&overflow:
&position:
&script type=&text/javascript& language=&javascript&&
//变量不使用var是因为变量的生存周期，如果出了函数体变量就会失效
function Food(){
&this.w = 20;
&this.h = 20;
&this.color = 'red';
& //显示食物
&this.display=function(){
&&&& //我们要显示一个食物，首先要知道：大小，位置，属性
&&var new_div = document.createElement(&div&);
&&new_div.style.width = this.w+'px';
&&new_div.style.height = this.h+'px';
&&//位置我们采用0,1,2……
&&//求有多少个空格
&&this.x = Math.round(Math.random()*39);//求x轴有多少空格
&&this.y = Math.round(Math.random()*19);//求y轴有多少空格
&&//利用坐标确定位置
&&new_div.style.left=(this.w*this.x)+'px';//离左端的距离，也是x轴坐标
&&new_div.style.top=(this.h*this.y)+'px';//离左端的距离，也是y轴坐标
&&new_div.style.backgroundColor=this.
&&new_div.style.position=&absolute&;
&&document.getElementById('map').appendChild(new_div);
&&//生成食物的时候就要给这个食物做个标记，以便一会儿我要删除它
&&this.taiji = new_
&&this.reDisplay = function(){
&&&document.getElementById('map').removeChild(this.taiji);
&&&this.display();
&function Snake(){
&&this.w =20;
&&&& this.h = 20;
&&&& this.direct = 'right';
&&this.body=[
&&& { x:5,y:3,color:&blue&},
&&& { x:4,y:3,color:&red&},
&&& { x:3,y:3,color:&red&}
&&this.display=function(){
&&//通过数组来保存蛇身，一个元素代表一个蛇节
&&for(var i=0;i&this.body.i++){
&&&var snake_div = document.createElement(&div&);
&&&snake_div.style.width = this.w+'px';
&&&snake_div.style.height = this.h+'px';
&&&snake_div.style.left=(this.w*this.body[i].x)+'px';
&&&snake_div.style.top=(this.h*this.body[i].y)+'px';
&&&snake_div.style.position=&absolute&;
&&&snake_div.style.backgroundColor=this.body[i].
&&&document.getElementById(&map&).appendChild(snake_div);
&&&//生成一个蛇节的时候就给他做个标记，以便一会删除它
&&&this.body[i].div = snake_
&&& this.move=function(){
&&&&& //移动蛇身,这里是确定蛇身的位置属性的
&&&&&&&&&&&&&&&& for(var i=this.body.length-1;i&0;i--){
&&&&&& this.body[i].x=this.body[i-1].x;
&&&&&& this.body[i].y=this.body[i-1].y;
&&&& //移动蛇头
&&&&& &&switch(this.direct){
&&&&&&case 'up':
&&&&&&&&&& this.body[0].y-=1;
&&&&&&&& case 'down':
&&&&&&&&&& this.body[0].y+=1;
&&&&&&case 'left':
&&&&&&&&&& this.body[0].x-=1;
&&&&&&case 'right':
&&&&&&&&&& this.body[0].x+=1;
&&&&&&&// this.body[0].y=this.body[0].y;
&&&&&&& //alert(this.body[0].x);
&&&&&&&& //alert(this.body[0].y);
&&&&&&//把旧的蛇节删除
&&&&&&&&& this.removeSnake();
&&&&&&//按照新的位置属性重新显示一下
&&&&&&&&&& this.display();
&&&&&&//撞墙后死去
&&&&&&if(this.body[0].x&0 || this.body[0].x&39 || this.body[0].y&0 || this.body[0].y&19){
&&&&&&&alert('Game Over');
&&&&&&&clearInterval(snake_id);
&&&&&&//判断是否撞到自己，判断头的坐标和身体的某一节重合，但是前四节肯定装不上
&&&&&&for(var i = this.body.length-1; i&=4;i--){
&&&&&&&if(this.body[0].x == this.body[i].x && this.body[0].y == this.body[i].y){
&&&&&&&&&alert('Game Over');
&&&&&&&&&clearInterval(snake_id);
&&&&&&//吃食物后长一节,判断头部坐标和食物的坐标重合
&&&&&&if(this.body[0].x == food.x && this.body[0].y == food.y){
&&&&&&&//现在吃上食物了，蛇身长一节，通过给this.body增加一个元素即可
&&&&&&&this.body[this.body.length] = {x:0,y:0,color:'red',div:null};
&&&&&&&//吃一个食物之后，让旧的食物消失，新的食物出现
&&&&&&&food.reDisplay();
&&&& &&&& this.removeSnake=function(){
&&&&&& //先找到他的父元素
&&&&&& var map = document.getElementById('map');
&&&&&& for(var i=0;i&this.body.i++){
&&&&&&&if(this.body[i].div != null){
&&&&&&&& map.removeChild(this.body[i].div);
&&&&&& }&&
&&&&&&&//改变方向
&&&& this.setDirect=function(keycode){
&&&&& switch(keycode){
&&&&&& case 37:
&&&&&& if(this.direct!='right'){
&&&&&&&& this.direct=&left&;}
&&&&&& case 38:
&&&&&& if(this.direct!='down'){
&&&&&&&& this.direct=&up&;}
&&&&&&& case 39:
&&&&&&& if(this.direct!='left'){
&&&&&&&& this.direct=&right&;}
&&&&&&&& case 40:
&&&&&&&& if(this.direct!='up'){
&&&&&&&& this.direct=&down&;}
&function init(){
&&&food = new Food();&
&&&&&&&&&&& food.display();
&&&snake = new Snake();
&&&snake.display();
&function start(){
&&//snake = new Snake();
&&//snake.move();
&&snake_id = setInterval('snake.move()',300);
&&& function changeDirect(evtkey){
&&snake.setDirect(evtkey.keyCode);
&body onload=&init()& onkeydown=&changeDirect(event)&&
&div id=&container&&
&input type=&button& value=&开始& onclick=&start()&/&
&div id=&map&&
&&相关文章推荐
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：804232次
积分：9823
积分：9823
排名：第1749名
原创：287篇
转载：77篇
评论：106条
PHP互动交流群：
(4)(1)(4)(3)(8)(3)(1)(2)(2)(2)(3)(3)(6)(12)(2)(1)(2)(3)(5)(4)(1)(6)(8)(1)(3)(1)(1)(1)(3)(6)(2)(3)(3)(3)(7)(10)(9)(21)(10)(7)(3)(5)(4)(15)(8)(8)(1)(3)(9)(8)(28)(9)(13)(42)(31)JS编写的扫雷游戏（简单易懂） - 追梦人 - ITeye博客
博客分类：
初学JavaScript,这是自己仿照windows下面的扫雷游戏用写成的，网页上的扫雷游戏。通过这个程序的编写让我更加熟悉js的面向函数编程的思想和模式。同时深刻的体会到，要学好一门语言，一定得多动手写些代码。这里将代码分享出来，欢迎大家批评指正。
&!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&
&meta http-equiv="Content-Type" content="text/ charset=UTF-8"&
&title&JS扫雷游戏&/title&
&script type="text/javascript" src="Mine.js"&&/script&
&script type="text/javascript"&
document.oncontextmenu=function(){
event.returnValue=false
&link type="text/css" rel="stylesheet" href="Mine.css"&
&body onload="Interface(8,8);"&
目前剩余雷数:&span id="markNum" style="color: red"&&/span&个
&/p&请选择难度：
&select id="level" onchange="selectLevel(this.value);"&
&option value="1"&初级玩家
&option value="2"&普通玩家
&option value="3"&高级玩家
&table id="mainTab" cellpadding="0" cellspacing="0"&
&tbody id="mainInt"&&/tbody&
@CHARSET "UTF-8";
.myButton{
height: 30
background:
.myButton0{
height: 30
background:
.myButton1{
background:
font-size:10
height: 30
.myButton2{
background:
font-size:10
height: 30
.myButton3{
background:
height: 30
.myButton4{
background:
height: 30
.myButton5{
background:
height: 30
.myButton6{
background:
height: 30
.myButton7{
background:
height: 30
.myButton8{
background:
height: 30
.myButton_{
background:
height: 30
/**********************************************
* JavaScript扫雷游戏
* @author : Sailor
* @version : 1.0
* Email : .cn
**********************************************/
var M//用来记录每个小方块应对应的值
var markNum=8;//用来记录用户标记的数目
* 布局游戏界面 size是布局大小，number是布雷数
function Interface(size,number){
var mainFrame=$("mainInt");
$("markNum").innerText=markN
mainFrame.innerText="";
var mine=new Array(size);
for(var i=0;i&i++){
mine[i]=new Array(size);
mine=randomNumber(mine,number);
for(var i=0;i&i++){
mainFrame.appendChild(createRow(i,size,mine));
* randomNumber
* 参数mine,num分别表示一个二维数组和布雷的数目
function randomNumber(mine,num) {
var rows=mine.
var cols=mine.
//完成布雷工作
while(i&num){
var row=Math.ceil((rows*Math.random()))-1;
var col=Math.ceil((cols*Math.random()))-1;
if(mine[row][col]!="雷"){
mine[row][col]="雷";
//完成雷数提示工作
for(var i=0;i&i++){
for(var j=0;j&j++){
var mineNum=0;
//判断左上
if((i-1&=0)&&(j-1&=0)){
if(mine[i-1][j-1]=="雷")
mineNum++;
//判断正上
if(mine[i-1][j]=="雷")
mineNum++;
//判断右上
if((i-1&=0)&&(j&=cols-2)){
if(mine[i-1][j+1]=="雷")
mineNum++;
//判断左边
if(mine[i][j-1]=="雷")
mineNum++;
//判断右边
if(j&=cols-2){
if(mine[i][j+1]=="雷")
mineNum++;
//判断左下
if((i&=rows-2)&&(j-1&=0)){
if(mine[i+1][j-1]=="雷")
mineNum++;
//判断正下
if(i&=rows-2){
if(mine[i+1][j]=="雷")
mineNum++;
//判断右下
if((i&=rows-2)&&(j&=cols-2)){
if(mine[i+1][j+1]=="雷")
mineNum++;
if(mine[i][j]!="雷"){
mine[i][j]=mineN
function createRow(row,len,mine){
var tr=document.createElement("tr");
for(var i=0;i&i++){
var td=document.createElement("td");
var button=document.createElement("input");
button.type="button";
button.id=row+"."+i;
button.className="myButton";
var context=mine[row][i];
button.onclick=function (){
//alert(this.id)
getValue(this);
if(this.value=="雷"){
this.className="myButton_";
getValue("over");
alert("你触雷了，游戏结束！");
if(confirm("重新开始？")){
window.location.reload();
if(this.value==0){
showSpace2(this);
this.oncontextmenu=function (){
button.oncontextmenu=function (){
if(this.value=="确定"){
this.value="?";
markNum++;
$("markNum").innerHTML=markN
}else if(this.value=="?"){
this.value="";
this.value="确定";
markNum--;
$("markNum").innerHTML=markN
//button.value=mine[row][i];
td.appendChild(button);
tr.appendChild(td);
//当点击的不是空白区或者是触动雷的时候调用下面的函数
function getValue(object){
if("over"!=object){
var id=object.
var button=document.getElementById(id);
var row=id.split(".")[0];
var col=id.split(".")[1];
button.value=Mine[row][col];
button.className="myButton"+button.
for(var i=0;i&Mine.i++)
for(var j=0;j&Mine[i].j++){
var button = $(i+"."+j);
if(Mine[i][j]=="雷"){
button.value=Mine[i][j];
button.className="myButton_";
* 当点击的区域为空白区域时调用的下面的函数将与该区域相连的空白区域都显示出来
function showSpace(object){
var id=object.
var button=document.getElementById(id);
var cols=Mine.
var rows=Mine.
var mark=0;
while(mark&cols){
for(var i=0;i&i++)
for(var j=0;j&j++){
var button2 = $(i+"."+j);
if(button2.value=="0"){
//判断左上
if((i-1&=0)&&(j-1&=0)){
var but=$((i-1)+"."+(j-1));
but.value=(Mine[i-1][j-1]=="雷") ? "" : Mine[i-1][j-1];
but.className="myButton"+but.
//判断正上
var but=$((i-1)+"."+(j));
but.value=(Mine[i-1][j]=="雷") ? "" : Mine[i-1][j];
but.className="myButton"+but.
//判断右上
if((i-1&=0)&&(j&=cols-2)){
var but=$((i-1)+"."+(j+1));
but.value=(Mine[i-1][j+1]=="雷") ? "" : Mine[i-1][j+1];
but.className="myButton"+but.
//判断左边
var but=$((i)+"."+(j-1));
but.value=(Mine[i][j-1]=="雷") ? "" : Mine[i][j-1];
but.className="myButton"+but.
//判断右边
if(j&=cols-2){
var but=$((i)+"."+(j+1));
but.value=(Mine[i][j+1]=="雷") ? "" : Mine[i][j+1];
but.className="myButton"+but.
//判断左下
if((i&=rows-2)&&(j-1&=0)){
var but=$((i+1)+"."+(j-1));
but.value=(Mine[i+1][j-1]=="雷") ? "" : Mine[i+1][j-1];
but.className="myButton"+but.
//判断正下
if(i&=rows-2){
var but=$((i+1)+"."+(j));
but.value=(Mine[i+1][j]=="雷") ? "" : Mine[i+1][j];
but.className="myButton"+but.
//判断右下
if((i&=rows-2)&&(j&=cols-2)){
var but=$((i+1)+"."+(j+1));
but.value=(Mine[i+1][j+1]=="雷") ? "" : Mine[i+1][j+1];
but.className="myButton"+but.
* 3月18日在showSpace()方法的基础上使用递归算法改进的，速度快了很多。
function showSpace2(object){
var id=object.
var row=parseInt(id.split(".")[0]);
var col=parseInt(id.split(".")[1]);
//alert(row+"."+col);
var cols=Mine.
var rows=Mine.
//判断左上
if((row-1&=0)&&(col-1&=0)){
var but=$((row-1)+"."+(col-1));
if(but.value!="0"){
but.value=(Mine[row-1][col-1]=="雷") ? "" : Mine[row-1][col-1];
but.className="myButton"+but.
if(but.value=="0"){
showSpace2(but);
//判断正上
if(row&=1){
var but=$((row-1)+"."+(col));
if(but.value!="0"){
but.value=(Mine[row-1][col]=="雷") ? "" : Mine[row-1][col];
but.className="myButton"+but.
if(but.value=="0"){
showSpace2(but);
//判断右上
if((row-1&=0)&&(col&=cols-2)){
var but=$((row-1)+"."+(col+1));
if(but.value!="0"){
but.value=(Mine[row-1][col+1]=="雷") ? "" : Mine[row-1][col+1];
but.className="myButton"+but.
if(but.value=="0"){
showSpace2(but);
//判断左边
if(col&=1){
var but=$((row)+"."+(col-1));
if(but.value!="0"){
but.value=(Mine[row][col-1]=="雷") ? "" : Mine[row][col-1];
but.className="myButton"+but.
if(but.value=="0"){
showSpace2(but);
//判断右边
if(col&=cols-2){
var but=$((row)+"."+(col+1));
if(but.value!="0"){
but.value=(Mine[row][col+1]=="雷") ? "" : Mine[row][col+1];
but.className="myButton"+but.
if(but.value=="0"){
showSpace2(but);
//判断左下
if((row&=rows-2)&&(col-1&=0)){
var but=$((row+1)+"."+(col-1));
if(but.value!="0"){
but.value=(Mine[row+1][col-1]=="雷") ? "" : Mine[row+1][col-1];
but.className="myButton"+but.
if(but.value=="0"){
showSpace2(but);
//判断正下
if(row&=rows-2){
var but=$((row+1)+"."+(col));
if(but.value!="0"){
but.value=(Mine[row+1][col]=="雷") ? "" : Mine[row+1][col];
but.className="myButton"+but.
if(but.value=="0"){
showSpace2(but);
//判断右下
if((row&=rows-2)&&(col&=cols-2)){
var but=$((row+1)+"."+(col+1));
if(but.value!="0"){
but.value=(Mine[row+1][col+1]=="雷") ? "" : Mine[row+1][col+1];
but.className="myButton"+but.
if(but.value=="0"){
showSpace2(but);
* 判断是否说有的格子是否都是正确的找出来了
function judge(){
var cols=Mine.
var rows=Mine.
var allTrue=
for(var i=0;i&i++)
for(var j=0;j&j++){
var button = $(i+"."+j);
if(Mine[i][j]=="雷"&&button.value!="确定"){
else if(Mine[i][j]!="雷"&&button.value!=Mine[i][j]){
if(allTrue){
if(confirm("全部雷已经挖出，你胜利了!重新开始?")){
window.location.reload();
* 选择难度
function selectLevel(level){
if(level=="1"){
Interface(8,6);
}else if(level=="2"){
Interface(12,15);
}else if(level=="3"){
Interface(12,25);
function $(id){
return document.getElementById(id);
论坛回复 /
(2 / 4732)
IE6 chrome 下字符串有问题 chrome下不能运行js代码
呃 ·· 这个我倒没注意到呢，我就在ie7下写的哈
浏览: 27969 次
来自: 重庆
你的二维数组的数据&int data[][]&quo ...
superobin 写道贴个早些年写的，带AI的。。。。那时候 ...
kingdom031 写道楼主写的不错，我大致看了一下，你那个 ...
楼主写的不错，我大致看了一下，你那个bug。
1、可以加一个全 ...
贴个早些年写的，带AI的。。。。那时候还不太懂闭包。。。。
h ...　　去年2048很火， 本来我也没玩过， 同事说如果用JS写2048 只要100多行代码；
　　PS(iWeb峰会暨攻城师嘉年华2015嘉年华要来啦， 在文章结尾有具体的地址和时间）；
　　今天试了一下， 逻辑也不复杂， 主要是数据构造函数上的数据的各种操作， 然后通过重新渲染DOM实现界面的更新， 整体不复杂， JS，css，和HTML合起来就300多行；
　　界面的生成使用了underscore.js的template方法， 使用了jQuery，主要是DOM的选择和操作以及动画效果，事件的绑定只做了PC端的兼容，只绑定了keydown事件；
　　把代码放到github-page上， 通过点击这里查看 实例： ；
　　效果图如下：
　　所有的代码分为两大块，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)
return false;
return true;
//和上面一个方法一样，检测的方向是竖排;
no_block_vertical : function(i, k, j) {
var data = this.
for(; k&j; k++) {
if(data[k][i] !== 0) {
return false;
return true;
* @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();
　　最近对HTML5的游戏很感兴趣， 今年8月16号国家会议中心又有WEB开发者大会， 估计H5的游戏大厅又要爆满， 别人那么大， 我想去看看， o(^▽^)o ， 想想就想尿一会儿， 太激动了；
　　地址是：iWeb峰会暨攻城师嘉年华&3000人+规模的北京站开启报名！8月16日 北京国际会议中心， 有没有要约的童鞋啊， 妹子优先。
　　官方网站是：&赶快报名么么哒；
阅读(...) 评论()
再过一百年， 我会在哪里？