码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2014-09-16 23:45:01      阅读:290      评论:0      收藏:0      [点我收藏+]

标签:html5   js   canvas   

在我的项目中需要在里面添加一个翻牌游戏,就研究了一下,在这里只实现了基本的效果。不多说,和大家分享一下。

说到翻牌游戏,大致分为以下几个步骤:

   绘制正反面卡牌-------------->洗牌----------------------->翻牌------------------->翻牌判断

这里面应用的一些图片,,,,,,额额额额,,,大家就自己下两个试试,这里也提供不了。。。嘿嘿

       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>
大家可以试试,挺有意思的。



  


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

标签:html5   js   canvas   

原文地址:http://blog.csdn.net/li_li_lin/article/details/39325093

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!