javascript 2048 无动画效果

最新推荐文章于 2024-05-03 11:47:20 发布
最新推荐文章于 2024-05-03 11:47:20 发布
阅读量334 收藏
点赞数 1
分类专栏： 项目实例 文章标签： javascript 2048 web前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_32250595/article/details/78144242
版权
0928
昨日写该JavaScript时，发现 用 “document.getElementById("")”取table的值 失败， 取到的结果一直为null。
上网百度了一会儿，发现是由于在HTML加载之前，先加载了JS文件造成的。
解决方案往往有两种，一种是使用window.onload;
另外一种是将<script></script>放在HTML页面底端

0930：

发现bug：
此时往右边移动应该不能产生随机数，但是由于 array[3][3] == array[3][1]导致出现bug，
依然产生了随机数。

解决方法：再设置一个while循环 用来找到下一个非零元素，做好标记 并判断是否 与当前元素相等；

game.jsp：
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/TZFE/game.css" >

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>2048</title>
</head>
<body>
<div class="main">
<h1>2048</h1>
<div ><input type="button" id="start" value="NewGame" οnclick="game.start()"></div>
<div align="center" class="">Score：<span id="score">0</span> </div>
<table id="panel"><!-- style="height: 660px;width: 660px;background-color: #bba2a0" -->
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr >
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr >
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr >
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</div>
</body>
<script type="text/javascript" src="game.js"></script>
</html>


game.js
/**
* 思路：
* 用户 点击 开始按钮
* 随机产生1到2个 2或4
* 用户 使用 键盘或鼠标 控制 移动方向
* 数组 移动或相加
* 出口条件：无空格且不能移动
*/



/*
* 0929 关于Array设置为全局变量或私有变量
*/
/*
* 0929 关于游戏总是能产生随机数， 应当对调用Action方法添加 if条件 以及关于 游戏结束的出口条件
*/
/*
* 0929 加分功能
*/
/*
* 0930
*/


