在我的项目中需要在里面添加一个翻牌游戏,就研究了一下,在这里只实现了基本的效果。不多说,和大家分享一下。
说到翻牌游戏,大致分为以下几个步骤:
绘制正反面卡牌-------------->洗牌----------------------->翻牌------------------->翻牌判断
这里面应用的一些图片,,,,,,额额额额,,,大家就自己下两个试试,这里也提供不了。。。嘿嘿
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(); } }
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; } }全部代码如下
<!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>大家可以试试,挺有意思的。
原文地址:http://blog.csdn.net/li_li_lin/article/details/39325093