JavaScript小游戏源码|极客笔记

JavaScript小游戏源码

在现如今的社交娱乐生活中，游戏是人们广泛喜欢的一种休闲方式。而作为程序员或者对编程感兴趣的人来说，开发一个小游戏就成了一种展示技能，也能在其中享受到编程带来的乐趣。本篇文章将详细介绍如何用JavaScript实现一个简单的小游戏，并给出源码。

游戏概述

我们设计的小游戏是一个“消消乐”的类似游戏，玩家需要通过点击相邻的相同方块来消除它们，直到所有的方块都被消除完为止。游戏规则如下：

每个方块有不同的颜色，并且相邻的相同颜色方块可以消除。
玩家每次可以点击两个相邻的方块，如果它们的颜色相同，则消除这两个方块。
当所有的方块都被消除后，游戏结束。

游戏设计

页面布局

首先我们需要设计游戏的页面布局，包括游戏面板、方块的显示、得分统计等。

<!DOCTYPE html>
<html>
<head>
    <title>消消乐小游戏</title>
    <style>
        .game-container {
            width: 400px;
            margin: 0 auto;
        }
        .block {
            width: 50px;
            height: 50px;
            margin-right: 5px;
            margin-bottom: 5px;
            display: inline-block;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div class="game-container">
        <div id="game-board"></div>
        <div>得分：<span id="score">0</span></div>
        <button onclick="restartGame()">重新开始</button>
    </div>
    <script src="game.js"></script>
</body>
</html>

在游戏的页面布局中，我们主要包括一个游戏面板game-board用来显示方块，一个得分统计的元素score，以及一个重新开始游戏的按钮。方块的样式使用了CSS进行简单的排列。

游戏逻辑

下面是JavaScript的游戏逻辑部分，主要包括生成方块、处理用户点击事件、判断消除逻辑等功能。

// 游戏参数
const ROWS = 7;
const COLS = 7;
const colors = ['red', 'blue', 'green', 'yellow', 'purple'];

let gameBoard = document.getElementById('game-board');
let scoreElem = document.getElementById('score');
let score = 0;
let selectedBlock = null;
let blocks = [];

// 生成随机颜色的方块
function generateBlock() {
    let color = colors[Math.floor(Math.random() * colors.length)];
    let block = document.createElement('div');
    block.className = 'block';
    block.style.backgroundColor = color;
    block.onclick = function() {
        selectBlock(this);
    };
    return block;
}

// 初始化游戏面板
function initGameBoard() {
    blocks = [];
    for (let i = 0; i < ROWS; i++) {
        let row = [];
        for (let j = 0; j < COLS; j++) {
            let block = generateBlock();
            row.push(block);
            gameBoard.appendChild(block);
        }
        blocks.push(row);
    }
}

// 检查是否有相邻的相同颜色方块
function checkAdjacent(block1, block2) {
    let rect1 = block1.getBoundingClientRect();
    let rect2 = block2.getBoundingClientRect();
    return Math.abs(rect1.top - rect2.top) < 60 && Math.abs(rect1.left - rect2.left) < 60;
}

// 选择方块
function selectBlock(block) {
    if (selectedBlock === null) {
        selectedBlock = block;
    } else {
        if (selectedBlock !== block && checkAdjacent(selectedBlock, block) && selectedBlock.style.backgroundColor === block.style.backgroundColor) {
            block.remove();
            selectedBlock.remove();
            score += 10;
            scoreElem.innerText = score;
        }
        selectedBlock = null;
    }
}

// 重新开始游戏
function restartGame() {
    gameBoard.innerHTML = '';
    score = 0;
    scoreElem.innerText = score;
    initGameBoard();
}

initGameBoard();

在游戏逻辑部分中，我们定义了一些常量和变量，包括游戏面板的行列数、颜色选项、得分统计等。然后实现了生成随机颜色方块、初始化游戏面板、处理用户点击事件、判断消除逻辑、重新开始游戏等功能。