var game = {
//this 指的是 类 game
initArray: function(){
var arrayGame = new Array();
for(var i=0 ; i<4 ; i++){
arrayGame[i] = new Array();
}
for(var i=0 ; i<4 ;i++){
for(var j=0 ; j<4 ;j++){
arrayGame[i][j] = 0;
}
}
return arrayGame;
},
init: function(){
var t=this;
t.startTag = true ;
t.array = t.initArray();//将数组 声明 为全局变量
var pos ;
pos = t.makeNullPosititon();//获取 随机产生的位置
t.setPosition(pos);
pos = t.makeNullPosititon();//获取 随机产生的位置
t.setPosition(pos);
},
//开始
start: function(){
var t = this;
var table = document.getElementById("panel");
if(t.startTag = true){
t.printTable(table);
startTag = false;
}
t.moveDirection();
},
makeRandom: function(){
var r=Math.round(Math.random()*2)+2;
if(r == 3){
r = 2;
}
return r;
},
//随机空白位置的产生：遍历数据数组array，取得所有位置为空的集合pos，array中数据为0的即对应位置为空，可产生随机数；在pos中产生随机位置。
makeNullPosititon: function(){
var array=this.array;
var pos;
var count=0;
for(var i=0; i<4 ; i++){
for(var j=0; j<4 ;j++){
if(array[i][j] == 0){
count++;
}
}
}
pos = Math.floor(Math.random()*count);//于空位置数组中产生随机数
return pos;
},
setPosition: function(pos){
var t = this;
var array = t.array;
var random = t.makeRandom(); //所产生的随机数
var count = 0;
for(var i=0;i<4;i++){
for(var j=0 ; j<4 ;j++){
if(array[i][j] == 0){
if(count == pos){
array[i][j]=random;
}
count++;
}
}
}
},
checkSameNum: function(){
var array = this.array;
for(var i=0; i<4 ;i++){
for(var j=0 ; j<3 ;j++){
if(array[i][j] == array[i][j+1]){
return true;
}
}
}
for(var j=0;j<4;j++){
for(var i=0 ; i<3 ; i++){
if(array[i][j] == array[i+1][j]){
return true;
}
}
}
return false;
},
//检测空位置
checkNullPosition: function(){
var array = this.array;
for(var i=0; i<4 ; i++){
for(var j=0; j<4 ; j++){
if(array[i][j]==0 )
return true;
}
}
return false;
},
printTable: function(table){
var array = this.array;
for(var i=0 ;i<4;i++){
for(var j=0;j<4;j++){
if(array[i][j] != 0){
switch(array[i][j]){
case 2:
table . rows[i].cells[j].setAttribute('style',
'background-color:#e6e4cd !important;color: #776e65 !important');
break;
case 4:
table . rows[i].cells[j].setAttribute('style',
'background-color:#f0e4cd !important;color:#776e65 !important');
break;
case 8:
table . rows[i].cells[j].setAttribute('style',
'background-color:#f2b179 !important;color:#FFFFFF !important');
break;
case 16:
table . rows[i].cells[j].setAttribute('style',
'background-color:#f99464 !important;color:#FFFFFF !important');
break;
case 32:
table . rows[i].cells[j].setAttribute('style',
'background-color:#f67c5f !important;color:#FFFFFF !important');
break;
case 64:
table . rows[i].cells[j].setAttribute('style',
'background-color:#f65e3b !important;color:#FFFFFF !important');
break;
case 128:
table . rows[i].cells[j].setAttribute('style',
'background-color:#F7FE2E !important;color:#FFFFFF !important');
break;
case 256:
table . rows[i].cells[j].setAttribute('style',
'background-color:#f1c232 !important;color:#FFFFFF !important');
break;
case 512:
table . rows[i].cells[j].setAttribute('style',
'background-color:#f1c232 !important;color:#FFFFFF !important');
break;
case 1024:
table . rows[i].cells[j].setAttribute('style',
'background-color:#f1c232 !important;color:#FFFFFF !important');
break;
default:
table . rows[i].cells[j].setAttribute('style',
'background-color:#f1c232 !important;color:#FFFFFF !important');
break;
}
//table . rows[x].cells[y].setAttribute('style','background-color: #ece0c9 !important');
table.rows[i].cells[j].innerHTML = array[i][j];
}else{
table . rows[i].cells[j].setAttribute('style',
'background-color:#ccc0b4 !impotant');
table.rows[i].cells[j].innerHTML = " ";
}
/*table.rows[i].cells[j].innerHTML = array[i][j];*/
}
}
},
moveDirection: function(){
/* 为什么调用这个操作还调用 它所在的方法*/
/* 而且重新调用这个方法返回的居然还是原来的变量*/
/* 该方法并没有修改参数本身而是因为原来table上的值没有清空*/
var t=this;
var table = document.getElementById("panel");
document.onkeydown = function(event){
var e = event || window.event || arguments.callee.caller.arguments[0];
switch(e && e.keyCode){
case 87:
if(t.checkTop()){
t.topAction();
var pos = t.makeNullPosititon();
t.setPosition(pos);
t.printTable(table);
}else{
alert("不能移动");
}
break;//w
case 83:
if(t.checkBottom()){
t.bottomAction();
var pos = t.makeNullPosititon();
t.setPosition(pos);
t.printTable(table);
}else{
alert("不能移动");
}
break;
case 65:
if(t.checkLeft()){
t.leftAction();
var pos = t.makeNullPosititon();
t.setPosition(pos);
t.printTable(table);
}else{
alert("不能移动");
}
break;//a
case 68:
if(t.checkRight()){
t.rightAction();
var pos = t.makeNullPosititon();
t.setPosition(pos);
t.printTable(table);
}else{
alert("不能移动");
}
break;//d
}
t.calculateScore();
if( !t.checkNullPosition() && !t.checkSameNum()){
alert("you lost");
}
};
},
topAction: function(){
var array = this.array;
for(var j=0 ; j <4 ;j++){//列循环
for(var i=0 ; i<3 ;i++){
if(array[i][j] != 0){
var tag = i+1;
while(array[tag++][j]==0 && tag<4) {};//往下排除 0 元素
if(array[tag-1][j] == array[i][j]){
/*alert("tag:"+tag+" i:"+i);*/
array[i][j] = 2*array[i][j];
array[tag-1][j] = 0;
}
}
}
}
for(var j=0; j<4 ;j++){
for(var i=0 ; i<4 ;i++){
var tag = i+1;
while(array[i][j] == 0 && tag<4){
array[i][j] = array[tag][j];
array[tag][j] = 0;
//alert("array["+tag+"]"+"["+j+"]"+"="+array[tag][j]);
tag++;
}
}
}
},
bottomAction: function(){
var array = this.array;
for(var j=0 ; j <4 ;j++){//列循环
for(var i=3 ; i>0 ;i--){
if(array[i][j] != 0){
var tag = i-1;
while(array[tag--][j]==0 && tag>=0) {};//往下排除 0 元素
if(array[tag+1][j] == array[i][j]){
array[i][j] = 2*array[i][j];
array[tag+1][j] = 0;
}
}
}
}
for(var j=0; j<4 ;j++){
for(var i=3 ; i>=0 ;i--){
var tag = i-1;
while(array[i][j] == 0 && tag>=0){
array[i][j] = array[tag][j];
array[tag][j] = 0;
//alert("array["+tag+"]"+"["+j+"]"+"="+array[tag][j]);
tag--;
}
}
}
},
leftAction : function(){
var array = this.array;
for(var i=0 ; i <4 ;i++){//列循环
for(var j=0 ; j<3 ;j++){
if(array[i][j] != 0){
var tag = j+1;
while(array[i][tag++]==0 && tag<4) {};//往下排除 0 元素
if(array[i][tag-1] == array[i][j]){
/*alert("tag:"+tag+" i:"+i);*/
array[i][j] = 2*array[i][j];
array[i][tag-1] = 0;
}
}
}
}
for(var i=0; i<4 ;i++){
for(var j=0 ; j<4 ;j++){
var tag = j+1;
while(array[i][j] == 0 && tag<4){
array[i][j] = array[i][tag];
array[i][tag] = 0;
//alert("array["+tag+"]"+"["+j+"]"+"="+array[tag][j]);
tag++;
}
}
}
},
rightAction: function(){

var array = this.array;
for(var i=0 ; i <4 ;i++){//列循环
for(var j=3 ; j>0 ;j--){
if(array[i][j] != 0){
var tag = j-1;
while(array[i][tag--]==0 && tag>=0) {};//往下排除 0 元素
if(array[i][tag+1] == array[i][j]){
array[i][j] = 2*array[i][j];
array[i][tag+1] = 0;
}
}
}
}
for(var i=0; i<4 ;i++){
for(var j=3 ; j>=0 ;j--){
var tag = j-1;
while(array[i][j] == 0 && tag>=0){
array[i][j] = array[i][tag];
array[i][tag] = 0;
//alert("array["+tag+"]"+"["+j+"]"+"="+array[tag][j]);
tag--;
}
}
}
},

checkTop: function(){
var array = this .array;
for(var j=0; j<4 ;j++){
for(var i=3 ; i>0 ; i--){
if(array[i][j] != 0){
tag = i-1;
while(tag >= 0){
if(array[tag][j] == 0 ){
return true;
}
/*if(array[tag][j] == array[i][j]){
return true;
}*/
tag--;
}
tag= i-1;
while(tag >=0 && array[tag][j] == 0){
//用于寻找下一个非0数字
tag--;
}
if(array[tag][j] == array[i][j]){
return true;
}
}
}
}
return false;
},
checkBottom : function(){
var array = this .array;
for(var j=0; j<4 ;j++){
for(var i=0 ; i<3 ; i++){
if(array[i][j] != 0){
tag = i+1;
while(tag < 4){
if(array[tag][j] == 0){
return true;
}
/* if(array[tag][j] == array[i][j]){
return true;
}*/
tag++;
}
//由于 相加判断只允许判断 一次 所以 必须写两个循环检查
/**
* 原本这个方法应当会出现数组越界的情况，当时由于出现数组越界的情况时，在移动检查中
* 返回了true，所以 可以 不需要考虑这种情况；
*/
tag=i+1;
while(tag <4 && array[tag][j] == 0){
//用于寻找下一个非0数字
tag++;
}
if(array[tag][j] == array[i][j]){
//alert("竟然可以？"+"i："+i+" j:"+j+" tag-1:"+(tag-1));
return true;
}
}
}
}
return false;
},

checkLeft: function(){
var array = this.array;
for(var i=0 ; i<4 ;i++){
for(var j=3 ; j>0 ; j--){
if(array[i][j] != 0){
var tag = j-1;
while(tag >= 0){
if(array[i][tag] == 0 || array[i][tag] == array[i][j]){
return true;
}
tag--;
}
tag= j-1;
while(tag >=0 && array[i][tag] == 0){
//用于寻找下一个非0数字
tag--;
}
if(array[i][tag] == array[i][j]){
return true;
}
}
}
}
return false;
},
checkRight : function(){
var array = this.array;
for(var i=0 ; i<4 ;i++){
for(var j=0 ; j<3 ; j++){
if(array[i][j] != 0){
var tag = j+1;
while(tag < 4){
if(array[i][tag] == 0 || array[i][tag] == array[i][j]){
return true;
}
tag++;
}
tag= j+1;
while(tag <4 && array[i][tag] == 0){
//用于寻找下一个非0数字
tag++;
}
if(array[i][tag] == array[i][j]){
return true;
}
}
}
}
return false;
},

calculateScore: function(){
var scoreSum = 0;
var score = document.getElementById("score");
var array = this.array;
for(var i=0 ; i<4 ;i++){
for(var j=0 ; j<4 ;j++){
scoreSum=scoreSum + array[i][j];
}
}
score.innerHTML = scoreSum;
}
}

