<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>简易消消乐游戏</title>
<style>
:root {
--moveSize1: +50px;
--moveSize2: -50px;
}
.grid {
display: grid;
grid-template-columns: repeat(8, 50px);
grid-template-rows: repeat(8, 50px);
gap: 2px;
}
.block {
width: 50px;
height: 50px;
border-radius: 25px;
cursor: pointer;
}
.selected {
outline: 2px solid white;
}
/* 颜色点击动画 */
@keyframes colorClickAnimation {
0% {
transform: translateX(0);
}
50% {
transform: translateX(-10px);
}
100% {
transform: translateX(0);
}
}
/* 交换动画 */
@keyframes swapAnimation {
0% {
transform: translateX(0);
}
50% {
transform: translateX(-50%);
}
100% {
transform: translateX(0);
}
}
/* 向上动画 */
@keyframes upAnimation {
0% {
transform: translateY(0);
}
50% {
transform: translateY(var(--moveSize1));
}
100% {
transform: translateY(0);
}
}
/* 向下动画 */
@keyframes downAnimation {
0% {
transform: translateY(0);
}
50% {
transform: translateY(var(--moveSize2));
}
100% {
transform: translateY(0);
}
}
/* 向左 */
@keyframes leftAnimation {
0% {
transform: translateX(0);
}
50% {
transform: translateX(var(--moveSize2));
}
100% {
transform: translateX(0);
}
}
/* 向右 */
@keyframes rightAnimation {
0% {
transform: translateX(0);
}
50% {
transform: translateX(var(--moveSize1));
}
100% {
transform: translateX(0);
}
}
</style>
</head>
<body>
<div class="grid"></div>
<script>
// 定义游戏参数
const numRows = 8; // 行数
const numCols = 8; // 列数
const numColors = 5; // 颜色种类数
const gridEl = document.querySelector('.grid');
let grid = [];
let selectedBlock = null;
// 创建方格矩阵
for (let i = 0; i < numRows; i++) {
grid[i] = [];
for (let j = 0; j < numCols; j++) {
grid[i][j] = Math.floor(Math.random() * numColors); // 随机生成方块的颜色
const blockEl = document.createElement('div');
blockEl.className = 'block';
blockEl.style.backgroundColor = getColor(grid[i][j]);
blockEl.addEventListener('click', () => {
handleBlockClick(i, j);
});
gridEl.appendChild(blockEl);
}
}
// 检查是否有可以消除的方块
function checkMatches() {
let matches = [];
// 检查横向方块
for (let i = 0; i < numRows; i++) {
for (let j = 0; j < numCols - 2; j++) {
if (
grid[i][j] === grid[i][j + 1] &&
grid[i][j] === grid[i][j + 2]
) {
matches.push({ row: i, col: j });
matches.push({ row: i, col: j + 1 });
matches.push({ row: i, col: j + 2 });
}
}
}
// 检查纵向方块
for (let j = 0; j < numCols; j++) {
for (let i = 0; i < numRows - 2; i++) {
if (
grid[i][j] === grid[i + 1][j] &&
grid[i][j] === grid[i + 2][j]
) {
matches.push({ row: i, col: j });
matches.push({ row: i + 1, col: j });
matches.push({ row: i + 2, col: j });
}
}
}
return matches;
}
// 处理方块点击事件
function handleBlockClick(row, col) {
if (!selectedBlock) {
selectedBlock = { row, col };
const blockEl = getBlockElement(row, col);
blockEl.classList.add('selected');
} else {
const { row: prevRow, col: prevCol } = selectedBlock;
// 交换两个方块的位置
swapBlocks(row, col, prevRow, prevCol);
// 检查是否满足消除条件
const matches = checkMatches();
if (matches.length > 0) {
setTimeout(() => {
removeMatches(matches);
dropBlocks();
refillGrid();
updateGrid();
}, 1000);
} else {
// 如果不满足消除条件,则撤销交换,恢复原来的位置
setTimeout(() => {
swapBlocks(row, col, prevRow, prevCol);
updateGrid();
}, 1000);
}
// 取消选择状态
const blockEl = getBlockElement(selectedBlock.row, selectedBlock.col);
blockEl.classList.remove('selected');
selectedBlock = null;
}
}
// 获取指定位置的方块元素
function getBlockElement(row, col) {
const index = row * numCols + col;
return gridEl.children[index];
}
// 交换两个方块的位置
function swapBlocks(row1, col1, row2, col2) {
const temp = grid[row1][col1];
grid[row1][col1] = grid[row2][col2];
grid[row2][col2] = temp;
// 判断动画执行方向
// console.log(row1, col1, row2, col2);
let animations = moveBlocks( row1, col1, row2, col2)
// console.log(animations);
// return false
// 添加交换动画
const blockEl1 = getBlockElement(row1, col1);
const blockEl2 = getBlockElement(row2, col2);
blockEl1.style.animation = animations.block1;
blockEl2.style.animation = animations.black2;
setTimeout(() => {
blockEl1.style.animation = '';
blockEl2.style.animation = '';
// 更新方块颜色
blockEl1.style.backgroundColor = getColor(grid[row1][col1]);
blockEl2.style.backgroundColor = getColor(grid[row2][col2]);
}, 1000);
}
// 更新方格矩阵
function updateGrid() {
const blockEls = document.querySelectorAll('.block');
for (let i = 0; i < numRows; i++) {
for (let j = 0; j < numCols; j++) {
const index = i * numCols + j;
if (grid[i][j] === -1) {
blockEls[index].style.display = 'none'; // 隐藏已被消除的方块
} else {
blockEls[index].style.backgroundColor = getColor(grid[i][j]);
}
}
}
}
// 获取方块颜色对应的CSS样式
function getColor(colorIndex) {
switch (colorIndex) {
case 0:
return 'red';
case 1:
return 'blue';
case 2:
return 'green';
case 3:
return 'yellow';
case 4:
return 'purple';
default:
return 'black';
}
}
// 消除方块
function removeMatches(matches) {
for (let match of matches) {
grid[match.row][match.col] = -1; // 将匹配到的方块标记为-1,表示已被消除
}
}
// 下落方块
function dropBlocks() {
for (let j = 0; j < numCols; j++) {
let emptyCells = 0;
for (let i = numRows - 1; i >= 0; i--) {
if (grid[i][j] === -1) {
emptyCells++;
} else if (emptyCells > 0) {
grid[i + emptyCells][j] = grid[i][j];
grid[i][j] = -1;
}
}
}
}
// 补充新方块
function refillGrid() {
for (let j = 0; j < numCols; j++) {
for (let i = numRows - 1; i >= 0; i--) {
if (grid[i][j] === -1) {
grid[i][j] = Math.floor(Math.random() * numColors);
}
}
}
}
// 执行颜色点击动画
function animateColorClick(row1, col1, row2, col2) {
const blockEl1 = getBlockElement(row1, col1);
const blockEl2 = getBlockElement(row2, col2);
blockEl1.style.animation = 'colorClickAnimation 0.5s';
blockEl2.style.animation = 'colorClickAnimation 0.5s';
setTimeout(() => {
blockEl1.style.animation = '';
blockEl2.style.animation = '';
}, 500);
}
// 运行游戏循环
setInterval(gameLoop, 1000);
// 主循环
function gameLoop() {
const matches = checkMatches();
if (matches.length > 0) {
removeMatches(matches);
dropBlocks();
refillGrid();
updateGrid();
}
}
//判断方块移动方向, 后一个, 前一个
function moveBlocks(row1, col1, row2, col2) {
let animations = {}
let block1 = ""
let black2 = ""
//同一行,方块1在方块2左边
if (row1 === row2 && col1 < col2) {
//方块1向右移动
block1 = "rightAnimation 0.5s"
// 方块2向左移动
black2 = "leftAnimation 0.5s"
}
//同一行,方块1在方块2右边
if (row1 === row2 && col1 > col2) {
//方块1向左移动
block1 = "leftAnimation 0.5s"
// 方块2向右移动
black2 = "rightAnimation 0.5s"
}
//同一列,方块1在方块2下边
if (row1 > row2 && col1 === col2) {
//方块1向下移动
block1 = "downAnimation 0.5s"
// 方块2向上移动
black2 = "upAnimation 0.5s"
}
//同一列,方块1在方块2上边
if (row1 < row2 && col1 === col2) {
//方块1向上移动
block1 = "upAnimation 0.5s"
// 方块2向下移动
black2 = "downAnimation 0.5s"
}
animations = {block1, black2}
return animations
}
</script>
</body>
</html>
js实现简易消消乐游戏
于 2024-05-06 17:55:18 首次发布