在我的项目中需要在里面添加一个翻牌游戏，就研究了一下，在这里只实现了基本的效果。不多说，和大家分享一下。
说到翻牌游戏，大致分为以下几个步骤：
绘制正反面卡牌-------------->洗牌----------------------->翻牌------------------->翻牌判断
这里面应用的一些图片，，，，，，额额额额，，，大家就自己下两个试试，这里也提供不了。。。嘿嘿
1.绘制正反面卡牌
function make_deck()//生成卡组并绘制
{
var i;//
var a_card;//a组卡牌容器
var b_card;//b组卡牌容器
var a_pic;//a组卡牌图片
var b_pic;//b组卡牌图片
var cx = first_x;//初始坐标X=50
var cy = first_y;//初始坐标Y=10
for ( i = 0; i < pairs.length/2; i++) {
/*Canvas绘制图片
* var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
var img=new Image()
img.src="flower.png"
cxt.drawImage(img,0,0);*/
a_pic = new Image();
a_pic.src = pairs[i][0];
//绘制卡牌a组
a_card = new Card(cx, cy, card_width, card_height, a_pic, i);//给卡牌属性即卡牌对象生成了，并绘制了背面
deck.push(a_card);//将a组卡牌装进数组deck[]
//绘制与之a组卡牌面相同的b组
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);// 将b组卡牌装进数组deck[]
cx = cx + card_width + margin;
//cy = cy + card_height + margin;
//note
a_card.draw();
b_card.draw();
}
//绘制后两排
cx=first_x;
cy=first_y+card_height*2+margin*2;
for ( i = 4; i < pairs.length; i++) {
a_pic = new Image();
a_pic.src = pairs[i][0];
//绘制卡牌a组
a_card = new Card(cx, cy, card_width, card_height, a_pic, i);
deck.push(a_card);
//绘制与之a组卡牌面相同的b组
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;
//cy = cy + card_height + margin;
//note
a_card.draw();
b_card.draw();
}
}
2.洗牌
function shuffle()//洗牌
{
var i;
var j;
var temp_info;
var temp_img;
var deck_length = deck.length;
var k;
for ( k = 0; k < 9 * deck_length; k++) {
i = Math.floor(Math.random() * deck_length);//0-16
j = Math.floor(Math.random() * deck_length);//0-16
temp_info = deck[i].info;//第1张
temp_img = deck[i].img;//第1张图片
deck[i].info = deck[j].info;
deck[i].img = deck[j].img;
deck[j].info = temp_info;
deck[j].img = temp_img;
}
}
3.翻牌判断
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)//如果是第一次点击
{
window.addEventListener("load",function(){
var myaudio=document.getElementByIdx_x("a1");
myaudio.volume=0.5;//表示的是播放音量为一半
myaudio.play();
alert("shengyin");
});
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;
gg();
} else {
deck[first_card].draw();
deck[second_card].draw();
first_card = -1;
}
}
全部代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>test </title>
<script type="text/javascript" src="./js/jquery.min.js"></script>
<script type="text/javascript">
var i=0;//计时用到
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 = 50;//初始坐标X
var first_y = 10;//初始坐标Y
var margin = 30;//卡牌余卡牌之间的间距
var card_width = 100;//卡牌的宽
var card_height = 100;//卡牌的高
//定义卡牌正面图片
var pairs = [["img/1_a.png", "img/1_b.png"],["img/2_a.png", "img/2_b.png"], ["img/3_a.png", "img/3_b.png"], ["img/4_a.png", "img/4_b.png"], ["img/5_a.png", "img/5_b.png"], ["img/6_a.png", "img/6_b.png"], ["img/7_a.png", "img/7_b.png"], ["img/8_a.png", "img/8_b.png"]];
//绘制卡片背面
function draw_back()
{
ctx.fillStyle = back_color;
ctx.fillRect(this.sx, this.sy, this.swidth, this.sheight);
}
//定义牌的属性：x,y坐标，长宽，背景图片，信息
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;//a组卡牌容器
var b_card;//b组卡牌容器
var a_pic;//a组卡牌图片
var b_pic;//b组卡牌图片
var cx = first_x;//初始坐标X=50
var cy = first_y;//初始坐标Y=10
for ( i = 0; i < pairs.length/2; i++) {
/*Canvas绘制图片
* var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
var img=new Image()
img.src="flower.png"
cxt.drawImage(img,0,0);*/
a_pic = new Image();
a_pic.src = pairs[i][0];
//绘制卡牌a组
a_card = new Card(cx, cy, card_width, card_height, a_pic, i);//给卡牌属性即卡牌对象生成了，并绘制了背面
deck.push(a_card);//将a组卡牌装进数组deck[]
//绘制与之a组卡牌面相同的b组
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);// 将b组卡牌装进数组deck[]
cx = cx + card_width + margin;
//cy = cy + card_height + margin;
//note
a_card.draw();
b_card.draw();
}
//绘制后两排
cx=first_x;
cy=first_y+card_height*2+margin*2;
for ( i = 4; i < pairs.length; i++) {
a_pic = new Image();
a_pic.src = pairs[i][0];
//绘制卡牌a组
a_card = new Card(cx, cy, card_width, card_height, a_pic, i);
deck.push(a_card);
//绘制与之a组卡牌面相同的b组
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;
//cy = cy + card_height + 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 < 9 * deck_length; k++) {
i = Math.floor(Math.random() * deck_length);//0-16
j = Math.floor(Math.random() * deck_length);//0-16
temp_info = deck[i].info;//第1张
temp_img = deck[i].img;//第1张图片
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)//如果是第一次点击
{
window.addEventListener("load",function(){
var myaudio=document.getElementByIdx_x("a1");
myaudio.volume=0.5;//表示的是播放音量为一半
myaudio.play();
alert("shengyin");
});
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;
gg();
} 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();//洗牌
}
function jishi(){
//alert("----------")
i++;
//alert(i)
document.getElementById("p1").innerHTML=i
//alert("----------")
if(i>60){
init();
document.getElementById("p1").innerHTML="时间到"
}
}
$(window).ready(function(){
init();
$("#start").click(function(){
setInterval("jishi()", 1000);
});
});
</script>
</head>
<body>
<div>
<div >
<canvas id="canvas" width="600" height="550" style="border: 1px solid;"/>
<audio id="a1" src="../music/nvEQ.mp3" ></audio>
</div>
<button id="start">开始计时</button>
<p id="p1">dddddddddddd</p>
</div>
<section id="game">
<div id="cards">
<div class="card">
<div class="face front"></div>
<div class="face back"></div>
</div> <!-- .card -->
</div> <!-- #cards -->
</section> <!-- #game -->
<!--<audio id='soundtrack'>
<source src='sounds/soundtrack.mp3' type='audio/mp3'>
<source src='sounds/soundtrack.ogg' type='audio/ogg'>
</audio>
<audio id='chimes-sound' >
<source src='sounds/chimes.mp3' type='audio/mp3'>
<source src='sounds/chimes.ogg' type='audio/ogg'>
</audio>
<audio id='whistle-down-sound' >
<source src='sounds/whistledown.mp3' type='audio/mp3'>
<source src='sounds/whistledown.ogg' type='audio/ogg'>
</audio>
<audio id='thud-sound' >
<source src='sounds/thud.mp3' type='audio/mp3'>
<source src='sounds/thud.ogg' type='audio/ogg'>
</audio>
<audio id='jump-sound' >
<source src='sounds/jump.mp3' type='audio/mp3'>
<source src='sounds/jump.ogg' type='audio/ogg'>
</audio>
<audio id='plop-sound' >
<source src='sounds/plop.mp3' type='audio/mp3'>
<source src='sounds/plop.ogg' type='audio/ogg'>
</audio>
<audio id='coin-sound' >
<source src='sounds/coin.mp3' type='audio/mp3'>
<source src='sounds/coin.ogg' type='audio/ogg'>
</audio>
<audio id='explosion-sound' >
<source src='sounds/explosion.mp3' type='audio/mp3'>
<source src='sounds/explosion.ogg' type='audio/ogg'>
</audio> -->
</body>
</html>
大家可以试试，挺有意思的。
时间： 2024-10-10 08:36:02