js实现翻牌游戏

news/2024/11/8 2:44:50/

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

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

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

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

       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;}}
全部代码如下 

<!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 = [];//卡牌数组//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></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://www.ppmy.cn/news/218894.html

相关文章

Qt 在 VS2017 上的安装配置

Qt 在 VS2017 上的安装配置

Qt5.0 以上的版本可以较好地满足一些软件项目开发的要求&#xff0c;并且移植性强。Qt 中包含 很多库函数用来支持 UI 界面的设计开发。所以可选择 Qt 与 VS2017 相结合的 开发方式。由于 Qt 是安装在 VS2017 上的插件&#xff0c;所以需要下载相关的 vsaddin-msvc2017 插件。 …
阅读更多...
Qt的安装及配置

Qt的安装及配置

一、Qt的安装 1.下载链接 或者 网盘下载 链接: https://pan.baidu.com/s/15Fwh8kOtrj4GIIg6ptnb7A 提取码: uvar 2.先注册账号&#xff0c;用自己的qq邮箱就可(注意&#xff1a;密码要有数字和大小写字母) 3.看图 4. 第一个&#xff1a;通过在Q中启用发送假名使用统计数据来…
阅读更多...
QT5.14.2+VS2022配置MSVC2017

QT5.14.2+VS2022配置MSVC2017

VS2022安装注意事项 1.在单个组件里选中需要的编译器&#xff0c; 安装Qt 配置Qt kits 跳转链接吧&#xff0c;详细教程
阅读更多...
vs2019配置qt

vs2019配置qt

下载安装包路径&#xff1a;http://download.qt.io/archive/qt/&#xff0c;先安装qt。 VS配置&#xff1a;在扩展—管理扩展—联机中搜索Qt并安装。 安装重启VS后&#xff0c;在点击扩展&#xff0c;下面有一栏Qt VS Tools&#xff0c;点击后如下配置对应的插件版本即可。&am…
阅读更多...
vs2019中配置qt

vs2019中配置qt

vs2019配置qt vs2019配置qt vs2019配置qt下载vs2019下载qt5.9安装扩展配置qt版本 下载vs2019 百度网盘链接&#xff1a; 链接&#xff1a;https://pan.baidu.com/s/16M9jzHZnsi9jU5fWZYq-xg?pwd4pjp 提取码&#xff1a;4pjp 下载qt5.9 百度网盘链接&#xff1a; 链接&#…
阅读更多...
Visual Studio(VS2017/VS2019)配置C/C++-PostgreSQL完整开发环境

Visual Studio(VS2017/VS2019)配置C/C++-PostgreSQL完整开发环境

#开发环境# Visual Studio 2017[15.2(26430.16)] 下载地址&#xff1a;https://www.visualstudio.com/downloads/ PostgreSQL 9.6.3 下载地址&#xff1a;https://www.enterprisedb.com/downloads/postgres-postgresql-downloads #环境说明# 本[完整开发环境]适用于安装所有Po…
阅读更多...
Qt：Win10 + VS2017 配置 Qt5.9.8

Qt：Win10 + VS2017 配置 Qt5.9.8

一、安装AddIn&#xff08;两种方式&#xff09; 第一种方式&#xff1a;从VS2017中安装 &#xff08;1&#xff09;打开VS2017——工具——扩展和更新 &#xff08;2&#xff09;联机——搜索“qt”——下载——完成后&#xff0c;关闭当前窗口和VS &#xff08;3&#xff0…
阅读更多...
MatalbR2018a+VS2017+Windows10+CPU 配置MatConvNet

MatalbR2018a+VS2017+Windows10+CPU 配置MatConvNet

一、安装VS 根据自己Matlab的版本查看适配什么样的VS版本&#xff0c;比如下图中我可以看出我能适用VS2017&#xff0c;所以果断卸载了VS2019…… 根据自己安装的实际情况&#xff0c;添加下面的&#xff08;修改&#xff09;路径到系统变量的path&#xff1a; C:\Program Fi…
阅读更多...
最新文章

Copyright @ 2022~2023