首页 > 代码库 > 我的项目 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=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=http://www.mamicode.com/"flower.png">
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=http://www.mamicode.com/"./js/jquery.min.js"></script>>大家可以试试,挺有意思的。



  


我的项目 6 js实现翻牌游戏