我的項目 6 js實現翻牌遊戲

我的項目 6 js實現翻牌遊戲

在我的項目中需要在裡面添加一個翻牌遊戲，就研究了一下，在這裡只實現了基本的效果。不多說，和大家分享一下。

說到翻牌遊戲，大致分為以下幾個步驟：

繪製正反面卡牌-------------->洗牌----------------------->翻牌------------------->翻牌判斷

這裡面應用的一些圖片，，，，，，額額額額，，，大家就自己下兩個試試，這裡也提供不了。。。嘿嘿

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=50var cy = first_y;//初始座標Y=10for ( 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; //notea_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; //notea_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-16j = Math.floor(Math.random() * deck_length);//0-16temp_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;//noteif (ev.layerX || ev.layerX == 0) {// Firefoxmx = ev.layerX;my = ev.layerY;} else if (ev.offsetX || ev.offsetX == 0) {// Operamx = 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;//notectx.drawImage(card.img, card.sx, card.sy, card.swidth, card.sheight);} else {first_pick = true;//notesecond_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;}}

全部代碼如下

test <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 = [];//卡牌數組//notevar first_x = 50;//初始座標Xvar first_y = 10;//初始座標Yvar 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=50var cy = first_y;//初始座標Y=10for ( 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; //notea_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; //notea_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-16j = Math.floor(Math.random() * deck_length);//0-16temp_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;//noteif (ev.layerX || ev.layerX == 0) {// Firefoxmx = ev.layerX;my = ev.layerY;} else if (ev.offsetX || ev.offsetX == 0) {// Operamx = 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;//notectx.drawImage(card.img, card.sx, card.sy, card.swidth, card.sheight);} else {first_pick = true;//notesecond_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>                 開始計時        
dddddddddddd
           

大家可以試試，挺有意思的。