使用javascript开发2048

嗯，团队队友开发了一个简单的2048...哈哈，没办法，这游戏那么疯狂，必须搞搞啦，大家能够直接粘贴代码到一个html文件，直接执行就可以

依赖文件：jquery，假设乜有，大家能够自己下载一份

<!DOCTYPE HTML>

<html>

<head>

<script  language="javascript" src="scripts/jquery-1.9.1.js"></script>

 <!--<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css">

 <script src="http://code.jquery.com/jquery-1.5.min.js"></script>

 <script src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>

-->

<meta charset="utf-8" />

<meta name="viewport" content="width=device-width,initial-scale=1"/>

<meta name="renderer" content="webkit">

<style >

body,div{margin:0;padding:0;}

body{width:100%;height:500px;}

.field{width:85%;height:55%;background:gray;margin:5% auto;border-radius:2%;}

.tab{

width:21%;

height:100%;

background:yellow;

position:relative;

z-index:10;

margin:2%;

font-size:200%;

font-weight:bold;

line-height:200%;

text-align:center ;

vertical-align:bottom;

border-radius:5px;

transition:all .5s;

}

.row{height:20%;width:100%;clear:both;}

.row div{float:left;}

.usetime{

width:40%;

height:10%;

background:yellow;

font-size:150%;

font-weight:bold;

border-radius:5px;

margin:0 auto;

line-height:160%;}

#times,#time{color:red;}

</style>

</head>

<body>

<center><h2>合成2048算你赢</h2></center>

<div class="field">

<div class="row row1">

<div class="tab tab1"> </div>

<div class="tab tab2"> </div>

<div class="tab tab3"> </div>

<div class="tab tab4"> </div>

</div>

<div class="row row2">

<div class="tab tab5"> </div>

<div class="tab tab6"> </div>

<div class="tab tab7"> </div>

<div class="tab tab8"> </div>

</div>

<div class="row row3">

<div class="tab tab9"> </div>

<div class="tab tab10"> </div>

<div class="tab tab11"> </div>

<div class="tab tab12"> </div>

</div>

<div class="row row4">

<div class="tab tab13"> </div>

<div class="tab tab14"> </div>

<div class="tab tab15"> </div>

<div class="tab tab16"> </div>

</div>

</div>

<div class="usetime">用时：<span id="time">1</span>  s</div>

<div class="usetime">移动：<span id="times">1</span> 次</div>

<div id="result"></div>

<script language="javascript">

arr=[[0,0,0,0],

	[0,0,2,2],

	[0,0,0,0],

	[0,4,0,0]];

color=["yellow","#0000FF","#ADFF2F","#55aabb","#ff99bb","#ffaabb","#FF4500","#ffaa00","#eebbaa","#ee00bb","#8B0000"];

/*

function init(){

index=1;

	$(".tab").each(function(){

	if(index <5 )$(this).html(Math.pow(2,index++))

	})

}

init();

*/

setInterval(function(){

$("#time").html(parseInt($("#time").html())+1);

},1000);

/****************** Consts 定义 開始 ********************************/

/****************** Consts 定义 開始 ********************************/

Consts={

arr_rows_num:4,

arr_cols_num:4,

game_fail:-1,		//游戏失败

game_succeed:1,		//游戏成功

game_normal:0,		//游戏正常

game_init_num:2		//游戏 撒下随机的数字

}

/****************** Consts 定义 结束 ********************************/

/****************** Game 開始 ********************************/

/****************** Game 開始 ********************************/

