<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
background-color: black;
color: white;
}
</style>
<script>
let numArray = [], line;
let score, gameOver;
let infoSpan, numInput;
var c,ctx;
function init(a) {
score = 0;
line = a;
numArray.length = Math.pow(line, 2);
gameOver = false;
reset();
}
function newMap() {
let k = parseInt(numInput.value);
if (!isNaN(k)) {
if (k < 2) {
alert("玩什么呢?");
} else {
init(k);
}
} else {
alert("错误!")
}
}
function reset() {
for (let i = 0; i < numArray.length; i++) {
numArray[i] = undefined;
}
gameOver = false;
scoreRest();
putNum();
show();
}
function scoreCount(a) {
score += a;
infoSpan.innerHTML = score;
}
function scoreRest() {
score = 0;
infoSpan.innerHTML = 0;
}
window.onload = function () {
numInput = document.getElementById("lineInput");
infoSpan = document.getElementById("info").querySelector("span");
c=document.getElementById('c');
ctx=c.getContext('2d');
ctx.lineWidth=3;
ctx.font = '25px "微软雅黑"';
init(4);
}
window.onkeydown = function (e) {
if (gameOver) {
alert("失败了!请重来!");
return;
}
switch (e.keyCode) {
case 37:
toLeftKey();
putNum();
show();
break;
case 38:
toUPKey();
putNum();
show();
break;
case 39:
toRightKey();
putNum();
show();
break;
case 40:
toBottomKey();
putNum();
show();
break;
}
}
function show() {
showFormat();
}
function getColorCube(k) {
let c;
switch (k){
case 2:
c= '#00FFFF'
break;
case 4:
c= '#ff0000'
break;
case 6:
c= '#5936ff'
break;
case 8:
c= '#aa00ff'
break;
case 16:
c= '#ff00cc'
break;
case 32:
c= '#004bff'
break;
case 64:
c= '#e6ff00'
break;
case 128:
c= '#5e00ff'
break;
case 256:
c= '#a2ff00'
break;
case 512:
c= '#c800ff'
break;
case 1024:
c= '#ff7300'
break;
case 2048:
c= '#00ffb2'
break;
}
return c;
}
function showFormat() {
ctx.clearRect(0,0,c.width,c.height);
let d;
for (let i = 0; i < line; i++) {
for (let j = 0; j < line; j++) {
d = numArray[i * line + j];
if (d === undefined) {
ctx.fillStyle='#b1e1e855';
ctx.strokeStyle='#b1e1e899';
ctx.beginPath();
ctx.rect(j*70,i*70,70,70);
ctx.stroke();
ctx.fill();
ctx.closePath();
} else {
let k=getColorCube(d);
ctx.fillStyle=k+'55';
ctx.strokeStyle=k+'99';
ctx.beginPath();
ctx.rect(j*70,i*70,70,70);
ctx.stroke();
ctx.fill();
ctx.fillStyle=k;
switch (true){
case d<10:
ctx.fillText(d,j*70+27,i*70+45)
break;
case d<100:
ctx.fillText(d,j*70+20,i*70+45)
break;
case d<1000:
ctx.fillText(d,j*70+12,i*70+45)
break;
default:
ctx.fillText(d,j*70+5,i*70+45)
break;
}
ctx.closePath();
}
}
}
/*let c = "", d;
for (let i = 0; i < line; i++) {
for (let j = 0; j < line; j++) {
d = numArray[i * line + j];
if (d === undefined) {
c = c + "<span></span>" + "";
} else {
c = c + `<span class="${getColorCube(d)}">${d}</span>`
}
}
c += "<br/>";
}
document.getElementById("cube").innerHTML = c;*/
}
function putNum() {
let k = [];
for (let i = 0; i < numArray.length; i++) {
if (numArray[i] === undefined) {
k.push(i);
}
}
let t = rand(k);
if (t) {
if (t.length > 1) {
numArray[t[0]] = 2;
numArray[t[1]] = 2;
} else {
numArray[t[0]] = 2;
}
if (k.length <= 2) {
if (!checkCantMove()) {
gameOver = true;
//为什么是显示后才显示效果,是因为按键后的运算大有延迟,这个先执行。
alert("你失败了!");
}
}
} else {
console.log("I can't put anything!");
}
}
function checkCantMove() {
for (let i = 0; i < numArray.length; i++) {
if (numArray[i] === undefined) {
return true;
}
if (i % line - 1 > -1) {
if (numArray[i] === numArray[i - 1]) {
return true;
}
}
if (i % line + 1 < line - 1) {
if (numArray[i] === numArray[i + 1]) {
return true;
}
}
if (i % line - line > -1) {
if (numArray[i] === numArray[i - line]) {
return true;
}
}
if (i % line + line < numArray.length) {
if (numArray[i] === numArray[i + line]) {
return true;
}
}
}
return false;
}
function toUPKey() {
let c = -1;
for (let i = 0; i < line; i++) {
for (let j = 1; j < line; j++) {
if (numArray[i + j * line] !== undefined) {
for (let k = 0; k < j; k++) {
if (numArray[i + (j - k - 1) * line] === undefined) {
c = i + (j - k - 1) * line;
} else {
if (numArray[i + (j - k - 1) * line] === numArray[i + j * line]) {
numArray[i + (j - k - 1) * line] += numArray[i + j * line];
numArray[i + j * line] = undefined;
scoreCount(numArray[i + (j - k - 1) * line]);
c = -1;
break;
} else {
break;
}
}
}
if (c !== -1) {
numArray[c] = numArray[i + j * line];
numArray[i + j * line] = undefined;
c = -1;
}
}
}
}
}
function toBottomKey() {
let c = -1;
for (let i = 0; i < line; i++) {
for (let j = line - 2; j > -1; j--) {
if (numArray[i + j * line] !== undefined) {
for (let k = 1; k < line - j; k++) {
if (numArray[i + (j + k) * line] === undefined) {
c = i + (j + k) * line;
} else {
if (numArray[i + (j + k) * line] === numArray[i + j * line]) {
numArray[i + (j + k) * line] += numArray[i + j * line];
numArray[i + j * line] = undefined;
scoreCount(numArray[i + (j + k) * line]);
c = -1;
break;
} else {
break;
}
}
}
if (c !== -1) {
numArray[c] = numArray[i + j * line];
numArray[i + j * line] = undefined;
c = -1;
}
}
}
}
}
function toLeftKey() {
let c = -1;
for (let i = 0; i < line; i++) {
for (let j = 1; j < line; j++) {
if (numArray[i * line + j] !== undefined) {
for (let k = 0; k < j; k++) {
if (numArray[i * line + j - k - 1] === undefined) {
c = i * line + j - k - 1;
} else {
if (numArray[i * line + j - k - 1] === numArray[i * line + j]) {
numArray[i * line + j - k - 1] += numArray[i * line + j];
numArray[i * line + j] = undefined;
scoreCount(numArray[i * line + j - k - 1]);
c = -1;
break;
} else {
break;
}
}
}
if (c !== -1) {
numArray[c] = numArray[i * line + j];
numArray[i * line + j] = undefined;
c = -1;
}
}
}
}
}
function toRightKey() {
let c = -1;
for (let i = 0; i < line; i++) {
for (let j = line - 2; j > -1; j--) {
if (numArray[i * line + j] !== undefined) {
for (let k = 1; k < line - j; k++) {
if (numArray[i * line + j + k] === undefined) {
c = i * line + j + k;
} else {
if (numArray[i * line + j + k] === numArray[i * line + j]) {
numArray[i * line + j + k] += numArray[i * line + j];
numArray[i * line + j] = undefined;
c = -1;
scoreCount(numArray[i * line + j + k]);
break;
} else {
break;
}
}
}
if (c !== -1) {
numArray[c] = numArray[i * line + j];
numArray[i * line + j] = undefined;
c = -1;
}
}
}
}
}
function rand(arr) {
if (arr.length < 1) {
return false;
}
if (arr.length < 2) {
let arr2 = [...arr];
let c = myRandom(0, arr2.length - 1);
let a = arr2[c];
return [a];
} else {
let arr2 = [...arr];
let c = myRandom(0, arr2.length - 1);
let a = arr2[c];
arr2.splice(c, 1);
c = myRandom(0, arr2.length - 1);
let b = arr2[c];
return [a, b];
}
}
function myRandom(min, max) {
return min + Math.floor((max - min + 1) * Math.random());
}
</script>
</head>
<body>
<div id="info">
<span>0</span>
</div>
<div >
<canvas id="c" width="900" height="900" style="border: 1px solid white;"></canvas>
</div>
<button onclick="reset()">再来一局</button>
<button onclick="newMap()">新地图</button>
<label>
<input id="lineInput" type="number" placeholder="请输入行数"/>
</label>
</body>
</html>