html5 翻牌小游戏,html5记忆翻牌游戏实现思路及代码
翻开的2张牌如果配对就会消除,否则2张牌都会返回背面。
需求分析
怎么绘制正的牌面和背的牌面及配对成功后怎么消除牌面
怎么生成牌组并且确定每张牌的位置和对应的图片
怎么洗牌
怎么记录牌组的配对信息
怎么确定点击事件是第一次点击还是第二次点击
作弊事件的处理:两次点击同一张牌 点击已经消除的牌面 点击牌面之外的区域
牌翻开之后需要给一定时间让玩家看清楚,怎么实现暂停
鼠标点击事件的响应及获得鼠标点击位置的坐标从而确定点击的是哪一张牌
mycode:
复制代码代码如下:
test
var ctx;
var canvas;
var card;
var first_pick = true; //第一次点击的标志
var first_card = -1;
var second_card;
var back_color = "rgb(255,0,0)"; //卡片背面颜色
var table_color = "#fff";
var deck = []; //note
var first_x = 10;
var first_y = 50;
var margin = 30;
var card_width = 50;
var card_height = 50;
var pairs = [
["1_a.jpg", "1_b.jpg"],
["2_a.jpg", "2_b.jpg"],
["3_a.jpg", "3_b.jpg"],
["4_a.jpg", "4_b.jpg"],
["5_a.jpg", "5_b.jpg"]
];
function draw_back()//绘制卡片背面
{
ctx.fillstyle = back_color;
ctx.fillrect(this.sx, this.sy, this.swidth, this.sheight);
}
function card(sx, sy, swidth, sheight, img, info)//构造函数
{
this.sx = sx;
this.sy = sy;
this.swidth = swidth;
this.sheight = sheight;
this.info = info;
this.img = img;
this.draw = draw_back;
}
function make_deck()//生成卡组并绘制
{
var i;
var a_card;
var b_card;
var a_pic;
var b_pic;
var cx = first_x;
var cy = first_y;
for (i = 0; i < pairs.length; i++)
{
a_pic = new image();
a_pic.src = pairs[i][0];
a_card = new card(cx, cy, card_width, card_height, a_pic, i);
deck.push(a_card);
b_pic = new image();
b_pic.src = pairs[i][1];
b_card = new card(cx, cy + card_height + margin, card_width, card_height, b_pic, i);
deck.push(b_card);
cx = cx + card_width + margin; //note
a_card.draw();
b_card.draw();
}
}
function shuffle()//洗牌
{
var i;
var j;
var temp_info;
var temp_img;
var deck_length = deck.length;
var k;
for (k = 0; k < 3 * deck_length; k++)
{
i = math.floor(math.random() * deck_length);
j = math.floor(math.random() * deck_length);
temp_info = deck[i].info;
temp_img = deck[i].img;
deck[i].info = deck[j].info;
deck[i].img = deck[j].img;
deck[j].info = temp_info;
deck[j].img = temp_img;
}
}
function choose(ev)
{
//var out;
var mx;
var my;
//var pick1;
//var pick2;
var i;
//note
if (ev.layerx || ev.layerx == 0) { // firefox
mx = ev.layerx;
my = ev.layery;
} else if (ev.offsetx || ev.offsetx == 0) { // opera
mx = ev.offsetx;
my = ev.offsety;
}
for (i = 0; i < deck.length; i++)
{
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 (i != first_card)//如果两次点击同一张牌不做处理
break;
}
}
}
if (i < deck.length)
{
if (first_pick)//如果是第一次点击
{
first_card = i;
first_pick = false; //note
ctx.drawimage(card.img, card.sx, card.sy, card.swidth, card.sheight);
}
else
{
first_pick = true; //note
second_card = i;
ctx.drawimage(card.img, card.sx, card.sy, card.swidth, card.sheight);
tid=settimeout(flip_back,1000);
}
}
}
function flip_back()
{
if (card.info == deck[first_card].info)//配对成功
{
ctx.fillstyle = table_color;
ctx.fillrect(deck[first_card].sx, deck[first_card].sy, deck[first_card].swidth, deck[first_card].sheight);
ctx.fillrect(deck[second_card].sx, deck[second_card].sy, deck[second_card].swidth, deck[second_card].sheight);
deck[first_card].sx = -1;
deck[second_card].sy = -1;
first_card=-1;
}
else
{
deck[first_card].draw();
deck[second_card].draw();
first_card=-1;
}
}
function init()
{
canvas = document.getelementbyid('canvas');
canvas.addeventlistener('click', choose, false);
ctx = canvas.getcontext('2d');
make_deck();
shuffle();
}
123142
html5 翻牌小游戏,html5记忆翻牌游戏实现思路及代码相关推荐
- 2022年全国大学生数学建模竞赛E题目-小批量物料生产安排详解+思路+Python代码时序预测模型(三)
目录 前言 一.六种物料挑选 二.周数处理 三.时序预测模型 模型预测结果 建模的部分后续将会写出,想要了解更多的欢迎加博主微信,免费获取更多细化思路+模型! 点关注,防走丢,如有纰漏之处,请留言指教 ...
- python小游戏毕设 记忆翻牌小游戏设计与实现 (源码)
文章目录 0 项目简介 1 游戏介绍 2 实现效果 3 开发工具 3.1 环境配置 3.2 Pygame介绍 4 具体实现 居中显示 5 最后 0 项目简介
- Android 记忆卡片游戏 记忆力 Android游戏 Android记忆卡片游戏源代码
欢迎下载哦!支持各种屏幕,各种版本!!!!!!! 只是我上传时,没有写好呵呵!!! 游戏APK爱卓网下载地址:http://www.iandroid.cn/goods-1316445.html OR ...
- 2022年全国大学生数学建模竞赛E题目-小批量物料生产安排详解+思路+Python代码时序预测模型(一)
目录 前言 一.赛题分析 1.问题一 问题分析 物料频率 需求量 趋势
- 考验记忆力的翻牌小游戏
考验记忆力的翻牌小游戏,主要运用到 setTimeout ,在匹配失败后反转牌面.使用index参数记录翻开第一张牌的索引,与第二张翻开牌对比. <html> <head>&l ...
- 【unity3D】unity记忆翻牌小游戏教程(简单详细)
游戏开发的学习记录⑨ 项目:记忆翻牌小游戏 unity版本:unity2020.3.30f1c1 目录 项目:记忆翻牌小游戏 unity版本:unity2020.3.30f1c1 一.游戏内容说明 二 ...
- php翻牌游戏代码,H5响应式网页翻牌小游戏代码
H5响应式网页翻牌小游戏代码 body { margin: 0; padding: 0; } .tile { display: block; float: left; border-radius: 5 ...
- 记忆翻牌游戏代码html,原生JS实现记忆翻牌游戏
本文实例为大家分享了JS实现记忆翻牌游戏的具体代码,供大家参考,具体内容如下 html代码 css代码 * { padding: 0; margin: 0; } #game { width: 600p ...
- 翻牌游戏如何打乱牌面java_家长专栏提高儿童记忆力的游戏训练
记忆是人脑对过去经验的保持和再现.记忆过程包括三个基本环节,即识记.保持.再认或回忆.识记是识别和记住事物.保持是将已获得的知识或经验巩固与保留在大脑中.再认是指过去经历过的事物再度出现时,能将它指认 ...
- 如何用HTML和css实现拼图,打造自己的html5拼图小游戏
得益于liuyubobobo老师的canvas课程和思路指点,做了一版简单的 html5拼图小游戏,下面就简单介绍一下实现的原理... 利用canvas裁剪拼图所需的小块图片//核心代码如下: var ...
最新文章
- UVA 11491 Erasing and Winning 奖品的价值 (贪心)
- Centos7 安装 docker-ce
- 使用create-react-app遇到问题解决方案汇总
- 设计模式之Adapter
- C++实现各种交换排序(冒泡,快速)
- 英雄无敌3高清 Android,安卓TOP10:《英雄无敌3》高清重制版上架
- 几道经典的SQL题目
- 微软董事会:比尔·盖茨应当离开;字节跳动回应“实习生遭遇职场 PUA”事件;TensorFlow 2.5.0稳定版发布|极客头条...
- Notes配置初始化和重新设置(不卸载)
- 分区副本重分配、数据迁移、副本扩缩容
- 软件文档的概念和细分
- 如何渡过小白期,不再当菜鸟程序员?
- 怎么看R语言是不是在运行_五个方法,教你怎么看自己电脑的硬盘是不是固态硬盘?...
- 浅析深度学习中的mask操作
- Atomikos 中文说明文档(周枫翻译)
- rar压缩文件暴力破解
- 万兆网络变压器高频特性要求及生产工艺对其的影响
- 考取PMP证书后,如何进一步提升自己?
- 软件设计师 软考 真题练习 (一)
- svn 被锁住 冲突 Can‘t revert without reverting children
热门文章
- 广告框页面随意滚动特效
- PLC--中科博微NCS4000
- 云原生架构重要组成部分之微服务
- Vue案例:组件之间的传值问题
- 前端开发桌面软件、技术博客整理等
- 正确解决驱动程序无法通过使用安全套接字层(SSL)加密与 SQL Server 建立安全连接
- 大学期间比较好用的几个网站
- The type XXX cannot be resolved. It is indirectly referenced from required .class files错误.....
- 使用cfengine来实现服务器的自动化配置
- HTML+CSS入门