<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=400,maximum-scale=3.0,minimum-scale=0.5,user-scalable=no">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
html, body {
width: 100%;
height: 100%;
background: silver;
overflow: hidden;
}
.map {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
width: 400px;
height: 400px;
background: #fff5e7;
}
.hang {
height: 100px;
}
.hang > div {
width: 100px;
height: 100px;
border: 1px solid #000;
float: left;
box-sizing: border-box;
text-align: center;
font-size: 30px;
line-height: 100px;
color: #fff;
}
.color2 {
background: orange;
}
.color4 {
background: #ffef1b;
}
.color8 {
background: #f61bff;
}
.color16 {
background: #ff1f15;
}
.color32 {
background: #22bbff;
}
.color64{
background: #22bbff;
}
.color128{
background: #ff020c;
}
.color256{
background: #ffe921;
}
.color512{
background: #34ff24;
}
</style>
</head>
<body>
<div class="map">
</div>
<script src="js/jquery-1.9.1.js"></script>
<script>
/*
* 2048分析
* 画地图
* 构建地图数组
* */
//dom元素生成
//使用语法是jquery extend继承 合并对象
$.extend({
h_td: 4,
v_td: 4,
mapArray: [],
createDOM: function () {
for (var i = 0; i < this.h_td; i++) {
var array = [];
var div = $("<div></div>");
div.addClass("hang");
for (var k = 0; k < this.v_td; k++) {
var u_map = $("<div></div>");
u_map.addClass("user");
array.push(u_map);
div.append(u_map);
}
$(".map").append(div);
this.mapArray.push(array);
}
},
number: [2],
randomNum: function (arr) {
//直接生成2,4
return Math.floor(Math.random() * arr.length);
},
changeNumber: function (dom) {
//检测当前的位置有没有数字
if (parseInt(dom.html())) {
return false;
}
else {
return true;
}
},
saveNullText: [],
showNum: function () {
//随机一个值
var that = this;
that.saveNullText = [];
that.mapArray.map(function (val, index) {
var nullarr = [];
val.map(function (value, vindex) {
if (that.changeNumber(value)) {
nullarr.push(vindex);
}
});
if (nullarr.length) {
that.saveNullText.push([
index,
nullarr
]);
}
});
//滑动之后检测还有没有空余的位置生成数字
var alen = that.saveNullText.length;
var len = that.saveNullText[0][1].length;
console.log(alen, len, that.saveNullText[0][1]);
if (alen == 0 && len == 0) {
alert("结束");
return;
}
//随机行
var hindex, vindex, arrindex;
do {
arrindex = that.randomNum(that.saveNullText);
hindex = that.saveNullText[that.randomNum(that.saveNullText)][0];
vindex = that.saveNullText[arrindex][1][that.randomNum(that.saveNullText[arrindex][1])];
if (!parseInt(that.mapArray[hindex][vindex].html())) {
break;
}
} while (true);
var text = that.number[that.randomNum(that.number)];
that.mapArray[hindex][vindex].html(text);
that.mapArray[hindex][vindex].addClass("color" + text);
that.saveNullText[arrindex][1].splice(arrindex, 1);
},
startX: 0,
startY: 0,
endX: 0,
endY: 0,
addEventTouch: function () {
var that = this;
$(".map").on("touchstart touchmove touchend", function (e) {
if (e.type == "touchstart") {
that.startX = e.originalEvent.changedTouches[0].pageX;
that.startY = e.originalEvent.changedTouches[0].pageY;
}
else if (e.type == "touchmove") {
that.endX = e.originalEvent.changedTouches[0].pageX;
that.endY = e.originalEvent.changedTouches[0].pageY;
}
else {
var x = that.endX - that.startX;
var y = that.endY - that.startY;
that.silderText(that.returnWay(x, y));
}
});
},
silderText: function (res) {
var that = this;
$(".user").attr("data-add", "0");
switch (res) {
case "left":
for (var i = that.h_td - 1; i >= 0; i--) {
for (var k = that.v_td - 1; k >= 0; k--) {
var num = parseInt(that.mapArray[i][k].html());
if (num && k - 1 >= 0) {
var before = parseInt(that.mapArray[i][k - 1].html());
if (before) {
if (before == num && that.mapArray[i][k].attr("data-add") == "0") {
//考虑叠加
that.mapArray[i][k].removeClass().html("");
that.mapArray[i][k - 1].removeClass().html(num + before).addClass("user color" + (num + before));
that.mapArray[i][k - 1].attr("data-add", "1");
i++;
break;
}
else {
//前面有不一样的 全部往前移动
if (that.mapArray[i][k - 2] && !parseInt(that.mapArray[i][k - 2].html())) {
that.mapArray[i][k - 2].html(before).removeClass().addClass("user color" + before);
that.mapArray[i][k - 1].html(num).removeClass().addClass("user color" + num);
that.mapArray[i][k].removeClass().html("");
i++;
break;
}
}
}
else {
that.mapArray[i][k].removeClass().html("");
that.mapArray[i][k - 1].removeClass().html(num).addClass("user color" + num);
i++;
break;
}
}
}
}
break;
case "right":
for (var i = 0; i < that.h_td; i++) {
for (var k = 0; k < that.v_td; k++) {
var num = parseInt(that.mapArray[i][k].html());
if (num && k + 1 <= 3) {
var before = parseInt(that.mapArray[i][k + 1].html());
if (before) {
if (before == num && that.mapArray[i][k].attr("data-add") == "0") {
//考虑叠加
that.mapArray[i][k].removeClass().html("");
that.mapArray[i][k + 1].removeClass().html(num + before).addClass("user color" + (num + before));
that.mapArray[i][k + 1].attr("data-add", "1");
i--;
break;
}
else {
//前面有不一样的 全部往前移动
if (k + 2 <= 3 && that.mapArray[i][k + 2] && !parseInt(that.mapArray[i][k + 2].html())) {
that.mapArray[i][k + 2].html(before).removeClass().addClass("user color" + before);
that.mapArray[i][k + 1].html(num).removeClass().addClass("user color" + num);
that.mapArray[i][k].removeClass().html("");
i--;
break;
}
}
}
else {
that.mapArray[i][k].removeClass().html("");
that.mapArray[i][k + 1].removeClass().html(num).addClass("user color" + num);
i--;
break;
}
}
}
}
break;
case "down":
for (var i = 0; i < that.v_td; i++) {
for (var k = 0; k < that.h_td; k++) {
var num = parseInt(that.mapArray[i][k].html());
if (num && i + 1 <= 3) {
var before = parseInt(that.mapArray[i+1][k].html());
if (before) {
if (before == num && that.mapArray[i][k].attr("data-add") == "0") {
//考虑叠加
that.mapArray[i][k].removeClass().html("");
that.mapArray[i + 1][k].removeClass().html(num + before).addClass("user color" + (num + before));
that.mapArray[i + 1][k].attr("data-add", "1");
k--;
break;
}
else {
//前面有不一样的 全部往前移动
if (i + 2 <= 3 && that.mapArray[i + 2][k] && !parseInt(that.mapArray[i + 2][k].html())) {
that.mapArray[i + 2][k].html(before).removeClass().addClass("user color" + before);
that.mapArray[i + 1][k].html(num).removeClass().addClass("user color" + num);
that.mapArray[i][k].removeClass().html("");
k--;
break;
}
}
}
else {
that.mapArray[i][k].removeClass().html("");
that.mapArray[i + 1][k].removeClass().html(num).addClass("user color" + num);
k--;
break;
}
}
}
}
break;
case "up":
for (var i = that.v_td - 1; i >= 0; i--) {
for (var k = that.h_td - 1; k >= 0; k--) {
var num = parseInt(that.mapArray[i][k].html());
if (num && i - 1 >= 0) {
var before = parseInt(that.mapArray[i-1][k].html());
if (before) {
if (before == num && that.mapArray[i][k].attr("data-add") == "0") {
//考虑叠加
that.mapArray[i][k].removeClass().html("");
that.mapArray[i-1][k].removeClass().html(num + before).addClass("user color" + (num + before));
that.mapArray[i-1][k].attr("data-add", "1");
k++;
break;
}
else {
//前面有不一样的 全部往前移动
if (that.mapArray[i-1][k] && !parseInt(that.mapArray[i-1][k].html())) {
that.mapArray[i-2][k].html(before).removeClass().addClass("user color" + before);
that.mapArray[i-1][k].html(num).removeClass().addClass("user color" + num);
that.mapArray[i][k].removeClass().html("");
k++;
break;
}
}
}
else {
that.mapArray[i][k].removeClass().html("");
that.mapArray[i-1][k].removeClass().html(num).addClass("user color" + num);
k++;
break;
}
}
}
}
break;
}
//重新生成数字
that.showNum();
},
returnWay: function (numx, numy) {
if (Math.abs(numx) > Math.abs(numy) && numx < 0) {
return "left";
}
else if (Math.abs(numx) > Math.abs(numy) && numx > 0) {
return "right";
}
else if (Math.abs(numy) > Math.abs(numx) && numy > 0) {
return "down";
}
else if (Math.abs(numy) > Math.abs(numx) && numy < 0) {
return "up";
}
}
});
$(function () {
//创建dom元素的方法
$.createDOM();
//随机生成数字方法
$.showNum();
//绑定触屏事件的方法
$.addEventTouch();
});
/*
* 存在问题
* 向上滑动时有时候会滑不上去有待调式
* 游戏结束跳出未能完成
* */
</script>
</body>
</html>
js 2048的实现
最新推荐文章于 2022-06-25 21:01:13 发布