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记忆翻牌游戏实现思路及代码相关推荐
- 100行JS代码实现❤坦克大战js小游戏源码 HTML5坦克大战游戏代码(HTML+CSS+JavaScript )
坦克大战js小游戏源码 HTML5坦克大战游戏代码(HTML+CSS+JavaScript ) HTML5坦克大战网页小游戏,完美还原小霸王学习机效果,以坦克战斗及保卫基地为主题,属于策略型类游戏. ...
- html扑克牌游戏源码,html5扑克牌消除小游戏源码
特效描述:html5扑克牌 消除小游戏源码.html5扑克牌消除小游戏源码 代码结构 1. 引入CSS 2. 引入JS 3. HTML代码 $(function(){ //实现随机洗牌 neusoft ...
- 单机手机消消乐php游戏源码,html5做出叠房子消消乐小游戏代码
html5做出叠房子消消乐小游戏代码 js代码 // The game configuration var qici = {}; qici.config = { projectName: 'Subar ...
- VB6编程学习DX9游戏编程DirectX9编程2D小游戏源码冷风引擎CoolWind2D游戏引擎(1)
前言 打开CSDN或者度娘(谷哥被墙了,搜索不了),关键词"VB6 dx9 DirectX9 游戏源码",你会发现,讲解DX9技术的文章很多,但是跟VB6都没什么关系.偶有几片文章 ...
- DX9的一些方法介绍-------VB6编程学习DX9游戏编程DirectX9编程2D小游戏源码冷风引擎CoolWind2D游戏引擎(9)
DX9的一些方法介绍(IDirect3D9) 在前边的源码中,引用了一些DX9的方法,我这里做了一个笔记,大家可以看看. 1,IDirect3DDevice9::SetTexture 方法:将纹理分配 ...
- h5游戏抽奖游戏源码_抽奖扑克游戏
h5游戏抽奖游戏源码 背景 (Background) A while back I wrote an article called Simple Games which described how t ...
- html5 mp3播放器源码,HTML5自定义mp3播放器源码
audio对象 src兼容.ogg .wav .mp3 width autoplay loop muted静音 播放play() var myAudio = new Audio(); myAudio. ...
- DX9显示文字-------VB6编程学习DX9游戏编程DirectX9编程2D小游戏源码冷风引擎CoolWind2D游戏引擎(14)
DX9显示文字 创建Form1,输入以下源码: Private Sub Form_Load()'新手注意:游戏编程中, '通常将窗体的 BorderStyle 设置为"Fixed singl ...
- DX9贴图-------VB6编程学习DX9游戏编程DirectX9编程2D小游戏源码冷风引擎CoolWind2D游戏引擎(11)
DX9贴图 先准备2张图片,蜘蛛为m1.png,单眼怪物为m2.png 创建一个Form1.frm,输入如下源码: Private Sub Form_Load()'新手注意:游戏编程中, '通常将窗体 ...
- DX9设备的一些方法介绍-------VB6编程学习DX9游戏编程DirectX9编程2D小游戏源码冷风引擎CoolWind2D游戏引擎(10)
DX9设备的一些方法介绍(IDirect3DDevice9) 1,IDirect3DDevice9::SetRenderState:设置单个设备渲染状态参数. C++源码调用如下: HRESULT S ...
最新文章
- 笔记-信息系统安全管理-网络安全防御
- 利用Java进行MySql数据库的导入和导出
- 百叶窗效果显示图片源码(c#)
- 利用fiddler给android模拟器抓包
- iphone储存空间系统怎么清理_如何清理iPhone的缓存,释放更多存储空间,这些方法你知道吗...
- 关于git远程版本库的一些问题之解决
- 测试员35岁以后找不到工作?问完了几千人后,我们得到了答案......
- localtime选择00:00值不回显_配置OSPF的DR选择示例
- rpgmv存档修改html_使用HTML5存档网站内容更改
- 经纬财富:徐州炒白银需要注意哪些技术指标
- pycharm双击打不开,无响应,下列第二种方法我亲测有效
- JavaEE程序猿面向对象世界观⑥
- 微信叫车系统|顺风车小程序|在线选座拼车订票APP【开发实战】
- 如何使用iAd在应用程序中展示Banne…
- Chrome 安装插件与使用技巧
- U盘安装 windows server 2012 R2 启动U盘制作
- 利用qwinsta和rwinsta察看连接到一个机器的连接数
- 好书读不完,常存常读常更新
- HDFS 概念之 block 详解
- CSDN文章:提示请设置内容等级