2048未完成

<!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","\5b8b\4f53",sans-serif;
list-style: none;
text-decoration: none;
box-sizing: border-box;
}

.div_container {
height: 400px;
width: 400px;
}

.item {
width: 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;
width: 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);
}

}

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>

转载于:https://www.cnblogs.com/-maomao/p/5320493.html

猜你喜欢