<!--****************************************************************************************************
* 作者:鲲鹏击浪
* 学院:http://edu.51cto.com/lecturer/index/user_id-8897792.html
* 博客园:http://www.cnblogs.com/xietong/
* 微博:http://weibo.com/u/3203486241?source=blog&is_all=1
* 博客:http://blog.sina.com.cn/51jilang
* *************欢迎学习我的课程,关注我的博客等**************************************************************
* ***********************************************************************************************************-->
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
</head>
<body>
<canvas id="myCanvas" width="920" height="380" style="background-color:rgb(180,180,180)"></canvas>
<form id="f" name="f">
匹配对数: <input readonly="true" value="0" name="matcheCount" id="matcheCount"/>
<br /><span id="result"></span>
<br />玩家点击两张扑克牌,若边数相同则删除,边数不同则翻过去
</form>
<script type="text/javascript">
var startX = 20, startY = 20;//第一张牌的坐标
var hmargin = 30, vmargin = 20;//横向间距与纵向间距
var deck = [];//扑克数组
var firstPick = true;//是否第一张牌
var firstCard;//第一张牌的索引
var secondCard;//第二张牌的索引
var ctx;//画布对象
var polyRad = 30;//牌面图形外切圆半径
var tableColor="rgb(180,180,180)";//画布背景颜色
var cardBack=new Image();
var cardColor="rgb(255,255,255)";
var pollyColor="black";
var width = 4 * polyRad, height = 5 * polyRad;//扑克的长度与宽度;
var matched = false;//是否匹配
var StartTime;
var imagePaier = [["Images/dong.jpg", "Images/dong1.jpg"],
["Images/Heltea1.jpg", "Images/helta2.jpg"],
["Images/luo.jpg", "Images/luo1.jpg"],
["Images/mo.jpg", "Images/mo1.jpg"],
["Images/si.jpg", "Images/si1.jpg"],
["Images/qiu.jpg", "Images/qiu1.jpg"]];
function Card(x, y, w, h, src, paier)
{
this.src=src;
this.img;
this.x = x;
this.y = y;//坐标
this.w = w;
this.h = h;//宽高
this.drawback = drawBackCard;//绘制扑克方法
this.draw = drawCard;
this.del = DelCard;
this.paier = paier;
this.loadImage = loadImage();
}
function loadImage() {
var img = new Image();
img.src = this.src;
this.img = img;
}
function drawBackCard()
{
var that = this;
ctx.drawImage(cardBack, that.x, that.y, that.w, that.h)
}
function drawCard() {
if (this.img && this.img.complete && this.img.src != "") {
ctx.drawImage(this.img, this.x, this.y, this.w, this.h);
} else {
var that = this;
that.img = new Image();
that.img.src = that.src;
this.img.onload = function () {
ctx.drawImage(this, that.x, that.y, that.w, that.h)
}
}
}
function DelCard() {
ctx.fillStyle = tableColor;
ctx.fillRect(this.x, this.y, this.w, this.h);
}
function MakeDeck()
{
var cx = startX, cy = startY;
cardBack.onload = function () {
for (var i = 0; i < imagePaier.length; i++) {
var aCard = new Card(cx, cy, width, height, imagePaier[i][0],i);
aCard.drawback();
var bCard = new Card(cx, cy + height + vmargin, width, height, imagePaier[i][1],i);
bCard.drawback();
deck.push(aCard);
deck.push(bCard);
cx += width + hmargin;
}
shuffle();
}
}
//洗牌
function shuffle()
{
for (var i = 0; i < deck.length*3; i++)
{
var ai = Math.floor(Math.random() * deck.length);
var bi = Math.floor(Math.random() * deck.length);
if (ai != bi)
{
var temp = deck[ai].src;
var temppaier = deck[ai].paier;
deck[ai].src = deck[bi].src;
deck[ai].paier = deck[bi].paier;
deck[bi].src = temp;
deck[bi].paier = temppaier;
}
}
for (var i = 0; i < deck.length; i++)
{
deck[i].loadImage();
}
}
function choose(ev)
{
var point = mousePoint(ev);
var i = 0;
for (; i < deck.length; i++)
{
var card = deck[i];
if (point.x > card.x && point.x < card.x + width && point.y > card.y && point.y < card.y + height)
{
if (firstPick || i != firstCard)
{
if (firstPick) {
firstPick = false;
firstCard = i;
card.draw();
} else {
secondCard = i;
card.draw();
matched = deck[firstCard].paier == card.paier;
if (matched) {
var matcheCount = Number(document.getElementById("matcheCount").value);
matcheCount++;
document.getElementById("matcheCount").value = matcheCount;
if (matcheCount >= deck.length / 2) {
var time = new Date();
time = Number(time.getTime());
var totalTime = Math.floor(0.5 + (time - StartTime) / 1000);
document.getElementById("result").innerText = "你赢了,用时" + totalTime + "秒";
}
}
setTimeout(takeOver, 500);
}
break;
}
}
}
}
//翻牌或删除
function takeOver()
{
if (matched) {
deck[firstCard].del();
deck[secondCard].del();
deck[firstCard].x = -100;
deck[secondCard].x = -100;
} else {
deck[firstCard].drawback();
deck[secondCard].drawback();
}
firstPick = true;
}
//获取鼠标位置
function mousePoint(ev) {
var mx, my;
if (ev.layerX || ev.layerX == 0) {
mx = ev.layerX;
html5注意力游戏升级版
需积分: 9 29 浏览量
2016-06-17
17:33:41
上传
评论 1
收藏 253KB 7Z 举报
kunpengjilang
- 粉丝: 8
- 资源: 25
最新资源
- STM32单片机FPGA毕设电路原理论文报告一种具有传统中医针刺补泻手法的新型智能电针仪设计
- 2023-04-06-项目笔记 - 第七十七阶段 - 4.4.2.75全局变量的作用域-75 -2024.03.19
- VuforiaObjectScanner-8-3-8.apk.1.1.1
- 上下班打卡_日报_20240201-20240319.xlsx
- 创业天下3.5.500.apk
- POD-data.mat
- ZF逆变器课程电子档及源码
- FileZilla-3.66.5-win64-sponsored2-setup
- SourceTreeSetup-3.4.17
- Docker Desktop Installer
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