Game={

/*

*重绘游戏

*（1）把数组里面的数字放到div 里面去

*（2）依据数字变更颜色

*/

repaint:function(){

	$(".tab").each(function(){	

		tab_index=parseInt($(".tab").index($(this)));

		if(tab_index>3){ rows=parseInt(tab_index/4);}else{ rows=0;}

		$(this).html(arr[rows][tab_index%4]?arr[rows][tab_index%4]:"");

		switch(parseInt($(this).html())){

		case 2:$(this).css("background",color[1]);break;

		case 4:$(this).css("background",color[2]);break;

		case 8:$(this).css("background",color[3]);break;

		case 16:$(this).css("background",color[4]);break;

		case 32:$(this).css("background",color[5]);break;

		case 64:$(this).css("background",color[6]);break;

		case 128:$(this).css("background",color[7]);break;

		case 256:$(this).css("background",color[8]);break;

		case 512:$(this).css("background",color[9]);break;

		case 1024:$(this).css("background",color[10]);break;

		default:

		$(this).css("background",color[0]);break;

		}

	});

},

/*

*随机产生2的位置

*/

setRandomPos:function(){

	rows=getRandom(3);

	cols=getRandom(3);

    //随机生成一个下标

	while(arr[rows][cols] != 0){

	rows=getRandom(3);

	cols=getRandom(3);

	}

	arr[rows][cols]=Consts.game_init_num;   //

},

//检查游戏是否失败，或者成功

check:function(){

	flag=Consts.game_fail;						//-1

	for(rows=0;rows<Consts.arr_rows_num; rows++){

		 for(cols=0;cols<Consts.arr_cols_num; cols++){

			 if(arr[rows][cols] == 0){

				flag=Consts.game_normal;		//0

				break;

			 }else if(arr[rows][cols] == 1024){

				flag=Consts.game_succeed;		//1

				break;

			 }

		}

	}

	return flag;

},

/*

*执行一次游戏

*(1)检查游戏是否失败或者成功

*(2)依据游戏状态做出应对

*/

run:function(){

	if(this.check() == Consts.game_fail){

		alert("游戏失败了~");

		window.opener = null;

 　window.open(' ', '_self', ' ');

 　window.close();

	 }else if(this.check() == Consts.game_normal){

	 this.repaint();

	 this.setRandomPos();

	 if(this.check()== Consts.game_fail) {alert("游戏失败了~");}else if(this.check()== Consts.game_succeed){alert("恭喜您，通关啦~~");}

	 }else{

		alert("恭喜您，通关啦~~");

	 }

}

}

/******************Game 结束********************************/

/******************reset 開始********************************/

/******************计算数字，同一方向有同样的则合并**********/

reset={

//【向左】  计算而且合并同样数字

left:function(){

	for(rows=0;rows<Consts.arr_rows_num;rows++){

		for(self=0;self<Consts.arr_cols_num;self++){

			for(compare=self+1;compare<Consts.arr_cols_num;compare++){

				if(arr[rows][compare]!=0 && arr[rows][compare]!=arr[rows][self]) break;

				if((arr[rows][self]==arr[rows][compare])&&(arr[rows][self]!=0)){

					arr[rows][self]=arr[rows][self]*2;

					arr[rows][compare]=0;

					//Game.setRandomPos();			//加入一个随机的2

				}

			}

		}

	}

},

//【向右】  计算而且合并同样数字

right:function(){

	for(rows=0;rows<Consts.arr_rows_num;rows++){

		for(self=3;self>-1;self--){

			for(compare=self-1;compare>-1;compare--){

			    //不相等，直接退出

				if(arr[rows][compare] !=0 && arr[rows][compare] != arr[rows][self]) break;

				//相等，合并元素

				if((arr[rows][self]==arr[rows][compare])&&(arr[rows][self]!=0)){

					arr[rows][self]=arr[rows][self]*2;

					arr[rows][compare]=0;

					//Game.setRandomPos();			//加入一个随机的2

				}

			}

		}

	}

},

//【向下】  计算而且合并同样数字

down:function(){

	for(cols=Consts.arr_cols_num;cols>-1;cols--){

		for(rows=Consts.arr_cols_num-1;rows>0;rows--){

			for(compare=rows-1;compare>-1;compare--){

				if(arr[compare][cols]!=0 && arr[compare][cols]!=arr[rows][cols]) break;

				if((arr[rows][cols]==arr[compare][cols])&&(arr[rows][cols]!=0)){

					arr[rows][cols]=arr[rows][cols]*2;

					arr[compare][cols]=0;

					//Game.setRandomPos();			//加入一个随机的2

				}

			}

		}

	}

},

//【向上】  计算而且合并同样数字

up:function(){

	for(cols=0;cols<Consts.arr_cols_num;cols++){

		for(self=0;self<Consts.arr_rows_num;self++){

			for(compare=self+1;compare<Consts.arr_rows_num;compare++){

				if(arr[compare][cols]!=0 && arr[compare][cols]!=arr[self][cols]) break;

				if((arr[self][cols]==arr[compare][cols])&&(arr[self][cols]!=0)){

					arr[self][cols]=arr[self][cols]*2;

					arr[compare][cols]=0;

					//Game.setRandomPos();			//加入一个随机的2

				}

			}

		}

	}

}

}

/******************reset 结束********************************/

/******************move 開始********************************/

/******************移动的方向没有数字存在，那么就移动********************************/

