<div>
<div class="scoringArea">您现在得分 <span class="score">0</span> 分 </div>
<div class="gameFrame">
<div class="gameFrameRow">
<ul class="gameFrameUl">
<li class="gameFrameCell ">
</li>
<li class="gameFrameCell">
</li>
<li class="gameFrameCell">
</li>
<li class="gameFrameCell">
</li>
</ul>
</div>
<div class="gameFrameRow">
<ul class="gameFrameUl">
<li class="gameFrameCell">
</li>
<li class="gameFrameCell">
</li>
<li class="gameFrameCell">
</li>
<li class="gameFrameCell">
</li>
</ul>
</div>
<div class="gameFrameRow">
<ul class="gameFrameUl">
<li class="gameFrameCell">
</li>
<li class="gameFrameCell">
</li>
<li class="gameFrameCell">
</li>
<li class="gameFrameCell">
</li>
</ul>
</div>
<div class="gameFrameRow">
<ul class="gameFrameUl">
<li class="gameFrameCell">
</li>
<li class="gameFrameCell">
</li>
<li class="gameFrameCell">
</li>
<li class="gameFrameCell">
</li>
</ul>
</div>
</div>
<div class="operateKey">
<button class="gameControlButton gameStart" >开始</button>
<div class="directionsKey">
<div>
<span class="upBtn">↑</span>
</div>
<div>
<span class="leftBtn">←</span>
<span class="downBtn">↓</span>
<span class="rightBtn">→</span>
</div>
</div>
</div>
</div>
* {
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;
}
<script src="js/jquery.min.js"></script>
$(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;
cellObject[cellKey] = {};
cellObject[cellKey].row = i;
cellObject[cellKey].line = j;
}
}
}
function randomRendering() {
var num = Math.floor(Math.random() * 2),
cellNum = 2;
var createCell = "",
power = 1;
if (num == 0) {
createCell = $('<span class="color1" power="1">2</span>');
power = 1;
cellNum = 2;
} else {
createCell = $('<span class="color2" power="2">4</span>');
cellNum = 4;
power = 2;
}
cellArray = Object.keys(cellObject);
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);
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;
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);
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("");
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]) {
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) {
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);
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;
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);
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("");
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]) {
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) {
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);
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;
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);
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("");
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]) {
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) {
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);
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;
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);
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("");
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]) {
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) {
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);
}
})
|