html5+canvas+纯原生javascript+audio开发仙剑记忆力翻牌游戏

本文链接：https://blog.youkuaiyun.com/wujimiao/article/details/64904611

本文介绍了作者使用HTML5、Canvas、纯JavaScript和Audio开发一款仙剑主题的记忆翻牌游戏的过程。在开发过程中，作者面临了如设置鼠标点击事件、Canvas绘图、使用requestAnimationFrame进行动画等挑战，并且提到了游戏中存在卡牌匹配bug和性能问题。文章提供了部分html页面代码，供读者参考。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

感觉又是在发小白文，没办法，我还在不断学习中。前端进阶计划再一次因为学习难度，项目经验而告吹。

好在，我在缓慢进步~

文章内容来源我网络上看到别人用js和css3写的仙剑记忆力翻牌游戏，感觉自己可以学到些什么。所以就有了一天一夜的奋斗成果，写的过程，感觉好坎坷，又是查看canvas的API，又是设置相关变量，又得摸索坑爹费脑的游戏逻辑！

说实话，人家那个玩的挺爽，想过很炫。换成我做得，不说了，去把他的网页考下来参考参考。

说下游戏相关：鼠标点击事件（根据卡牌显示大小，确定鼠标有效点击区域，触发点击事件）

canvas绘图（将坐标分好的图片加载进去）

计时器（使用浏览器运动API---requestAnimationFrame）我压根不知道如何停止这货

游戏卡牌匹配有bug，性能也不咋滴，直接上代码

html页面代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta content=”width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0″ name=”viewport” />
	<meta content=”yes” name=”apple-mobile-web-app-capable” />
	<meta content=”black” name=”apple-mobile-web-app-status-bar-style” />
	<meta content=”telephone=no” name=”format-detection” />
	<title>js版仙剑翻牌记忆力游戏</title>
	<link rel="stylesheet" type="text/css" href="css/memory.css">
	<script type="text/javascript" src="js/memory.js"></script>
</head>
<body>
	<header id="memory">
		<canvas id="show"></canvas>
		<audio id="astart"  loop='loop'>
			<source id="as1"  type="audio/ogg" src="music/start.ogg">
			<source id="as2" type="audio/mpeg"  src="music/start.mp3">
		</audio>
		<audio id="afail" >
			<source id="af1"  type="audio/ogg" src="music/fail.ogg">
			<source id="af2" type="audio/mpeg"  src="music/fail.mp3