move={

//【向左】

left:function(){

	for(num=0;num<4;num++){

	    for(rows=0;rows<Consts.arr_rows_num;rows++){

		    for(cols=0;cols<Consts.arr_cols_num;cols++){

			    if(arr[rows][cols] == 0){

				    for(index = cols; index<Consts.arr_cols_num-1;index++){

				        arr[rows][index]=arr[rows][index+1];

				    }

				    arr[rows][index]=0;

			    }

		    }

	    }

	}

},

//【向右】

right:function(){

	for(num=0;num<4;num++){

		for(rows=Consts.arr_rows_num-1;rows>-1;rows--){

			for(cols=Consts.arr_cols_num-1;cols>-1;cols--){

				if(arr[rows][cols]==0){

					for(index=cols;index>0;index--){

					arr[rows][index]=arr[rows][index-1];

					}

					arr[rows][0]=0;

				}

			}

		}

		}

},

//【向下】

down:function(){

	for(num=0;num<4;num++){

		for(cols=0;cols<Consts.arr_cols_num;cols++){

			for(rows=Consts.arr_rows_num-1;rows>-1;rows--){

				if(arr[rows][cols]==0){

					for(index=rows;index>0;index--){

					arr[index][cols]=arr[index-1][cols];

					}

					arr[0][cols]=0;

				}

			}

		}

	}

},

//【向上】

up:function(){

	for(num=0;num<4;num++){

		for(cols=0;cols<Consts.arr_cols_num;cols++){

			for(rows=0;rows<Consts.arr_rows_num;rows++){

				if(arr[rows][cols]==0){

					for(index=rows;index<Consts.arr_rows_num-1;index++){

					arr[index][cols]=arr[index+1][cols];

					}

					arr[3][cols]=0;

				}

			}

		}

	}

}

}

/******************move 结束********************************/

//获取0~num_field之内的数字

function getRandom(num_field){

return Math.round(Math.random()*num_field);

}

  Game.run();

window.onkeydown=function(e){

switch(e.keyCode){

case 37:

	 reset.left();

	 move.left();

	 break;

case 38:

	 reset.up();

	 move.up();

	 break;

case 39:

	 reset.right();

	 move.right();

	 break;

case 40:

	reset.down();

	move.down();

	break;

}

 Game.run();

 $("#times").html(parseInt($("#times").html())+1);

}

</script>

<script type="text/javascript">

            //全局变量，触摸開始位置

            var startX = 0, startY = 0;

            var endX = 0, endY = 0;

            //touchstart事件

            function touchSatrtFunc(evt) {

                try

                {

                    //evt.preventDefault(); //阻止触摸时浏览器的缩放、滚动栏滚动等

                    var touch = evt.touches[0]; //获取第一个触点

                    var x = Number(touch.pageX); //页面触点X坐标

                    var y = Number(touch.pageY); //页面触点Y坐标

                    //记录触点初始位置

                    startX = x;

                    startY = y;

                }

                catch (e) {

                    alert('touchSatrtFunc：' + e.message);

                }

            }

            //touchmove事件，这个事件无法获取坐标

            function touchMoveFunc(evt) {

                try

                {

                    //evt.preventDefault(); //阻止触摸时浏览器的缩放、滚动栏滚动等

                    var touch = evt.touches[0]; //获取第一个触点

                     endX = Number(touch.pageX); //页面触点X坐标

                     endy = Number(touch.pageY); //页面触点Y坐标

                    var text = 'TouchMove事件触发：（' + x + ', ' + y + '）';

                    //推断滑动方向

                   /* if ((x - startX) >5) {

                        text += '<br/>右滑动';

                    }else if((x - startX) <-5){

						text += '<br/>左滑动';

					}

                    if ((y - startY) > 5) {

                        text += '<br/>上滑动';

                    }else  if ((y - startY) < -5) {

						text += '<br/>下滑动';

					}*/

                    document.getElementById("result").innerHTML = text;

                }

                catch (e) {

                    alert('touchMoveFunc：' + e.message);

                }

            }

            //touchend事件

            function touchEndFunc(evt) {

                try {

                    //evt.preventDefault(); //阻止触摸时浏览器的缩放、滚动栏滚动等

                    var text = 'TouchEnd事件触发';

                    document.getElementById("result").innerHTML = text;

                }

                catch (e) {

                    alert('touchEndFunc：' + e.message);

                }

            }

            //绑定事件

            function bindEvent() {

                document.addEventListener('touchstart', touchSatrtFunc, false);

                document.addEventListener('touchmove', touchMoveFunc, false);

                document.addEventListener('touchend', touchEndFunc, false);

            }

            //推断是否支持触摸事件

            function isTouchDevice() {

                document.getElementById("version").innerHTML = navigator.appVersion;

                try {

                    document.createEvent("TouchEvent");

                    alert("支持TouchEvent事件！");

                    bindEvent(); //绑定事件

                }

                catch (e) {

                    alert("不支持TouchEvent事件！" + e.message);

                }

            }

            window.onload = isTouchDevice;

    </script>

	<div id="version"></div>

</body>

</html>

执行时，建议採用火狐浏览器...

以下是执行效果：

使用javascript开发2048的更多相关文章

