使用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开发),不规范的开发不仅使日后代码维护变的困难,同时也不利于团队的合作,通常还会带来代码安全以 及执行效率上的问题.本人在开发工作中就曾与不按规范来开发 ...
随机推荐
- HDOJ 2442 -bricks 状态压缩DP 一直TLE.打表过的..
有5个砖块..加上一个空着不放..那么有6种状态..所以很明显的可以用6进制的状态DP... 不过这么做..我觉得我已经能优化的都优化了...还是超时..一看数据范围是100*6..打表先AC了.. ...
- RTSP 消息拼装实例代码
整理了下之前文章提到的RTSP实例的代码,主要是拼装各类消息字段. 首先,抽取一个公共函数,用来根据消息类型,生成不同的format,供sprintf试用. char * GetRTSPCmd( co ...
- 九度OJ 1179 阶乘（模拟）
题目1179:阶乘 时间限制:1 秒 内存限制:32 兆 特殊判题:否 提交:4526 解决:1315 题目描写叙述: 输入n, 求y1=1!+3!+...m!(m是小于等于n的最大奇数) y2=2! ...
- Postfix+Amavisd-new+Spamassassin+ClamAV整合安装
1. 安装软件和依赖包 apt-get install amavisd-new spamassassin clamav-daemon mysql-client mysql-server apt-get ...
- HDU 1242——Rescue（优先队列）
题意: 一个天使a被关在迷宫里,她的很多小伙伴r打算去救她.求小伙伴就到她须要的最小时间.在迷宫里有守卫.打败守卫须要一个单位时间.假设碰到守卫必须要杀死他 思路: 天使仅仅有一个,她的小伙伴有非常多 ...
- git flow 的使用
在这里主要讲一下我在项目中用到的关于gitflow的使用方法. 公司的项目中,专门有一台用来存放版本号库的server,路径是在默认的安装文件夹/opt/git/,那么在使用的时候,假设你是 ...
- Extjs学习----------动态载入js文件（减轻浏览器的压力）
动态载入js文件能够减轻浏览器的压力,本例使用了Ext.window.Window组件,该组件的学习地址:http://blog.csdn.net/z1137730824/article/detail ...
- JavaScript实战
JavaScript之单例实战 一.概述 所谓单例模式,顾名思义即一个类只有一个实例. 所以,当我们创建一个实例时,就必须判断其是否已经存在了这个实例,如果已经存在了这个实例,那么就返回这个已经存在的 ...
- 使用Ajax以及Jquery.form异步上传图片
一.前言 之前做图片上传一直用的第三方插件,Uploadify 这个应该是用的比較多的,相同也用过别的,在方便了自己的同一时候也非常赞叹人家的功能. 思来想去,仅仅会用别的人东西,始终自己学到的少, ...
- DL动态载入框架技术文档
DL动态载入框架技术文档 DL技术交流群:215680213 1. Android apk动态载入机制的研究 2. Android apk动态载入机制的研究(二):资源载入和activity生命周期管 ...