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

最新推荐文章于 2023-03-24 12:17:01 发布

VIP文章 miao淼

最新推荐文章于 2023-03-24 12:17:01 发布

阅读量2.7k

点赞数 1

分类专栏： HTML5+JS游戏开发练习笔记文章标签： html5 javascript canvas audio 记忆翻牌游戏

本文链接：https://blog.csdn.net/wujimiao/article/details/64904611

版权

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

好在，我在缓慢进步~

文章内容来源我网络上看到别人用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

最低0.47元/天解锁文章

miao淼

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
html5+canvas+纯原生javascript+audio开发仙剑记忆力翻牌游戏

感觉又是在发小白文，没办法，我还在不断学习中。前端进阶计划再一次因为学习难度，项目经验而告吹。好在，我在缓慢进步~文章内容来源我网络上看到别人用js和css3写的仙剑记忆力翻牌游戏，感觉自己可以学到些什么。所以就有了一天一夜的奋斗成果，写的过程，感觉好坎坷，又是查看canvas的API，又是设置相关变量，又得摸索坑爹费脑的游戏逻辑！说实话，人家那个玩的挺爽，想过很炫。换成我做得，不说了
复制链接

扫一扫