Windows Store App JavaScript 开发：简单对象绑定
简单对象绑定是一种基本的绑定类型,可以实现将一个对象中的数据绑定到HTML元素的属性.下面通过一个示例来演示如何使用HTML5和JavaScript开发一个实现简单对象绑定的Windows应用商店应用 ...
Windows Store App JavaScript 开发：页内导航
页内导航是在一个页面内根据需要加载其他页面的内容,在开发基于JavaScript的Windows应用商店应用时,可以使用WinJS.Navigation.navigate函数传递要加载的页面地址并使用 ...
React Native – 使用 JavaScript 开发原生应用
前不久,Facebook 在F8开发者大会上正式开源了 React Native 项目.不过目前只有 iOS 版,Android 版还需要再等一段时间,这是最新的用 JavaScript 语言开发原生 ...
JavaScript开发规范要求
http://www.cnblogs.com/webflash/archive/2010/06/11/1756255.html 作为一名开发人员(WEB前端JavaScript开发),不规范的开发不仅 ...
ArcGIS API for JavaScript开发环境搭建及第一个实例demo
原文:ArcGIS API for JavaScript开发环境搭建及第一个实例demo ESRI公司截止到目前已经发布了最新的ArcGIS Server for JavaScript API v3. ...
为什么JavaScript开发如此疯狂
本文由码农网 – 小峰原创翻译,转载请看清文末的转载要求,欢迎参与我们的付费投稿计划! Web开发太有意思了! 但是JavaScript则……令人望而生畏. Web开发中其他一切对你而言都是小菜一碟, ...
JavaScript 开发规范要求详解
作为一名开发人员(We前端JavaScript开发),不规范的开发不仅使日后代码维护变的困难,同时也不利于团队的合作,通常还会带来代码安全以及执行效率上的问题.本人在开发工作中就曾与不按规范来开发的同 ...
使用SeaJS实现模块化JavaScript开发
前言 SeaJS是一个遵循CommonJS规范的JavaScript模块加载框架,可以实现JavaScript的模块化开发及加载机制.与jQuery等JavaScript框架不同,SeaJS不会扩展封 ...
JavaScript开发规范
作为一名开发人员(WEB前端JavaScript开发),不规范的开发不仅使日后代码维护变的困难,同时也不利于团队的合作,通常还会带来代码安全以及执行效率上的问题.本人在开发工作中就曾与不按规范来开发 ...

随机推荐

jsp获得本地及serverIP的方法
InetAddress addr = InetAddress.getLocalHost(); String ip = addr.getHostAddress().toString();//获得本机IP ...
HDU 4296 Buildings （YY）
题意: 给定N个物体,每个物体有两个参数w,s. w代表它自身的重量: s代表它的强度.现在要把这些物体叠在一起,会产生一个PDV值. PDV解释:(Σwj)-si, where (Σwj) st ...
爬虫总结_python
import sqlite3 Python 的一个非常大的优点是很容易写很容易跑起来,缺点就是很多不那么著名的(甚至一些著名的)程序和库都不像 C 和 C++ 那边那样专业.可靠(当然这也有动态类型 ...
extjs表单
Ext.onReady(function(){ Ext.BLANK_IMAGE_URL = '../ext/resources/images/default/s.gif'; Ext.QuickTi ...
gant
http://gant.github.io/ http://gant.codehaus.org/
phing用户手册第四章Getting Started译文
本章是phing的入门篇,查看原文请猛击这里. XML And Phing 一个合法的Phing构建文件有以下几部分构成: 1.文档序言 2.唯一的根元素<project> 3.一些Ph ...
SPOJ DISUBSTR（字符串hash）
传送门:DISUBSTR 题意:给定一个字符串,求不同子串个数. 分析:由于数据较小,直接枚举长度为1,2...n的所有子串进行hash即可,复杂度(O(n^2)),后缀数组才是正解(O(nlogn) ...
[置顶] 如何在Python IDLE中调试Python代码？
好久没有用Python了,居然忘记了怎么在Python IDLE中调试Python代码.百度了一下,然后还是写下来吧,以免以后又忘记了. 1. Set break point in the sourc ...
C++ 多态性分析
编译 - 时间多态性--函数重载编译后的中间代码(例如GCC产生.o文件.此时还不是汇编语言)函数名字有变化,看以下两个样例. void cc_show(const char*str) -& ...
Unity MegaFiers 顶点动画
使用 MegaFiers 插件,能够使得Unity支持顶点动画的播放. 官方视频教程例如以下: 在这里简单測试使用下,环境例如以下: Blender 2.72 Unity 4.5.4 Mega ...

使用javascript开发2048

使用javascript开发2048的更多相关文章

随机推荐

热门专题