<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="Jscript/jquery-1.11.1.min.js"></script>
<script src="Jscript/jquery.touchSwipe.min.js"></script>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
font: 12px/1.5 tahoma,arial,"Microsoft Yahei","5b8b4f53",sans-serif;
list-style: none;
text-decoration: none;
box-sizing: border-box;
}
.div_container {
height: 400px;
400px;
}
.item {
100px;
height: 100px;
float: left;
text-align: center;
line-height: 90px;
color: black;
font-size: 24px;
font-weight: bolder;
border: 5px solid white;
}
.div_bg {
position: absolute;
height: 400px;
400px;
top: 0px;
left: 0px;
}
button {
position: absolute;
}
</style>
</head>
<body>
<div class="div_bg"></div>
<div class="div_container" draggable="false">
</div>
<button onclick="moveUp()" style="left:500px;top:50px;">moveUp</button>
<button onclick="moveDown()" style="left:500px;top:150px;">moveDown</button>
<button onclick="moveLeft()" style="left:450px;top:100px;">moveLeft</button>
<button onclick="moveRight()" style="left:550px;top:100px;">moveRight</button>
</body>
</html>
<script type="text/javascript">
var a = [
[2, 0, 0, 0],
[0, 0, 0, 0],
[2, 0, 0, 0],
[2, 0, 0, 0]
];
var colors = {
0: "white",
2: "#CCC0B3", 4: "#EDE0C8", 8: "#F2B179", 16: "#F67C5F",
32: "#F67C5F", 64: "#F65E3B", 128: "#EDCF72", 256: "#EDCC61",
512: "#99CC00", 1024: "#CAAA23", 2048: "#FF2525", 4096: "#B848FF",
8192: "#68217A"
};
var add = [2, 2, 4];
Init();
function Init() {
var s = "";
var ss = getSpace();
var sss = ss[getRandom(ss.length)].split(",");
a[sss[0]][sss[1]] = add[getRandom(add.length)];
for (var i = 0; i < a.length; i++) {
for (var j = 0; j < a[i].length; j++) {
var num = a[i][j] == 0 ? "" : a[i][j];
s += "<div class='item' style='background-color:" + colors[a[i][j]] + "' draggable='false'>" + num + "</div>"
}
}
$(".div_container").html(s)
}
function getRandom(len) {
return Math.floor(Math.random() * len);
}
function getSpace() {
var s = [];
for (var i = 0; i < a.length; i++) {
for (var j = 0; j < a[i].length; j++) {
if (a[i][j] == 0) {
var item = i + "," + j;
s.push(item);
}
}
}
if (s.length == 0) {
alert("GG!");
a = [
[2, 0, 0, 0],
[0, 0, 0, 0],
[2, 0, 0, 0],
[2, 0, 0, 0]
];
Init();
}
return s;
}
function moveUp() {
for (var i = 0; i < a.length; i++) {
for (var t = 0; t < 3; t++) {
for (var j = 0; j < a[i].length - 1; j++) {
if (a[j][i] == 0) {
var item = a[j + 1][i];
a[j + 1][i] = 0;
a[j][i] = item;
}
}
}
for (var j = 0; j < a[i].length - 1; j++) {
if (a[j][i] == a[j + 1][i]) {
a[j][i] = a[j][i] * 2;
a[j + 1][i] = 0;
for (var p = j + 1; p + 1 < 3; p++) {
var item = a[p + 1][i];
a[p][i] = item;
a[p + 1][i] = 0;
}
}
}
}
Init();
}
function moveDown() {
for (var i = 0; i < a.length; i++) {
for (var t = 0; t < 3; t++) {
for (var j = 3; j > 0; j--) {
if (a[j][i] == 0) {
var item = a[j - 1][i];
a[j - 1][i] = 0;
a[j][i] = item;
}
}
}
for (var j = 3; j > 0; j--) {
if (a[j][i] == a[j - 1][i]) {
a[j][i] = a[j][i] * 2;
a[j - 1][i] = 0;
for (var p = j - 1; p - 1 >= 0; p--) {
var item = a[p - 1][i];
a[p][i] = item;
a[p - 1][i] = 0;
}
}
}
}
Init();
}
function moveLeft() {
for (var i = 0; i < a.length; i++) {
for (var t = 0; t < 3; t++) {
for (var j = 0; j < a[i].length - 1; j++) {
if (a[i][j] == 0) {
var item = a[i][j + 1];
a[i][j + 1] = 0;
a[i][j] = item;
}
}
}
for (var j = 0; j < a[i].length - 1; j++) {
if (a[i][j] == a[i][j + 1]) {
a[i][j] = a[i][j] * 2;
a[i][j + 1] = 0;
for (var p = j + 1; p + 1 < 3; p++) {
var item = a[i][p + 1];
a[i][p] = item;
a[i][p + 1] = 0;
}
}
}
}
Init();
}
function moveRight() {
for (var i = 0; i < a.length; i++) {
for (var t = 0; t < 3; t++) {
for (var j = 3; j > 0; j--) {
if (a[i][j] == 0) {
var item = a[i][j - 1];
a[i][j - 1] = 0;
a[i][j] = item;
}
}
}
for (var j = 3; j > 0; j--) {
if (a[i][j] == a[i][j - 1]) {
a[i][j] = a[i][j] * 2;
a[i][j - 1] = 0;
for (var p = j - 1; p - 1 > 0; p--) {
var item = a[i][p - 1];
a[i][p] = item;
a[i][p - 1] = 0;
}
}
}
}
Init();
}
$(".div_bg").swipe({
swipeUp: moveUp,
swipeDown: moveDown,
swipeLeft: moveLeft,
swipeRight: moveRight
})
</script>