JS 拼图游戏 面向对象，注释完整。

JS拼图游戏面向对象，是一种运用面向对象编程思想，使用JavaScript语言编写的的游戏。玩家通过拼接零散的图片碎片，拼出一副完整的图片，这个过程需要玩家通过多次移动碎片，才最终能够拼接完成。

要达到这个目的，需要了解以下几个方面的内容：

一、游戏的需求

首先要明确游戏的需求，其主要需要实现以下功能：

1. 在游戏刚开始时，网页应该通过JS加载等方式，完成拼图缩略图的展示，玩家可以从中选择所需要完成的图片。

2. 玩家选择一张拼图图片后，将其原图进行分割，得到多张初始拼图碎片。

3. 将多张拼图碎片随机分布到一个方格区域内。

4. 玩家通过交换两张游戏区域内的碎片，达到最终完整拼图的目标。

二、面向对象编程思想

面向对象编程的核心是将问题中的实体抽象成对象，一个对象应该具有以下三个特点：

1. 对象具有属性，可以描述当前对象的基本信息。

2. 对象具有方法，可以描述当前对象可以进行的操作方式。

3. 对象应该是独立的实体，具有状态和行为，并且可以自动协作完成自己的任务。

在这个拼图游戏中，每个碎片就可以看作是一个对象，它应该具有以下属性和方法：

1. 属性：每个拼图碎片应该具有自己所在的位置坐标、图片的src路径、以及是否是空白碎片的标志位。

2. 方法：每个拼图碎片应该具有能实现位置交换、边缘确认等功能的方法。

接下来，我们通过两个示例来说明游戏中的对象具体应该如何实现：

示例一：图片拆分和异常处理

在这个示例中，我们需要把原图拆分为n部分小图，对于一张异常图片我们需要进行异常处理。

首先，我们可以定义一个拼图碎片对象，具体应该包含以下属性：

class Fragment{
    constructor(id, pos, width, height, src, isBlank, selected){
        this.id = id;             //碎片的位置id
        this.width = width;       //碎片的宽度
        this.height = height;     //碎片的高度
        this.isBlank = isBlank;   //是否是空白碎片
        this.selected = selected; //是否已经处理过，用来错误处理
        this.img = new Image();
        this.img.src = src;       //碎片的图片路径
        this.pos = {x: pos.x, y: pos.y};    //碎片的位置坐标
    }
}

接下来，我们需要完成图片拆分和异常判断调用的方法：

//拆分图片
function splitImage(img) {
    const pw = Math.floor(img.width / RECT_COL_NUM);      //碎片的宽度
    const ph = Math.floor(img.height / RECT_COL_NUM);     //碎片的高度

    const ltps = [];
    let id = 0;
    let x = y = tw = th = 0;
    for (let r = 0; r < RECT_ROW_NUM; r++) {
        y = r * ph;
        for (let c = 0; c < RECT_COL_NUM; c++) {
            id = r * RECT_COL_NUM + c;
            x = c * pw;
            tw = c === RECT_COL_NUM - 1 ? img.width - x : pw;
            th = r === RECT_ROW_NUM - 1 ? img.height - y : ph;
            ltps.push(new Fragment(id, {x, y}, tw, th, src, false, false));
        }
    }
    return ltps;
}

//图片异常处理
function initImage(srcUrl) {
    return new Promise((resolve, reject) => {
        const img = new Image();
        img.src = srcUrl;
        img.onload = () => {
            resolve(img);
        };
        img.onerror = () => {
            reject(new Error('image load error!'));
        };
    });
}

示例二：拼图左右交换

在这个示例中，我们需要实现左右交换拼图碎片的方法，来让碎片可以移动到目标位置。

首先，我们可以定义一个拼图碎片对象，具体定义如下：

class Puzzle {
    constructor(title, ltps) {
        this.title = title;
        this.ltps = ltps;       // 碎片数组
        this.blankPos = null;   //空白方格的位置
        this.selectedPos = null;//当前选定的碎片坐标
    }
}

接下来，我们定义一个可以左右交换两个碎片位置的方法：

Puzzle.prototype.switchPeices = function (pos1, pos2) {
    // 首先交换碎片在数组中的位置
    [this.ltps[pos1], this.ltps[pos2]] = [this.ltps[pos2], this.ltps[pos1]];
    let [x1,y1] = this.ltps[pos1].pos;
    let [x2,y2] = this.ltps[pos2].pos;
    let w = this.ltps[0].width + LINE_GAP; //全局变量，某个“线性”的碎片宽、高还要加线的边距
    // 再交换碎片实质位置
    [this.ltps[pos1].pos, this.ltps[pos2].pos ] = [this.ltps[pos2].pos, this.ltps[pos1].pos];

    this.ltps[pos1].selected = false;//这里把关键位置信息设置为false是有必要的
    this.ltps[pos2].selected = false;
    this.selectedPos = null; //交换结果已经达到，清空所选碎片
};

总结

在以上两个示例中，我们使用面向对象编程思想，结合JS语言特点，实现了拼图游戏的两个核心功能点。通过一个个对象的交互协作，完成了仿真真实的人机交互体验，让用户可以在游戏中体会到更真实的游戏感受。

如果您对这个话题感兴趣，我们欢迎您前来我们的网站，查看更多有关游戏的文章和编程技术，希望可以给你带来新的思路和想法。