记忆游戏开发全解析：从原理到代码实现

# 记忆游戏开发全解析：从原理到代码实现 ## 一、JavaScript 中加号的多重含义 在 JavaScript 里，加号（+）有着不同的意义。当操作数为数字时，它代表加法运算；当操作数为字符串时，则表示字符串的拼接。例如表达式 `"Number of matches so far: " + String(count)` 就实现了两个任务：一是将数字类型的变量 `count` 转换为字符串，二是把常量字符串 `"Number of matches so far: "` 和 `String(count)` 的结果进行拼接。这种单个符号具有多种含义的现象被称为运算符重载。 若一个操作数是字符串，另一个是数字，JavaScript 的处理结果取决于操作数的数据类型。不过，为了避免混淆，建议牢记加号的解释规则。要是程序中数字的递增不符合预期，比如从 1 变成 11 再到 111，而你期望的是 1、2、3，那可能是代码在拼接字符串而非递增数字，此时就需要将字符串转换为数字。 ## 二、绘制多边形 利用 HTML5 的绘图功能可以很好地创建多边形。为了理解绘制多边形的代码开发过程，可以把几何图形想象成一个类似车轮的形状，从中心向每个顶点延伸出辐条。这些辐条不会出现在绘图中，但能帮助我们理清绘制多边形的思路。 ### 具体步骤如下： 1. **计算角度**：将 `2 * Math.PI`（代表一个完整的圆）除以多边形的边数，得到辐条之间的角度。 2. **确定起始点**：使用 `moveTo` 方法，结合半径、`Math.sin` 和 `Math.cos` 函数，移动到指定的起始点。 3. **绘制路径**：使用 `lineTo` 方法按顺时针方向绘制剩余的 `n - 1` 个点。 4. **填充图形**：通过 `fill` 方法填充路径，形成一个完整的多边形。 以下是绘制多边形的代码示例： ```javascript function drawpoly() { ctx.fillStyle = frontbgcolor; ctx.fillRect(this.sx - 2 * this.rad, this.sy - 2 * this.rad, 4 * this.rad, 4 * this.rad); ctx.beginPath(); ctx.fillStyle = polycolor; var i; var rad = this.rad; ctx.moveTo(this.sx + rad * Math.cos(-.5 * this.angle), this.sy + rad * Math.sin(-.5 * this.angle)); for (i = 1; i < this.n; i++) { ctx.lineTo(this.sx + rad * Math.cos((i - .5) * this.angle), this.sy + rad * Math.sin((i - .5) * this.angle)); } ctx.fill(); } ``` 需要注意的是，绘制和重绘多边形会消耗一定时间，但在这个应用中不会造成问题。如果程序中有大量复杂的设计，提前将它们准备成图片可能是个不错的选择，但这需要用户下载文件，可能会花费较长时间，因此需要根据实际情况进行实验，选择更合适的方法。 ## 三、洗牌算法 在记忆游戏中，每一轮开始前都需要对卡片进行洗牌，以确保卡片不会每次都出现在相同的位置。我们可以采用小时候玩游戏的方式，即随机交换卡片对。 ### 具体实现步骤如下： 1. **定义交换次数**：将交换次数设定为卡片数量的三倍。 2. **随机选择卡片**：使用 `Math.floor(Math.random() * dl)` 表达式随机选择两张卡片，其中 `dl` 表示卡片的数量。 3. **交换卡片信息**：使用临时变量存储卡片信息，然后进行交换。 以下是洗牌函数的代码示例： ```javascript function shuffle() { var i; var k; var holder; var dl = deck.length; var nt; for (nt = 0; nt < 3 * dl; nt++) { i = Math.floor(Math.random() * dl); k = Math.floor(Math.random() * dl); holder = deck[i].info; deck[i].info = deck[k].info; deck[k].info = holder; } } ``` ## 四、实现卡片点击功能 在 HTML5 中，可以使用 `addEventListener` 方法来处理卡片的点击事件。具体步骤如下： 1. **获取鼠标坐标**：根据不同浏览器的支持情况，使用 `ev.layerX` 或 `ev.offsetX` 来获取鼠标的 `x` 和 `y` 坐标。 2. **判断点击位置**：遍历卡片数组，通过比较鼠标坐标和卡片的位置、宽度和高度，判断鼠标是否点击在卡片上。 3. **处理点击事件**：使用 `firstpick` 变量作为标志，区分玩家的第一次和第二次点击。如果两次点击的卡片信息匹配，则增加匹配数量；如果不匹配，则在短暂延迟后将卡片翻转回去。 以下是处理卡片点击事件的代码示例： ```javascript function choose(ev) { var mx; var my; var pick1; var pick2; if (ev.layerX || ev.layerX == 0) { mx = ev.layerX; my = ev.layerY; } else if (ev.offsetX || ev.offsetX == 0) { mx = ev.offsetX; my = ev.offsetY; } var i; for (i = 0; i < deck.length; i++) { var card = deck[i]; if (card.sx >= 0) if ((mx > card.sx) && (mx < card.sx + card.swidth) && (my > card.sy) && (my < card.sy + card.sheight)) { if ((firstpick) || (i != firstcard)) break; } } if (i < deck.length) { if (firstpick) { firstcard = i; firstpick = false; pick1 = new Polycard(card.sx + cardwidth * .5, card.sy + cardheight * .5, cardrad, card.info); pick1.draw(); } else { secondcard = i; pick2 = new Polycard(card.sx + cardwidth * .5, card.sy + cardheight * .5, cardrad, card.info); pick2.draw(); if (deck[i].info == deck[firstcard].info) { matched = true; var nm = 1 + Number(document.f.count.value); document.f.count.value = String(nm); if (nm >= .5 * deck.length) { var now = new Date(); var nt = Number(now.getTime()); var seconds = Math.floor(.5 + (nt - starttime) / 1000); document.f.elapsed.value = String(seconds); } } else { matched = false; } firstpick = true; setTimeout(flipback, 1000); } } } ``` ## 五、防止作弊 在记忆游戏中，玩家可能会通过一些不正当手段来破坏游戏，例如两次点击同一张卡片或点击已移除卡片的区域。为了防止这些情况发生，可以采取以下措施： 1. **防止重复点击同一张卡片**：在判断鼠标是否在卡片上的 `if` 语句之后，插入 `if ((firstpick) || (i != firstcard)) break;` 语句，当满足一定条件时退出 `for` 循环。 2. **防止点击已移除卡片的区域**：在移除卡片时，将卡片的 `sx` 属性设置为 `-1`，在处理点击事件时，只检查 `sx` 属性大于等于 0 的卡片。 以下是防止作弊的代码示例： ```javascript for (i = 0; i < deck.length; i++) { var card = deck[i]; if (card.sx >= 0) if ((mx > card.sx) && (mx < card.sx + card.swidth) && (my > card.sy) && (my < card.sy + card.sheight)) { if ((firstpick) || (i != firstcard)) break; } } ``` ## 六、多边形版本记忆游戏的函数列表 | 函数 | 调用方式 | 调用的函数 | | --- | --- | --- | | `init` | 响应 `body` 标签的 `onLoad` 事件调用 | `makedeck`、`shuffle` | | `choose` | 响应 `addEventListener` 调用 | `Polycard`、`drawpoly` | | `flipback` | 响应 `setTimeout` 调用 | 无 | | `drawback` | 作为卡片的绘制方法调用 | 无 | | `Polycard` | 在 `choose` 函数中调用 | 无 | | `shuffle` | 在 `init` 函数中调用 | 无 | | `makedeck` | 在 `init` 函数中调用 | `Card` | | `Card` | 在 `makedeck` 函数中调用 | 无 | | `drawpoly` | 作为多边形的绘制方法调用 | 无 | ### 完整代码示例 ```html <html> <head> <title>Memory game using polygons</title> <style> form { width: 330px; margin: 20px; background-color: pink; Padding: 20px; } input { text-align: right; } </style> <script type="text/javascript"> var ctx; var firstpick = true; var firstcard; var secondcard; var frontbgcolor = "rgb(251,215,73)"; var polycolor = "rgb(254,11,0)"; var backcolor = "rgb(128,0,128)"; var tablecolor = "rgb(255,255,255)"; var cardrad = 30; var deck = []; var firstsx = 30; var firstsy = 50; var margin = 30; var cardwidth = 4 * cardrad; var cardheight = 4 * cardrad; var matched; var starttime; function Card(sx, sy, swidth, sheight, info) { this.sx = sx; this.sy = sy; this.swidth = swidth; this.sheight = sheight; this.info = info; this.draw = drawback; } function makedeck() { var i; var acard; var bcard; var cx = firstsx; var cy = firstsy; for (i = 3; i < 9; i++) { acard = new Card(cx, cy, cardwidth, cardheight, i); deck.push(acard); bcard = new Card(cx, cy + cardheight + margin, cardwidth, cardheight, i); deck.push(bcard); cx = cx + cardwidth + margin; ```