js小游戏2048

来源：互联网发布：会展中心网络编辑：程序博客网时间：2024/05/17 07:02

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8" />
<title></title>
<style>
* {
margin: 0;
padding: 0;
}

body {
background: url(img/amam.png);
}

article {
margin: 20px auto 0;
border: 5px solid #bbada0;
border-collapse: collapse;
width: 400px;
height: 400px;
background: #cdc1b4;
position: relative;
}
nav{float: left;width: 150px;}
nav h3{text-align: center;font-size: 52px;color:#776e65;font-weight: 900;}
nav h4{font-size:14px;color:#8b6e65;font-weight: 100;}
.mb {
width: 410px;
height: 410px;
border: 0;
background: rgba(238, 228, 218, 0.35);
position: absolute;
top: -5px;
left: -5px;
margin: 0;
display: none;
}

.mb h1 {
font-size: 40px;
color: rgb(119, 110, 101);
font-size: 60px;
text-align: center;
margin-top: 160px;
}

.mb button {
bottom: 50px;
left: 0;
right: 0;
margin: 0 auto;
}

header {
margin: 40px auto 0;
width: 410px;
height: 110px;
position: relative;
}

aside {
width: 100%;
height: 100px;
float: left;
}

div {
width: 100px;
height: 100px;
float: left;
border: 5px solid #bbada0;
line-height: 90px;
text-align: center;
box-sizing: border-box;
font-size: 36px;
font-weight: 900;
color: #776e65;
font: "Clear Sans", "Helvetica Neue", Arial, sans-serif;
transition: all,0.3s;
}

button {
width: 110px;
height: 40px;
background: #8f7a66;
color: #fff;
font: 18px/40px Arial;
border: 0;
border-radius: 4px;
position: absolute;
bottom: 0;
right: 5px;
}

p {
height: 60px;
float: right;
padding: 0 25px;
text-align: center;
background: #bbada0;
border-radius: 4px;
margin: 5px;
}

span {
display: block;
color: #fff;
font-size: 24px;
}

p span:first-child {
font-size: 14px;
margin-top: 10px;
color: #eee4da;
}

.td2 {
background: #eee4da;
}

.td4 {
background: #ede0c8;
}

.td8 {
background: #f2b179;
color: #f9f6f2;
}

.td16 {
background: #f59563;
color: #f9f6f2;
}

.td32 {
color: #f9f6f2;
background: #f67c5f;
}

.td64 {
background: #f65e3b;
color: #f9f6f2;
}

.td128 {
color: #f9f6f2;
background: #edcf72;
}

.td256 {
color: #f9f6f2;
background: #edcc61;
}

.td512 {
color: #f9f6f2;
background: #edc850;
}

.td1024 {
color: #f9f6f2;
background: #edc53f;
}

.td2048 {
color: #f9f6f2;
background: #edc22e;
}
</style>
</head>

<body>
<header>
<nav>
<h3>2048</h3>
<h4>玩家可以选择上下左右(w,s,a,d)四个方向</h4>
</nav>
<p><span>分数：</span><span id="zf">0</span></p>
<p><span>最大数：</span><span id="zd">0</span></p>
<button>new game</button>
</header>
<article>
<aside>
<div></div>
<div></div>
<div></div>
<div></div>
</aside>
<aside>
<div></div>
<div></div>
<div></div>
<div></div>
</aside>
<aside>
<div></div>
<div></div>
<div></div>
<div></div>
</aside>
<aside>
<div></div>
<div></div>
<div></div>
<div></div>
</aside>
<article class="mb" id="mb1">
<h1>game over!</h1>
<button>重新开始</button>
</article>
<article class="mb" id="mb2">
<h1>恭喜获胜!</h1>
<button>重新开始</button>
</article>
</article>

</body>
<script>
var tr = document.getElementsByTagName("aside");
var btn = document.getElementsByTagName("button");
window.onload = bl;
var td = [];
var zf = document.getElementById("zf");
var zd = document.getElementById("zd");
var over = document.getElementById("mb1");
var gx=document.getElementById("mb2")
function bl() {
// console.log("bl");

for(var i = 0; i < tr.length; i++) {
td[i] = tr[i].children;
}

sjsc(2);
//随机生成2,4.传入num为生成个数。
function sjsc(num) {
// console.log("sjsc")
var kong = [];
var kindex = 0;
//随机获取2或4。
for(var i = 0; i < num; i++) {
//获取空的单元格。
for(var j = 0; j < td.length; j++) {
for(var k = 0; k < td[j].length; k++) {
if(td[j][k].innerHTML == "") {
kong[kindex] = td[j][k];
kindex++;
}
}
}
if(kindex == 0) {

over.style.display = "block";
return;
}

var index = parseInt(Math.random() * kong.length)
var temp = parseInt(Math.random() * 5);
if(temp != 4) {
kong[index].innerHTML = 2;
} else {
kong[index].innerHTML = 4;
}
}
}

window.onkeydown = function(event) {
// console.log("onkeyup");
var e = event || window.event;
keycode = e.keyCode || e.which;
console.log(keycode);

if(keycode == 37 || keycode == 65) {

for(var i = 0; i < td.length; i++) {
var yx = [];
for(var j = 0; j < td[i].length; j++) {
if(td[i][j].innerHTML != "") {
yx.push(td[i][j].innerHTML);

}
td[i][j].innerHTML = "";
}

// console.log(yx.length);
for(var m = 0; m < yx.length; m++) {
if(yx[m] == yx[m + 1]) {
// yx[m] = yx[m] * 2;
// yx.length--;
yx.splice(m, 2, yx[m] * 2)
// yx.length--;
}
}
for(var k = 0; k < yx.length; k++) {
// console.log(yx[k]);
td[i][k].innerHTML = yx[k];

}
}
} else if(keycode == 39 || keycode == 68) {

for(var i = 0; i < td.length; i++) {
var yx = [];
for(var j = 0; j < td[i].length; j++) {
if(td[i][j].innerHTML != "") {
yx.push(td[i][j].innerHTML);
}
td[i][j].innerHTML = "";
}
// console.log(yx.length);
for(var m = yx.length - 1; m >= 0; m--) {
if(yx[m] == yx[m - 1]) {
yx.splice(m, 1)
yx[m - 1] = yx[m - 1] * 2;
// yx.length--;
}
}
for(var k = 0; k < yx.length; k++) {
// console.log(yx[k]);
td[i][td[i].length - 1 - k].innerHTML = yx[yx.length - 1 - k];
// td[i][k].innerHTML = yx[k];

}
}
} else if(keycode == 38 || keycode == 87) {
var yx = [];
for(var i = 0; i < td.length; i++) {
for(var j = 0; j < td[i].length; j++) {
if(td[i][j].innerHTML != "") {
yx.push(td[i][j]);
// console.log(td[i][j].innerHTML);
yx[yx.length - 1].nr = td[i][j].innerHTML;
yx[yx.length - 1].y = j;
}
td[i][j].innerHTML = "";
}

}
// console.log(yx);
for(var n = 0; n < 4; n++) {
var yxl = []
for(var m = 0; m < yx.length; m++) {
if(yx[m].y == n) {
// console.log(yx[m].nr+","+n+"lie");
yxl.push(yx[m].nr);
// console.log(yxl[yxl.length-1]+","+n+"lie")

// yx.length--;
}
}

for(var m = 0; m < yxl.length; m++) {
if(yxl[m] == yxl[m + 1]) {
// yx[m] = yx[m] * 2;
// var a=parseInt(yxl)yx.length--;
yxl.splice(m, 2, yxl[m] * 2)
// yx.length--;
}
}
// console.log(yxl);
// 添加
for(var k = 0; k < yxl.length; k++) {
// console.log(yxl[k]);
td[k][n].innerHTML = yxl[k];

}
}
} else if(keycode == 40 || keycode == 83) {
var yx = [];
for(var i = 0; i < td.length; i++) {
for(var j = 0; j < td[i].length; j++) {
if(td[i][j].innerHTML != "") {
yx.push(td[i][j]);
// console.log(td[i][j].innerHTML);
yx[yx.length - 1].nr = td[i][j].innerHTML;
yx[yx.length - 1].y = j;
}
td[i][j].innerHTML = "";
}

}
// console.log(yx);
for(var n = 0; n < 4; n++) {
var yxl = []
for(var m = 0; m < yx.length; m++) {
if(yx[m].y == n) {
// console.log(yx[m].nr+","+n+"lie");
yxl.push(yx[m].nr);
// console.log(yxl[yxl.length-1]+","+n+"lie")

// yx.length--;
}
}

for(var m = yxl.length; m >= 0; m--) {
if(yxl[m] == yxl[m - 1]) {
// yx[m] = yx[m] * 2;
// var a=parseInt(yxl)yx.length--;
yxl.splice(m, 1)
yxl[m - 1] = yxl[m - 1] * 2;
// yx.length--;
}
}
// console.log(yxl);
// 添加
for(var k = 0; k < yxl.length; k++) {
// console.log(yxl[k]);
td[td.length - 1 - k][n].innerHTML = yxl[yxl.length - 1 - k];

}
}
} else {
return;
}
sjsc(1);
clnm();
}
clnm();
//改变背景色
function clnm() {
var maxn = 0;
var max = 0;
for(var j = 0; j < td.length; j++) {
for(var k = 0; k < td[j].length; k++) {
td[j][k].className = "td" + td[j][k].innerHTML;
if(td[j][k].innerHTML != "") {
maxn = maxn + parseInt(td[j][k].innerHTML);
max = max > parseInt(td[j][k].innerHTML) ? max : parseInt(td[j][k].innerHTML);
}

}
}
zf.innerHTML = maxn;
zd.innerHTML = max;
console.log(max);
if(max==2048){
gx.style.display="block";
console.log("gx")
}
}
for(var i = 0; i < btn.length; i++) {
btn[i].onclick = function() {
for(var i = 0; i < td.length; i++) {
for(var j = 0; j < td.length; j++) {
td[i][j].innerHTML = "";
}
}
bl();
over.style.display = "none";
gx.style.display="none";
}
}
}
</script>

</html>

阅读全文

0 0