html5记忆翻牌游戏实现思路及代码
互联网 & 07-25 17:24:32 & 作者：佚名 &
主要功能实现翻开的2张牌如果配对就会消除，否则2张牌都会返回背面，下面为大家介绍一下需求分析及示例代码，感兴趣的朋友可以学习下
翻开的2张牌如果配对就会消除，否则2张牌都会返回背面。 需求分析 怎么绘制正的牌面和背的牌面及配对成功后怎么消除牌面 怎么生成牌组并且确定每张牌的位置和对应的图片 怎么洗牌 怎么记录牌组的配对信息 怎么确定点击事件是第一次点击还是第二次点击 作弊事件的处理：两次点击同一张牌 点击已经消除的牌面 点击牌面之外的区域 牌翻开之后需要给一定时间让玩家看清楚，怎么实现暂停 鼠标点击事件的响应及获得鼠标点击位置的坐标从而确定点击的是哪一张牌 MYCode: 代码如下: &html xmlns="http://www.w3.org/1999/xhtml"& &head& &meta charset="utf-8" /& &title&test &/title& &script type="text/javascript"&
var first_pick = //第一次点击的标志 var first_card = -1; var second_ var back_color = "rgb(255,0,0)"; //卡片背面颜色 var table_color = "#FFF"; var deck = []; //note var first_x = 10; var first_y = 50; var margin = 30; var card_width = 50; var card_height = 50; var pairs = [ ["1_a.jpg", "1_b.jpg"], ["2_a.jpg", "2_b.jpg"], ["3_a.jpg", "3_b.jpg"], ["4_a.jpg", "4_b.jpg"], ["5_a.jpg", "5_b.jpg"] ]; function draw_back()//绘制卡片背面 { ctx.fillStyle = back_ ctx.fillRect(this.sx, this.sy, this.swidth, this.sheight); } function Card(sx, sy, swidth, sheight, img, info)//构造函数 { this.sx = this.sy = this.swidth = this.sheight = this.info = this.img = this.draw = draw_ } function make_deck()//生成卡组并绘制 {
var a_ var b_ var a_ var b_ var cx = first_x; var cy = first_y; for (i = 0; i & pairs. i++) { a_pic = new Image(); a_pic.src = pairs[i][0]; a_card = new Card(cx, cy, card_width, card_height, a_pic, i); deck.push(a_card); 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 + //note a_card.draw(); b_card.draw(); } } function shuffle()//洗牌 {
var temp_ var temp_ var deck_length = deck.
for (k = 0; k & 3 * deck_ k++) { i = Math.floor(Math.random() * deck_length); j = Math.floor(Math.random() * deck_length); temp_info = deck[i]. temp_img = deck[i]. deck[i].info = deck[j]. deck[i].img = deck[j]. deck[j].info = temp_ deck[j].img = temp_ } } function choose(ev) { //
//var pick1; //var pick2;
//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. 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)//如果两次点击同一张牌不做处理
} } } if (i & deck.length) { if (first_pick)//如果是第一次点击 { first_card = first_pick = //note ctx.drawImage(card.img, card.sx, card.sy, card.swidth, card.sheight); } else { first_pick = //note second_card = 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_ 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; } 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(); } &/script& &/head& &body onLoad="init();"& &canvas id="canvas" width="400" height="400"/& 123142 &/body& &/html&
大家感兴趣的内容
12345678910
最近更新的内容JS小游戏之仙剑翻牌源码详解
这篇文章主要介绍了JS小游戏之仙剑翻牌源码,是一款比较经典的卡牌类游戏,对于javascript游戏设计有不错的借鉴价值,需要的朋友可以参考下
本文实例讲述了JS小游戏的仙剑翻牌源码，是一款非常优秀的游戏源码。分享给大家供大家参考。具体如下：
一、游戏介绍:
这是一个翻牌配对游戏，共十关。
1.游戏随机从42张牌中抽取9张进行游戏，每组为2张相同的牌，共18张牌。
2.连续翻到两张相同的为胜利，当9组全部翻到则过关。如不是翻到连续两张相同的，则需要重新翻。
3.游戏共有10关，在规定时间内通过为挑战成功。
4.如果某关在规定时间内没有通过，则会从当前关继续游戏。
5.游戏中的卡牌图片与音乐均为大宇公司所有。
6.需要支持html5的浏览器，chrome与firefox效果最好。
游戏图片：
完整实例代码点击此处本站下载。
二、Javascript部分：
/** 仙剑翻牌游戏
Author: fdipzone
window.onload = function(){
var gameimg = [
'images/start.png',
'images/success.png',
'images/fail.png',
'images/clear.png',
'images/cardbg.jpg',
'images/sword.png'
for(var i=1; i&=card.get_total(); i++){
gameimg.push('images/card' + i + '.jpg');
var callback = function(){
card.init();
img_preload(gameimg, callback);
/** card class */
var card = (function(total,cardnum){
var gametime = [0,65,60,55,50,45,40,35,30,25,20]; // 每关的游戏时间
var turntime = 8;
// 观看牌时间
var level = 1;
// 当前关卡
var carddata = [];
// 记录牌的数据
var leveldata = [];
// 当前关卡牌数据
var is_lock = 0;
// 是否锁定
var is_over = 0;
// 游戏结束
var first = -1;
// 第一次翻开的卡
var matchnum = 0;
// 配对成功次数
init = function(){
tips('show');
$('startgame').onclick = function(){
tips('hide');
// 开始游戏
start = function(){
create(cardnum);
var curtime =
setHtml('livetime', curtime);
var et = setInterval(function(){
if(curtime==0){
clearInterval(et);
turnall();
set_event();
message('start', process);
if(curtime==turntime){
turnall();
curtime--;
setHtml('livetime', curtime);
// 随机抽取N张牌
create = function(n){
carddata = [];
leveldata = [];
// 创建所有牌
for(var i=1; i&= i++){
carddata.push(i);
for(var i=0; i&n; i++){
var curcard = carddata.splice(Math.random()*carddata.length, 1).pop();
leveldata.push({'cardno':curcard,'turn':0}, {'cardno':curcard,'turn':0});
// 生成随机顺序游戏牌
leveldata = shuffle(leveldata);
show = function(){
var cardhtml = '';
for(var i=0; i&leveldata. i++){
cardhtml += '&div class="cardplane"&';
cardhtml += '&div class="card viewport-flip" id="card' + i + '"&';
cardhtml += '&div class="list flip out"&&img src="images/card' + leveldata[i]['cardno'] + '.jpg"&&/div&';
cardhtml += '&div class="list flip"&&img src="images/cardbg.jpg"&&/div&';
cardhtml += '&/div&';
cardhtml += '&/div&';
setHtml('gameplane', cardhtml);
// 全部翻转
turnall = function(){
for(var i=0; i&leveldata. i++){
turn_animate(i);
// 翻转动画
turn_animate = function(key){
var obj = $_tag('div', 'card' + key);
var cardfont,
if(getClass(obj[0]).indexOf('out')!=-1){
cardfont = obj[0];
cardback = obj[1];
cardfont = obj[1];
cardback = obj[0];
setClass(cardback, 'list flip out');
var et = setTimeout(function(){
setClass(cardfont, 'list flip in');
// 设置点击事件
set_event = function(){
var o = $_tag('div', 'gameplane');
for(var i=0,count=o. i& i++){
if(getClass(o[i])=='card viewport-flip'){
o[i].onclick = function(){
turn(this.id);
// 计时开始
process = function(){
is_lock = 0;
var curtime = gametime[level];
setHtml('livetime', curtime);
var et = setInterval(function(){
if(matchnum==cardnum){
clearInterval(et);
curtime--;
setHtml('livetime', curtime);
if(curtime==0){
clearInterval(et);
is_over = 1;
message('fail', start);
// 游戏讯息动画
message = function(type, callback){
is_lock = 1;
var message = $('message');
var processed = 0;
var opacity = 0;
var soundtime = {
'start': 1500,
'success': 4000,
'fail': 6000,
'clear': 4000
disp('message','show');
setClass(message,'message_' + type);
setOpacity(message, opacity);
setPosition(message, 'left', 0);
setPosition(message, 'top', 390);
if(type=='start'){
bgsound(type, true);
bgsound(type);
var et = setInterval(function(){
var message_left = getPosition(message,'left');
processed = processed + 25;
if(processed&=500 && processed&=750){
opacity = opacity+10;
setPosition(message, 'left', message_left + 30);
setOpacity(message, opacity);
}else if(processed&=soundtime[type] && processed&=soundtime[type]+250){
opacity = opacity-10;
setPosition(message, 'left', message_left + 35);
setOpacity(message, opacity);
}else if(processed&soundtime[type]+250){
disp('message','hide');
clearInterval(et);
if(typeof(callback)!='undefined'){
callback();
turn = function(id){
if(is_lock==1){
var key = parseInt(id.replace('card',''));
if(leveldata[key]['turn']==0){ // 未翻开
if(first==-1){ // 第一次翻
turn_animate(key);
leveldata[key]['turn'] = 1;
}else{ // 第二次翻
turn_animate(key);
leveldata[key]['turn'] = 1;
check_turn(key);
// 检查是否翻牌成功
check_turn = function(key){
is_lock = 1;
if(leveldata[first]['cardno']==leveldata[key]['cardno']){ // 配对成功
matchnum ++;
if(matchnum==cardnum){
var et = setTimeout(function(){
message('success', levelup);
first = -1;
is_lock = 0;
}else{ // 配对失败,将翻开的牌翻转
var et = setTimeout(function(){
turn_animate(first);
leveldata[first]['turn'] = 0;
turn_animate(key);
leveldata[key]['turn'] = 0;
first = -1;
if(is_over==0){
is_lock = 0;
levelup = function(){
if(level&gametime.length-1){
setHtml('level', level);
// 全部通关
clear = function(){
level = 1;
disp('levelplane','hide');
disp('process', 'hide');
setHtml('gameplane','');
message('clear',init);
// 音乐播放
bgsound = function(file, loop){
var id = 'audioplayer';
if(typeof(file)!='undefined'){
if(typeof(loop)=='undefined'){
var audiofile = [];
audiofile['mp3'] = 'music/' + file + '.mp3';
audiofile['ogg'] = 'music/' + file + '.ogg';
audioplayer(id, audiofile, loop);
audioplayer(id);
// 游戏玩法
tips = function(type){
disp('tips', type);
// 获取牌总数
get_total = function(){
// 重置参数
reset = function(){
disp('levelplane','show');
setHtml('level', level);
disp('process', 'show');
setHtml('livetime', '');
setHtml('gameplane', '');
is_lock = 1;
is_over = 0;
first = -1;
matchnum = 0;
相信本文所述对大家javascript游戏设计的学习有一定的借鉴价值。
Copyright (C) , All Rights Reserved.
版权所有 闽ICP备号
processed in 0.036 (s). 10 q(s)项目三 JavaScript记忆翻牌游戏开发方案_图文_百度文库
两大类热门资源免费畅读
续费一年阅读会员，立省24元！
项目三 JavaScript记忆翻牌游戏开发方案
Web设计师|
总评分3.5|
用知识赚钱
&&JavaScript记忆翻牌游戏开发方案
试读已结束，如果需要继续阅读或下载，敬请购买
定制HR最喜欢的简历
你可能喜欢javascript基础-翻牌游戏
时间： 01:17:13
&&&& 阅读：197
&&&& 评论：
&&&& 收藏：0
标签：&&&&&&&!DOCTYPE&html&PUBLIC&"-//W3C//DTD&XHTML&1.0&Transitional//EN"&"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&
&html&xmlns="http://www.w3.org/1999/xhtml"&
&meta&http-equiv="Content-Type"&content="text/&charset=utf-8"&/&
&title&找相同游戏&/title&
&script&language="javascript"&
var&pai=[1,1,2,2,3,3,4,4,5,5,6,6,7,7,8,8];
var&oneid=-1;
&&&& function&fanpai(id){
if(pai[id]==-1){
document.getElementById("img"+id).src="img/image"+pai[id]+".jpg";
if(flag){//翻第2张
if(pai[id]==pai[oneid]){
pai[id]=-1;
pai[oneid]=-1;
setTimeout("koupai("+id+","+oneid+")",600);
else{//翻第1张
checkSuccess();
//每次载入页面进行重新洗牌
function&xipai(){
for(i=0;i&16;i++){
var&a=Math.floor(Math.random()*16);
var&b=Math.floor(Math.random()*16);
temp=pai[a];
pai[a]=pai[b];
//第一次与第二次不相同，扣住两张牌
function&koupai(id,oneid){
document.getElementById("img"+id).src="img/image0.jpg";
document.getElementById("img"+oneid).src="img/image0.jpg";
//每次翻完两张相同的后，检验是否全部成功翻开
function&checkSuccess(){
for(var&i=0;i&16;i++){
if(pai[i]!=-1)
alert("恭喜，OK了");
location.reload();
&&&&&/script&
&body&bgcolor="#0000FF"&
&&&&&br&/&&br&/&
&&&&&h1&找相同游戏&/h1&
&&&&&&&&&br&/&
&&&& &table&
&&&&&&&&&tr&
&&&&&&&&&td&&img&src="img/image0.jpg"&id="img0"&onclick="fanpai(0)"/&&/td&
&&&&&&&&&td&&img&src="img/image0.jpg"&id="img1"&onclick="fanpai(1)"/&&/td&
&&&&&&&&&td&&img&src="img/image0.jpg"&id="img2"&onclick="fanpai(2)"/&&/td&
&&&&&&&&&td&&img&src="img/image0.jpg"&id="img3"&onclick="fanpai(3)"/&&/td&
&&&&&&&&&/tr&
&&&&&&&&&tr&
&&&&&&&&&td&&img&src="img/image0.jpg"&id="img4"&onclick="fanpai(4)"/&&/td&
&&&&&&&&&td&&img&src="img/image0.jpg"&id="img5"&onclick="fanpai(5)"/&&/td&
&&&&&&&&&td&&img&src="img/image0.jpg"&id="img6"&onclick="fanpai(6)"/&&/td&
&&&&&&&&&td&&img&src="img/image0.jpg"&id="img7"&onclick="fanpai(7)"/&&/td&
&&&&&&&&&/tr&
&&&&&&&&&tr&
&&&&&&&&&td&&img&src="img/image0.jpg"&id="img8"&onclick="fanpai(8)"/&&/td&
&&&&&&&&&td&&img&src="img/image0.jpg"&id="img9"&onclick="fanpai(9)"/&&/td&
&&&&&&&&&td&&img&src="img/image0.jpg"&id="img10"&onclick="fanpai(10)"/&&/td&
&&&&&&&&&td&&img&src="img/image0.jpg"&id="img11"&onclick="fanpai(11)"/&&/td&
&&&&&&&&&/tr&
&&&&&&&&&tr&
&&&&&&&&&td&&img&src="img/image0.jpg"&id="img12"&onclick="fanpai(12)"/&&/td&
&&&&&&&&&td&&img&src="img/image0.jpg"&id="img13"&onclick="fanpai(13)"/&&/td&
&&&&&&&&&td&&img&src="img/image0.jpg"&id="img14"&onclick="fanpai(14)"/&&/td&
&&&&&&&&&td&&img&src="img/image0.jpg"&id="img15"&onclick="fanpai(15)"/&&/td&
&&&&&&&&&/tr&
&&&&&&&&&/table&
&&&&&/center&
&script&language="javascript"&
&/html&标签：&&&&&&原文地址：http://.blog.51cto.com/3169
&&国之画&&&& &&&&chrome插件&&
版权所有 京ICP备号-2
迷上了代码！没有更多推荐了，
不良信息举报
举报内容：
JavaScript-翻牌游戏选关模式
举报原因：
原文地址：
原因补充：
最多只允许输入30个字
加入CSDN，享受更精准的内容推荐，与500万程序员共同成长！