欢迎来到 IT实训基地 - 科迅教育
咨询电话:400-836-0509
首页
就业真相
视频教程
项目实战
学员专访
技术交流
当前位置:
首页
技术交流
JQuery实现1024数独效果
JQuery实现1024数独效果
浏览量:483
时间:2019/4/13
类别:技术交流

今天我们来分享一款很火的小游戏,1024数独,先看看图

YOIX{4`6TABRWXMA]%[_%WM.png

那么我先分享一下html5代码:

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title></title>

<link rel="stylesheet" href="css/shudu.css" />

<script src="js/jquery.min.js"></script>

<script src="js/shudu.js"></script>

</head>

<body>

<!--构建游戏框架S-->

<div>

<!--得分区 S-->

<div>您现在得分 <span>0</span> </div>

<!--得分区 E-->

<div>

<div>

<ul>

<li class="gameFrameCell "></li>

<li></li>

<li>

</li>

<li>

</li>

</ul>

</div>

<div>

<ul>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

</ul>

</div>

<div>

<ul>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

</ul>

</div>

<div>

<ul>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

</ul>

</div>

</div>

<!--游戏开始按键S-->

<div>

<button class="gameControlButton gameStart">开始</button>

<!--上下左右操作键S-->

<div>

<div>

<span>↑</span>

</div>

<div>

<span>←</span>

<span>↓</span>

<span>→</span>

</div>

</div>

<!--上下左右操作键E-->

</div>

<!--游戏开始按键E0-->

</div>


<!--构建游戏框架E-->

</body>

</html>

接下来css代码:

* {

padding: 0;

margin: 0;

box-sizing: border-box;

}

 

ul {

list-style: none;

}

 

.color0 {

background: #FFCCCC;

}

 

.color1 {

background: #FFCCCC;

}

 

.color2 {

background: #FF9999;

}

 

.color3 {

background: #FF99CC;

}

 

.color4 {

background: #CCCCFF;

}

 

.color5 {

background: #CC99CC;

}

 

.color6 {

background: #996699;

}

 

.color7 {

background: #663366;

}

 

.color8 {

background: #9999CC;

}

 

.color9 {

background: #CC6699;

}

 

.color10 {

background: #CC3399;

}

 

.color11 {

background: #993366;

}

 

.color12 {

background: #0099CC;

}

 

.color13 {

background: #666699;

}

 

.color14 {

background: #999933;

}

 

.color15 {

background: #003366;

}

 

.gameFrame {

border: 1px solid #fdfafa;

width: 300px;

height: 300px;

background: #CCCCCC;

margin: 20px auto 50px;

}

 

.gameFrame>.gameFrameRow {

width: 300px;

height: 75px;

}

 

.gameFrame>.gameFrameRow .gameFrameUl {

width: 300px;

height: 100%;

}

 

.gameFrame>.gameFrameRow .gameFrameUl .gameFrameCell {

display: inline-block;

border: 1px solid #fdfafa;

height: 100%;

width: 75px;

float: left;

padding: 2px;

}

 

.gameFrame>.gameFrameRow .gameFrameUl .gameFrameCell>span {

display: inline-block;

width: 100%;

height: 100%;

line-height: 75px;

text-align: center;

color: #fff;

}

 

.scoringArea {

text-align: center;

height: 60px;

line-height: 60px;

}

 

.operateKey {

text-align: center;

}

 

.operateKey .gameControlButton {

height: 30px;

padding: 0 8px;

display: inline-block;

vertical-align: middle;

background: #66CC99;

border: none;

border-radius: 4px;

color: #fff;

cursor: pointer;

}

 

.operateKey .directionsKey {

display: inline-block;

width: 100px;

text-align: center;

margin: 0 auto;

}

 

.operateKey .directionsKey>div {

width: 100px;

}

 

.operateKey .directionsKey>div>span {

display: inline-block;

width: 30px;

height: 30px;

line-height: 30px;

margin-top: 10px;

background: #339999;

border-radius: 4px;

color: #fff;

cursor: pointer;

}

最后js代码:

$(function() {

var row = 4,

line = 4;

var cellObject = {}, //初始化所有的位置数据对象

cellArray = [], //初始化所有的位置数据数组

isStartGame = false, //判断是否开始游戏

scoreNum = 0; //初始化分数

var sellPiont = {}; //获取所有已经有点位的数据信息

function gameInit(row, line) {

$(".gameFrameCell").html("");

/*初始化参数*/

/*获取行列数*/

row = row, line = line, cellObject = {}, cellArray = [], sellPiont = {}; //初始化所有的位置数据

for (var i = 0; i < row; i++) {

for (var j = 0; j < line; j++) {

var cellKey = i + "" + j;

//cellArray.push(cellKey);//组装位置数组格式,00 01 02 03 11 ...

cellObject[cellKey] = {}; //组建对象里面的对象,达到多层的效果

cellObject[cellKey].row = i; //

cellObject[cellKey].line = j; //

 

}

}

}

 

function randomRendering() {

/*随机位置随机赋值,赋值局限(2,4)*/

var num = Math.floor(Math.random() * 2), //取随机值,0 产生2 的块,1产生4的块。

cellNum = 2; //初始化为2的块

var createCell = "", //新建的节点

power = 1; //因为js没有计算固定的开根次的方法,只有 sqrt() ,开平方,

if (num == 0) {

createCell = $('<span power="1">2</span>');

power = 1;

cellNum = 2;

} else {

createCell = $('<span power="2">4</span>');

cellNum = 4;

power = 2;

 

}

cellArray = Object.keys(cellObject); //组装位置数组格式,00 01 02 03 11 ...

/*console.log(cellArray.length);*/

/*获取长度的随机数,随机获取位置块的数据*/

var pointsLength = Object.keys(cellObject).length;

if (pointsLength <= 0) {

alert("游戏结束!")

return false;

}

var pointNum = Math.floor(Math.random() * pointsLength);

 

/*获取位置块在对象里面的内容*/

var point = cellObject[cellArray[pointNum]];

/*找到对应的位置块,添加内容*/

$(".gameFrameUl").eq(point.row).find(".gameFrameCell").eq(point.line).addClass("active").append(createCell);

 

/*删除已经被占据位置的坐标块 需要在对象和数据里面同步删除*/

delete cellObject[cellArray[pointNum]];

sellPiont[cellArray[pointNum]] = {};

sellPiont[cellArray[pointNum]].cellNum = cellNum;

sellPiont[cellArray[pointNum]].power = power;

cellArray.splice(pointNum, 1);

}

 

 

 

/*绑定游戏开始时间*/

$(".gameStart").bind("click", function() {

gameInit(4, 4);

isStartGame = true;

/*恢复分数初始化*/

scoreNum = 0;

score(scoreNum);

randomRendering();

});

 

/*上下左右键盘事件*/

$(document).keydown(function(event) {

var e = event || window.event || arguments.callee.caller.arguments[0];

 

/**/

if (e.keyCode == 38) {

$(".upBtn").click();

}

/**/

if (e.keyCode == 37) {

$(".leftBtn").click();

}

/**/

if (e.keyCode == 39) {

$(".rightBtn").click();

}

/**/

if (e.keyCode == 40) {

$(".downBtn").click();

}

});

 

/*操作键绑定事件*/

/*上键事件*/

 

$(".upBtn").bind("click", function() {

if (!isStartGame) {

alert("你还没有开始游戏。")

return false;

}

/*获取所有已存在的位置*/

var cellArrayActive = Object.keys(sellPiont);

/*对已有位置数据在对应方向上的比较 包括判断方向上是否存在其他块数据 是否能够相加,暴扣方向上最顶端处理之后中间是否留有空余位置用于二次移动但不靠口练习相加,

 * 如果存在 2 2 4 ,前面两个2相加得4 这时两个4之间有一个空格,所以不能做相加处理,只能把后者4往方向端移动一步*/

cellArrayActive.sort(function(a, b) {

return a - b;

})

var cellArrayLen = cellArrayActive.length;

for (var i = 0; i < cellArrayLen; i++) {

var rowSubscript = Math.floor(cellArrayActive[i] / 10); //获取所在的排数,便于比较

if (rowSubscript > 0) {

var upRowNum = rowSubscript - 1;

var upLineNum = cellArrayActive[i] % 10;

createNewRow(upRowNum);

}

}

 

function createNewRow(upRowNum) {

 

if (upRowNum >= 0) {

var upCellnmu = upRowNum + "" + upLineNum; //获取方向端前列的一个方块的坐标,用于判断是否有值 sellPiont[upCellnmu]==true 有值

/*console.log(upCellnmu);*/

if (sellPiont[upCellnmu]) {

 

/*邻近的方向端块有值*/

if (sellPiont[upCellnmu].cellNum == sellPiont[cellArrayActive[i]].cellNum) {

/*如果方向位置有有数据且数据相同,则可以相加处理*/

sellPiont[upCellnmu].cellNum = sellPiont[cellArrayActive[i]].cellNum * 2;

sellPiont[upCellnmu].power = sellPiont[cellArrayActive[i]].power + 1;

scoreNum = scoreNum + 1;

score(scoreNum);

/*sellPiont[upCellnmu].power+=1;

console.log(sellPiont[cellArray[i]].power);*/

var upCell = $('<span class="color' + sellPiont[upCellnmu].power + '">' + sellPiont[upCellnmu].cellNum +

'</span>');

$(".gameFrameUl").eq(upRowNum).find(".gameFrameCell").eq(upLineNum).addClass("active").html(upCell);

$(".gameFrameUl").eq(rowSubscript).find(".gameFrameCell").eq(upLineNum).addClass("active").html("");

/*释放空格*/

/*delete cellObject[sellPiont[cellArray[i]]];*/

cellArrayActive.push(cellArrayActive[i]);

cellObject[cellArrayActive[i]] = {}; //

cellObject[cellArrayActive[i]].row = rowSubscript; //

cellObject[cellArrayActive[i]].line = upLineNum; //

 

delete sellPiont[cellArrayActive[i]];

return false;

} else {

upRowNum = upRowNum + 1;

upCellnmu = upRowNum + "" + upLineNum;

if (upCellnmu != cellArrayActive[i]) {

/*方向端没有数据的时候开始移动*/

/*console.log(upCellnmu);

console.log(cellArrayActive[i]);*/

 

/*方向端没有数据的时候开始移动*/

sellPiont[upCellnmu] = {};

sellPiont[upCellnmu].cellNum = sellPiont[cellArrayActive[i]].cellNum;

sellPiont[upCellnmu].power = sellPiont[cellArrayActive[i]].power;

 

cellObject[cellArrayActive[i]] = {}; //

cellObject[cellArrayActive[i]].row = rowSubscript; //

cellObject[cellArrayActive[i]].line = upLineNum; //

/*页面上删除展示效果*/

$(".gameFrameUl").eq(rowSubscript).find(".gameFrameCell").eq(upLineNum).addClass("active").html("");

var upCell = $('<span class="color' + sellPiont[cellArrayActive[i]].power + '">' + sellPiont[cellArrayActive[

i]].cellNum + '</span>');

$(".gameFrameUl").eq(upRowNum).find(".gameFrameCell").eq(upLineNum).addClass("active").html(upCell);

delete sellPiont[cellArrayActive[i]];

delete cellObject[upCellnmu];

return false;

}

}

} else {

if (upRowNum <= 0) {

/*console.log("空空如也");*/

/*方向端没有数据的时候开始移动*/

sellPiont[upCellnmu] = {};

sellPiont[upCellnmu].cellNum = sellPiont[cellArrayActive[i]].cellNum;

sellPiont[upCellnmu].power = sellPiont[cellArrayActive[i]].power;

 

cellObject[cellArrayActive[i]] = {}; //

cellObject[cellArrayActive[i]].row = rowSubscript; //

cellObject[cellArrayActive[i]].line = upLineNum; //

/*页面上删除展示效果*/

$(".gameFrameUl").eq(rowSubscript).find(".gameFrameCell").eq(upLineNum).addClass("active").html("");

var upCell = $('<span class="color' + sellPiont[cellArrayActive[i]].power + '">' + sellPiont[cellArrayActive[

i]].cellNum + '</span>');

$(".gameFrameUl").eq(upRowNum).find(".gameFrameCell").eq(upLineNum).addClass("active").html(upCell);

delete sellPiont[cellArrayActive[i]];

delete cellObject[upCellnmu];

return false;

} else {

createNewRow(upRowNum - 1)

}

 

 

}

} else {

return false;

}

}

/*方向端处理完毕之后,重新随机添加一个数据*/

randomRendering();

})

/*下键事件*/

$(".downBtn").bind("click", function() {

if (!isStartGame) {

alert("你还没有开始游戏。")

return false;

}

/*获取所有已存在的位置*/

var cellArrayActive = Object.keys(sellPiont);

/*对已有位置数据在对应方向上的比较 包括判断方向上是否存在其他块数据 是否能够相加,暴扣方向上最顶端处理之后中间是否留有空余位置用于二次移动但不靠口练习相加,

 * 如果存在 2 2 4 ,前面两个2相加得4 这时两个4之间有一个空格,所以不能做相加处理,只能把后者4往方向端移动一步*/

cellArrayActive.sort(function(a, b) {

return b - a;

}) //从大到小排序

var cellArrayLen = cellArrayActive.length;

for (var i = 0; i < cellArrayLen; i++) {

var rowSubscript = Math.floor(cellArrayActive[i] / 10); //获取所在的排数,便于比较

if (rowSubscript < 3) {

var downRowNum = rowSubscript + 1;

var downLineNum = cellArrayActive[i] % 10;

createNewRow(downRowNum);

}

}

 

function createNewRow(downRowNum) {

if (downRowNum <= 3) {

var upCellnmu = downRowNum + "" + downLineNum; //获取方向端前列的一个方块的坐标,用于判断是否有值 sellPiont[upCellnmu]==true 有值

/*console.log(upCellnmu);*/

if (sellPiont[upCellnmu]) {

 

/*邻近的方向端块有值*/

if (sellPiont[upCellnmu].cellNum == sellPiont[cellArrayActive[i]].cellNum) {

/*如果方向位置有有数据且数据相同,则可以相加处理*/

sellPiont[upCellnmu].cellNum = sellPiont[cellArrayActive[i]].cellNum * 2;

sellPiont[upCellnmu].power = sellPiont[cellArrayActive[i]].power + 1;

scoreNum = scoreNum + 1;

score(scoreNum);

/*sellPiont[upCellnmu].power+=1;

console.log(sellPiont[cellArray[i]].power);*/

var upCell = $('<span class="color' + sellPiont[upCellnmu].power + '">' + sellPiont[upCellnmu].cellNum +

'</span>');

$(".gameFrameUl").eq(downRowNum).find(".gameFrameCell").eq(downLineNum).addClass("active").html(upCell);

$(".gameFrameUl").eq(rowSubscript).find(".gameFrameCell").eq(downLineNum).addClass("active").html("");

/*释放空格*/

/*delete cellObject[sellPiont[cellArray[i]]];*/

cellArrayActive.push(cellArrayActive[i]);

cellObject[cellArrayActive[i]] = {}; //

cellObject[cellArrayActive[i]].row = rowSubscript; //

cellObject[cellArrayActive[i]].line = downLineNum; //

 

delete sellPiont[cellArrayActive[i]];

return false;

} else {

downRowNum = downRowNum - 1;

upCellnmu = downRowNum + "" + downLineNum;

if (upCellnmu != cellArrayActive[i]) {

/*方向端没有数据的时候开始移动*/

/*console.log(upCellnmu);

console.log(cellArrayActive[i]);*/

 

/*方向端没有数据的时候开始移动*/

sellPiont[upCellnmu] = {};

sellPiont[upCellnmu].cellNum = sellPiont[cellArrayActive[i]].cellNum;

sellPiont[upCellnmu].power = sellPiont[cellArrayActive[i]].power;

 

cellObject[cellArrayActive[i]] = {}; //

cellObject[cellArrayActive[i]].row = rowSubscript; //

cellObject[cellArrayActive[i]].line = downLineNum; //

/*页面上删除展示效果*/

$(".gameFrameUl").eq(rowSubscript).find(".gameFrameCell").eq(downLineNum).addClass("active").html("");

var upCell = $('<span class="color' + sellPiont[cellArrayActive[i]].power + '">' + sellPiont[cellArrayActive[

i]].cellNum + '</span>');

$(".gameFrameUl").eq(downRowNum).find(".gameFrameCell").eq(downLineNum).addClass("active").html(upCell);

delete sellPiont[cellArrayActive[i]];

delete cellObject[upCellnmu];

return false;

}

}

} else {

if (downRowNum >= 3) {

/*console.log("空空如也");*/

/*方向端没有数据的时候开始移动*/

sellPiont[upCellnmu] = {};

sellPiont[upCellnmu].cellNum = sellPiont[cellArrayActive[i]].cellNum;

sellPiont[upCellnmu].power = sellPiont[cellArrayActive[i]].power;

 

cellObject[cellArrayActive[i]] = {}; //

cellObject[cellArrayActive[i]].row = rowSubscript; //

cellObject[cellArrayActive[i]].line = downLineNum; //

/*页面上删除展示效果*/

$(".gameFrameUl").eq(rowSubscript).find(".gameFrameCell").eq(downLineNum).addClass("active").html("");

var upCell = $('<span class="color' + sellPiont[cellArrayActive[i]].power + '">' + sellPiont[cellArrayActive[

i]].cellNum + '</span>');

$(".gameFrameUl").eq(downRowNum).find(".gameFrameCell").eq(downLineNum).addClass("active").html(upCell);

delete sellPiont[cellArrayActive[i]];

delete cellObject[upCellnmu];

return false;

} else {

createNewRow(downRowNum + 1)

}

 

 

}

} else {

return false;

}

}

/*方向端处理完毕之后,重新随机添加一个数据*/

randomRendering();

})

 

/*左键事件*/

$(".leftBtn").bind("click", function() {

if (!isStartGame) {

alert("你还没有开始游戏。")

return false;

}

/*获取所有已存在的位置*/

var cellArrayActive = Object.keys(sellPiont);

/*对已有位置数据在对应方向上的比较 包括判断方向上是否存在其他块数据 是否能够相加,暴扣方向上最顶端处理之后中间是否留有空余位置用于二次移动但不靠口练习相加,

 * 如果存在 2 2 4 ,前面两个2相加得4 这时两个4之间有一个空格,所以不能做相加处理,只能把后者4往方向端移动一步*/

cellArrayActive.sort(function(a, b) {

return a - b;

})

var cellArrayLen = cellArrayActive.length;

for (var i = 0; i < cellArrayLen; i++) {

var lineSubscript = cellArrayActive[i] % 10; //获取所在的列数,便于比较

if (lineSubscript > 0) {

var leftRowNum = Math.floor(cellArrayActive[i] / 10);

var leftLineNum = lineSubscript - 1;

createNewRow(leftLineNum);

}

}

 

function createNewRow(leftLineNum) {

 

if (leftLineNum >= 0) {

var upCellnmu = leftRowNum + "" + leftLineNum; //获取方向端前列的一个方块的坐标,用于判断是否有值 sellPiont[upCellnmu]==true 有值

/*console.log(upCellnmu);*/

if (sellPiont[upCellnmu]) {

 

/*邻近的方向端块有值*/

if (sellPiont[upCellnmu].cellNum == sellPiont[cellArrayActive[i]].cellNum) {

/*如果方向位置有有数据且数据相同,则可以相加处理*/

sellPiont[upCellnmu].cellNum = sellPiont[cellArrayActive[i]].cellNum * 2;

sellPiont[upCellnmu].power = sellPiont[cellArrayActive[i]].power + 1;

scoreNum = scoreNum + 1;

score(scoreNum);

/*sellPiont[upCellnmu].power+=1;

console.log(sellPiont[cellArray[i]].power);*/

var upCell = $('<span class="color' + sellPiont[upCellnmu].power + '">' + sellPiont[upCellnmu].cellNum +

'</span>');

$(".gameFrameUl").eq(leftRowNum).find(".gameFrameCell").eq(leftLineNum).addClass("active").html(upCell);

$(".gameFrameUl").eq(leftRowNum).find(".gameFrameCell").eq(lineSubscript).addClass("active").html("");

/*释放空格*/

/*delete cellObject[sellPiont[cellArray[i]]];*/

cellArrayActive.push(cellArrayActive[i]);

cellObject[cellArrayActive[i]] = {}; //

cellObject[cellArrayActive[i]].row = leftRowNum; //

cellObject[cellArrayActive[i]].line = lineSubscript; //

 

delete sellPiont[cellArrayActive[i]];

return false;

} else {

leftLineNum = leftLineNum + 1;

upCellnmu = leftRowNum + "" + leftLineNum;

if (upCellnmu != cellArrayActive[i]) {

/*方向端没有数据的时候开始移动*/

/*console.log(upCellnmu);

console.log(cellArrayActive[i]);*/

 

/*方向端没有数据的时候开始移动*/

sellPiont[upCellnmu] = {};

sellPiont[upCellnmu].cellNum = sellPiont[cellArrayActive[i]].cellNum;

sellPiont[upCellnmu].power = sellPiont[cellArrayActive[i]].power;

 

cellObject[cellArrayActive[i]] = {}; //

cellObject[cellArrayActive[i]].row = leftRowNum; //

cellObject[cellArrayActive[i]].line = lineSubscript; //

/*页面上删除展示效果*/

$(".gameFrameUl").eq(leftRowNum).find(".gameFrameCell").eq(lineSubscript).addClass("active").html("");

var upCell = $('<span class="color' + sellPiont[cellArrayActive[i]].power + '">' + sellPiont[cellArrayActive[

i]].cellNum + '</span>');

$(".gameFrameUl").eq(leftRowNum).find(".gameFrameCell").eq(leftLineNum).addClass("active").html(upCell);

delete sellPiont[cellArrayActive[i]];

delete cellObject[upCellnmu];

return false;

}

}

} else {

if (leftLineNum <= 0) {

/*console.log("空空如也");*/

/*方向端没有数据的时候开始移动*/

sellPiont[upCellnmu] = {};

sellPiont[upCellnmu].cellNum = sellPiont[cellArrayActive[i]].cellNum;

sellPiont[upCellnmu].power = sellPiont[cellArrayActive[i]].power;

 

cellObject[cellArrayActive[i]] = {}; //

cellObject[cellArrayActive[i]].row = leftRowNum; //

cellObject[cellArrayActive[i]].line = lineSubscript; //

/*页面上删除展示效果*/

$(".gameFrameUl").eq(leftRowNum).find(".gameFrameCell").eq(lineSubscript).addClass("active").html("");

var upCell = $('<span class="color' + sellPiont[cellArrayActive[i]].power + '">' + sellPiont[cellArrayActive[

i]].cellNum + '</span>');

$(".gameFrameUl").eq(leftRowNum).find(".gameFrameCell").eq(leftLineNum).addClass("active").html(upCell);

delete sellPiont[cellArrayActive[i]];

delete cellObject[upCellnmu];

return false;

} else {

createNewRow(leftLineNum - 1)

}

 

 

}

} else {

return false;

}

}

/*方向端处理完毕之后,重新随机添加一个数据*/

randomRendering();

})

 

/*右键事件*/

$(".rightBtn").bind("click", function() {

if (!isStartGame) {

alert("你还没有开始游戏。")

return false;

}

/*获取所有已存在的位置*/

var cellArrayActive = Object.keys(sellPiont);

/*对已有位置数据在对应方向上的比较 包括判断方向上是否存在其他块数据 是否能够相加,暴扣方向上最顶端处理之后中间是否留有空余位置用于二次移动但不靠口练习相加,

 * 如果存在 2 2 4 ,前面两个2相加得4 这时两个4之间有一个空格,所以不能做相加处理,只能把后者4往方向端移动一步*/

cellArrayActive.sort(function(a, b) {

return b - a;

})

var cellArrayLen = cellArrayActive.length;

for (var i = 0; i < cellArrayLen; i++) {

var lineSubscript = cellArrayActive[i] % 10; //获取所在的列数,便于比较

if (lineSubscript < 3) {

var rightRowNum = Math.floor(cellArrayActive[i] / 10);

var rightLineNum = lineSubscript + 1;

createNewRow(rightLineNum);

}

}

 

function createNewRow(rightLineNum) {

 

if (rightLineNum <= 3) {

var upCellnmu = rightRowNum + "" + rightLineNum; //获取方向端前列的一个方块的坐标,用于判断是否有值 sellPiont[upCellnmu]==true 有值

/*console.log(upCellnmu);*/

if (sellPiont[upCellnmu]) {

 

/*邻近的方向端块有值*/

if (sellPiont[upCellnmu].cellNum == sellPiont[cellArrayActive[i]].cellNum) {

/*如果方向位置有有数据且数据相同,则可以相加处理*/

sellPiont[upCellnmu].cellNum = sellPiont[cellArrayActive[i]].cellNum * 2;

sellPiont[upCellnmu].power = sellPiont[cellArrayActive[i]].power + 1;

scoreNum = scoreNum + 1;

score(scoreNum);

/*sellPiont[upCellnmu].power+=1;

console.log(sellPiont[cellArray[i]].power);*/

var upCell = $('<span class="color' + sellPiont[upCellnmu].power + '">' + sellPiont[upCellnmu].cellNum +

'</span>');

$(".gameFrameUl").eq(rightRowNum).find(".gameFrameCell").eq(rightLineNum).addClass("active").html(upCell);

$(".gameFrameUl").eq(rightRowNum).find(".gameFrameCell").eq(lineSubscript).addClass("active").html("");

/*释放空格*/

/*delete cellObject[sellPiont[cellArray[i]]];*/

cellArrayActive.push(cellArrayActive[i]);

cellObject[cellArrayActive[i]] = {}; //

cellObject[cellArrayActive[i]].row = rightRowNum; //

cellObject[cellArrayActive[i]].line = lineSubscript; //

 

delete sellPiont[cellArrayActive[i]];

return false;

} else {

rightLineNum = rightLineNum - 1;

upCellnmu = rightRowNum + "" + rightLineNum;

if (upCellnmu != cellArrayActive[i]) {

/*方向端没有数据的时候开始移动*/

/*console.log(upCellnmu);

console.log(cellArrayActive[i]);*/

 

/*方向端没有数据的时候开始移动*/

sellPiont[upCellnmu] = {};

sellPiont[upCellnmu].cellNum = sellPiont[cellArrayActive[i]].cellNum;

sellPiont[upCellnmu].power = sellPiont[cellArrayActive[i]].power;

 

cellObject[cellArrayActive[i]] = {}; //

cellObject[cellArrayActive[i]].row = rightRowNum; //

cellObject[cellArrayActive[i]].line = lineSubscript; //

/*页面上删除展示效果*/

$(".gameFrameUl").eq(rightRowNum).find(".gameFrameCell").eq(lineSubscript).addClass("active").html("");

var upCell = $('<span class="color' + sellPiont[cellArrayActive[i]].power + '">' + sellPiont[cellArrayActive[

i]].cellNum + '</span>');

$(".gameFrameUl").eq(rightRowNum).find(".gameFrameCell").eq(rightLineNum).addClass("active").html(upCell);

delete sellPiont[cellArrayActive[i]];

delete cellObject[upCellnmu];

return false;

}

}

} else {

if (rightLineNum >= 3) {

/*console.log("空空如也");*/

/*方向端没有数据的时候开始移动*/

sellPiont[upCellnmu] = {};

sellPiont[upCellnmu].cellNum = sellPiont[cellArrayActive[i]].cellNum;

sellPiont[upCellnmu].power = sellPiont[cellArrayActive[i]].power;

 

cellObject[cellArrayActive[i]] = {}; //

cellObject[cellArrayActive[i]].row = rightRowNum; //

cellObject[cellArrayActive[i]].line = lineSubscript; //

/*页面上删除展示效果*/

$(".gameFrameUl").eq(rightRowNum).find(".gameFrameCell").eq(lineSubscript).addClass("active").html("");

var upCell = $('<span class="color' + sellPiont[cellArrayActive[i]].power + '">' + sellPiont[cellArrayActive[

i]].cellNum + '</span>');

$(".gameFrameUl").eq(rightRowNum).find(".gameFrameCell").eq(rightLineNum).addClass("active").html(upCell);

delete sellPiont[cellArrayActive[i]];

delete cellObject[upCellnmu];

return false;

} else {

createNewRow(rightLineNum + 1)

}

 

 

}

} else {

return false;

}

}

/*方向端处理完毕之后,重新随机添加一个数据*/

randomRendering();

})

 

 

/*修改分数*/

function score(scoreNum) {

$(".score").html(scoreNum);

}

 

})

这期项目中所用的jqueryv1.10.2版本的,小伙伴们自己下载就好。

 


77
南京校区:南京市建邺区新城科技园广聚路33号安科大厦4楼
18724002960
南通校区:南通市崇川区人民中路23号新亚大厦3楼
13626271253
上海校区:筹建中...
敬请期待
全国咨询电话
400-836-0509
周一至周日   08:30-21:30
关注免费学习
苏ICP备15009282号     科迅教育版权所有     Copyright 2008 -
领取学习视频资料
限前100名
您好,您想咨询哪门课程呢?