game.init();

game.css
@CHARSET "UTF-8";

.main {
margin:0 auto;
}

.main div{
margin:5px auto;
width:160px;
font-weight:400;
font-size: 20px;
}

.main table{
margin:0 auto;
width: 800px;
height: 800px;
background-color: #bbada0;
border-radius:5px;
}

.main tr{
text-align: center;
}

.main td{
font-size:60px;
width: 150px;
height: 150px;
background-color: #ccc0b4;
border: 5px solid #bbada0;
border-radius:10px;
}

#start {
margin:5px auto;
width: 160px;
height: 55px;
font-size: 20px;
color: #ffffff;
background-color: #917a66;
border: 0;
border-radius:10px;
}

.main h1{
text-align: center;
font-weight:900;
}
qq_32250595
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
javascript动画效果类封装代码
10-30
javascript动画效果类封装代码
2048游戏实现，html+css+js
GooWhite的博客
02-06 1990
序言：前端大作业，html+css+js实现2048，有方块移动动画、计分板和历史记录回放。
JS与HTML、CSS实现2048小游戏（四）
池子的学习分享
12-13 1974
JS与HTML、CSS实现2048小游戏（四）前篇链接逻辑分析键盘响应 前篇链接 JS与HTML、CSS实现2048小游戏（一） JS与HTML、CSS实现2048小游戏（二） JS与HTML、CSS实现2048小游戏（三） 逻辑分析 在编写游戏的主题逻辑之前，咱们需要先分析清楚游戏的一个主要流程。在这个网页版的2048中没有办法通过手机版那样滑动来操作，小编就设定使用上下左右四个方向键（也可以改...
Android期末项目2048小游戏
a_Myra的博客
03-04 1万+
Android期末项目2048小游戏。 简介 2048属于益智类小游戏，它做到了娱乐性、趣味性、教育性相统一。益智类的游戏即是需要去开动大脑去思考从而获得游戏的胜利。简单的益智类游戏可以使玩家在娱乐中不断的开发大脑。这样一来就实现了在娱乐中学习。每次可以选择上下左右其中一个方向去滑动，每滑动一次，所有的数字方块都会往滑动的方向靠拢，系统也会在空白的地方随机出现一个数字方块，相同数字的方块在靠拢、相撞时会相加。不断的叠加最终拼凑出2048这个数字就算成功。 设计思想 完成2048基本功能，加入动画效果，加入声
原生js实现2048
ShiningDays的博客
03-21 4021
js原生实现2048的代码
javascript制作loading动画效果 loading效果
10-26
项目中多处要给ajax提交的时候增加等待动画效果，所以就写了一个简单的通用js方法,大家参考使用吧
用JavaScript实现动画效果的方法
10-27
大家在使用Dreamweaver中的时间线功能或以做出很有趣的动画效果，Dreamweaver会自动为用户生成特定的程序代码，大家有没有想过动画的实现原理呢？
javascript 通用loading动画效果实例代码
10-26
主要介绍了javascript 通用loading动画效果实例代码，有需要的朋友可以参考一下
javascript动画效果打开/关闭层
10-30
用javascript实现打开层和关闭层的效果，原理不错，学习，记录好
2048. html+css+js实现网页版2048小游戏
07-11
2048. html + js + css实现网页版2048小游戏源码，直接下载运行index.html和2048.html即可。对于熟练练习JS和html以及css有很大帮助
requestAnimationFrame 介绍
zha_zi的专栏
04-09 568
转自http://www.zhangxinxu.com/wordpress/?p=3695   一、哟，requestAnimationFrame, 新同学，先自我介绍下 Hello, 大家好，我就是风姿卓越，万种迷人的requestAnimationFrame，呵呵呵呵。很高兴和大家见面，请多指教！ 。。。。 咳咳，大家不要一副不屑的样子嘛。跟你讲，我可是很有用的。所谓人如其名，看...
2048小游戏 没有动画效果
nil null NSnull undefined
09-10 260
2048小游戏 没事写的2048小游戏 没有动画效果html代码css代码js代码 2048小游戏 没有动画效果 html代码 这是html <div class="big"> <div></div> <div></div> <div></div> <div></div> <div></div>
web小游戏 2048制作（四）:过场动画 showanimation2048.js
z6719201102的博客
02-26 1366
function showNumberAnimation( i , j , randNumber ){ var numberCell = $('#number-cell-' + i + "-" + j ); numberCell.css('background-color',getBackGroundColor( randNumber ) ); numberCell.c
cocos2d-js 2048带动画实现
u012601195的博客
08-22 1416
var CardSprite = cc.Sprite.extend({ number : 0, label : null, cardLayer : null, ctor : function(num,cardWidth,cardHeight,px,py){ this._super(); this.number = num; this.cardLayer = cc
2048小游戏——网页版（基础篇）
weixin_30514745的博客
03-07 1344
这是一个用js写的网页版2048游戏，实现2048游戏的基本功能。 比如：绘制网格、随机生成数字、动画移动数字、累计分数、重置游戏等。 同时，笔者在自己的理解下，对代码进行了非常详细的注释，相信有一点点基础的开发人员都能迅速看懂，快来试试吧！ 当然，大神还可以在这个文档的基础上对游戏进行改进，比如添加一些更炫酷的动画效果，自定义数字、文字、图像等。 该项...
2048游戏回顾二：算法总结（移动、合并、动画等）
热门推荐
阳光玻璃杯
10-29 1万+
如果只是单纯的写一个2048游戏，让这个游戏可以玩的话，工作量还是蛮小的。不过，在这写工作中，你可能花时间最多的就是数字的移动与合并的算法了，如果没有做过，可能确实要花点时间来构思，所以，写完2048游戏以后，我希望能把它做个记录。
基于Springboot的旅游管理系统（有报告）。Javaee项目，springboot项目。
最新发布
XING的博客
05-03 453
基于Springboot的旅游管理系统（有报告）。Javaee项目，springboot项目。数据库作为系统数据储存平台，实现了基于B/S结构的Web系统。界面简洁，操作简单。采用M（model）V（view）C（controller）三层体系结构，通过。
报表控件Stimulsoft在JavaScript报告工具中的事件：查看器事件（上）
励志做最业余的专业博主，控件产品可以私我~
04-28 806
在本文中，我们为JS报告工具中的查看器事件提供了全面的指南，包括它们的详细描述、参数列表等一系列详细内容。
javascript动画效果简单
12-16
以下是一个使用JavaScript实现的简单动画效果的例子： ```html <!DOCTYPE html> <title>JavaScript Animation #mydiv { width: 50px; height: 50px; background-color: green; position: ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值