.box {
margin: 0 auto;
padding: 50px;
}
#grid {
margin: 0 auto;
padding: 0;
background-color: burlywood;
width: fit-content;
height: fit-content;
border-collapse: collapse;
}
#grid tr td {
padding: 3px;
}
.block {
display: table-cell;
width: 100px;
height: 100px;
text-align: center;
vertical-align: middle;
font-size: 32px;
font-weight: bold;
background-color: bisque;
border: 0;
}
.level2 {
background-color: bisque;
color: burlywood;
}
.level4 {
background-color: coral;
color: chocolate;
}
.level8 {
background-color: lightgoldenrodyellow;
color: lightcyan;
}
.level16 {
background-color: lightpink;
color: lightsalmon;
}
.level32 {
background-color: greenyellow;
color: green;
}
.level64 {
background-color: hotpink;
color: indigo;
}
.level128 {
background-color: lawngreen;
color: lemonchiffon;
}
.level256 {
background-color: lightblue;
color: lightcoral;
}
.level512 {
background-color: lightslategrey;
color: mediumblue;
}
.level1024 {
background-color: purple;
color: red;
}
.level2048 {
background-color: red;
color: palegreen
}
<body ondragstart='return false' oncontextmenu='self.event.returnValue=false'>
<div class="box">
<table id='grid'>
table>
div>
body>
<script>
let row = col = 4;
let grid = null;
window.onload = function () {
startGame();
}
//游戏开始
let startGame = function () {
grid = init_grid();
grid.forEach(s => {
s.forEach(e => {
e.num = 0;
e.hasNum = false;
})
})
guidNum();
guidNum();
}
//初始化
let init_grid = function () {
//生成矩阵html --行标签 --列标签
let gridHtml = '';
for (let i = 0; i < row; i++) {
gridHtml += ''
for (let j = 0; j < col; j++) {
gridHtml += ''
}
//写入html
document.getElementById('grid').innerHTML = gridHtml;
//返回矩阵二维数组
let blocks = document.getElementsByClassName('block');
let grid = new Array();
for (let i = 0; i < blocks.length; i++) {
if (i % col === 0) {
grid.push(new Array());
}
grid[parseInt(i / col)].push(blocks[i]);
}
return grid;
};
let canLeft = canRight = canUp = canDown = true;
//随机生成数字
function guidNum(code) {
let randomRow = Math.floor(Math.random() * row), randomCol = Math.floor(Math.random() * col);
let num = 0;
let confirmIsFull = isFull();
while (num == 0) {
num = ((Math.floor(Math.random() * 10) % 2) + 1) * 2;
}
if (!confirmIsFull) {
if (grid[randomRow][randomCol].hasNum) {
guidNum();
}
else {
grid[randomRow][randomCol].hasNum = true;
grid[randomRow][randomCol].innerHTML = num;
grid[randomRow][randomCol].num = num;
grid[randomRow][randomCol].className = 'block level' + num;
canLeft = canRight = canUp = canDown = true;
}
}
else {
switch (code) {
case 38:
canUp = false;
break;
case 40:
canDown = false;
break;
case 37:
canLeft = false;
break;
case 39:
canRight = false;
break;
}
if (!canLeft && !canRight && !canUp && !canDown) {
alert('You Lose!');
}
}
}
//判断是否布满了
function isFull() {
let result = true;
grid.forEach(list => {
list.forEach(item => {
if (item.hasNum != true) {
result = false;
}
})
})
return result;
}
document.onkeydown = function () {
var e = event || window.event || arguments.callee.caller.arguments[0];
if (e && e.keyCode == 38) {
console.log('上');
up();
}
if (e && e.keyCode == 40) {
console.log('下');
down();
}
if (e && e.keyCode == 37) {
console.log('左');
left();
}
if (e && e.keyCode == 39) {
console.log('右');
right();
}
guidNum(e.keyCode);
}
function up() {
for (let i = 0; i < row - 1; i++) {
for (let j = 0; j < col; j++) {
if (!grid[i][j].hasNum) {
if (grid[i + 1][j].hasNum) {
grid[i][j].hasNum = true;
grid[i][j].num = grid[i + 1][j].num;
grid[i][j].className = 'block level' + grid[i][j].num;
grid[i][j].innerHTML = grid[i][j].num;
grid[i + 1][j].hasNum = false;
grid[i + 1][j].num = 0;
grid[i + 1][j].className = 'block';
grid[i + 1][j].innerHTML = '';
}
}
else {
if (grid[i][j].num == grid[i + 1][j].num) {
grid[i][j].num = grid[i][j].num * 2;
grid[i][j].className = 'block level' + grid[i][j].num;
grid[i][j].innerHTML = grid[i][j].num;
grid[i + 1][j].hasNum = false;
grid[i + 1][j].num = 0;
grid[i + 1][j].className = 'block';
grid[i + 1][j].innerHTML = '';
}
}
}
}
}
function down() {
for (let i = row - 1; i >= 1; i--) {
for (let j = 0; j < col; j++) {
if (!grid[i][j].hasNum) {
if (grid[i - 1][j].hasNum) {
grid[i][j].hasNum = true;
grid[i][j].num = grid[i - 1][j].num;
grid[i][j].className = 'block level' + grid[i][j].num;
grid[i][j].innerHTML = grid[i][j].num;
grid[i - 1][j].hasNum = false;
grid[i - 1][j].num = 0;
grid[i - 1][j].className = 'block';
grid[i - 1][j].innerHTML = '';
}
}
else {
if (grid[i][j].num == grid[i - 1][j].num) {
grid[i][j].num = grid[i][j].num * 2;
grid[i][j].className = 'block level' + grid[i][j].num;
grid[i][j].innerHTML = grid[i][j].num;
grid[i - 1][j].hasNum = false;
grid[i - 1][j].num = 0;
grid[i - 1][j].className = 'block';
grid[i - 1][j].innerHTML = '';
}
}
}
}
}
function left() {
for (let j = 0; j < col - 1; j++) {
for (let i = 0; i < row; i++) {
if (!grid[i][j].hasNum) {
if (grid[i][j + 1].hasNum) {
grid[i][j].hasNum = true;
grid[i][j].num = grid[i][j + 1].num;
grid[i][j].className = 'block level' + grid[i][j].num;
grid[i][j].innerHTML = grid[i][j].num;
grid[i][j + 1].hasNum = false;
grid[i][j + 1].num = 0;
grid[i][j + 1].className = 'block';
grid[i][j + 1].innerHTML = '';
}
}
else {
if (grid[i][j].num == grid[i][j + 1].num) {
grid[i][j].num = grid[i][j].num * 2;
grid[i][j].className = 'block level' + grid[i][j].num;
grid[i][j].innerHTML = grid[i][j].num;
grid[i][j + 1].hasNum = false;
grid[i][j + 1].num = 0;
grid[i][j + 1].className = 'block';
grid[i][j + 1].innerHTML = '';
}
}
}
}
}
function right() {
for (let j = col - 1; j >= 1; j--) {
for (let i = 0; i < row; i++) {
if (!grid[i][j].hasNum) {
if (grid[i][j - 1].hasNum) {
grid[i][j].hasNum = true;
grid[i][j].num = grid[i][j - 1].num;
grid[i][j].className = 'block level' + grid[i][j].num;
grid[i][j].innerHTML = grid[i][j].num;
grid[i][j - 1].hasNum = false;
grid[i][j - 1].num = 0;
grid[i][j - 1].className = 'block';
grid[i][j - 1].innerHTML = '';
}
}
else {
if (grid[i][j].num == grid[i][j - 1].num) {
grid[i][j].num = grid[i][j].num * 2;
grid[i][j].className = 'block level' + grid[i][j].num;
grid[i][j].innerHTML = grid[i][j].num;
grid[i][j - 1].hasNum = false;
grid[i][j - 1].num = 0;
grid[i][j - 1].className = 'block';
grid[i][j - 1].innerHTML = '';
}
}
}
}
}
</script>
运行效果
欢迎分享，转载请注明来源：内存溢出
赞
(0)
打赏
微信扫一扫
支付宝扫一扫
【前端基建】如何将vue2项目构建从webpack迁移至vite及vite优缺点
上一篇
2022-06-11
01 Vue 计算属性的基本使用
下一篇
2022-06-11
评论列表（0条）