标签：javascript 教学 jquery 游戏
嗯，团队队友开发了一个简单的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 教学 jquery 游戏
原文地址：http://blog.csdn.net/u010469003/article/details/24689037
