JS小游戏之仙剑翻牌源码详解
网络编程 发布日期：2025/11/18 浏览次数：1
正在浏览：JS小游戏之仙剑翻牌源码详解
本文实例讲述了JS小游戏的仙剑翻牌源码，是一款非常优秀的游戏源码。分享给大家供大家参考。具体如下：
一、游戏介绍:
这是一个翻牌配对游戏，共十关。
1.游戏随机从42张牌中抽取9张进行游戏，每组为2张相同的牌，共18张牌。
2.连续翻到两张相同的为胜利，当9组全部翻到则过关。如不是翻到连续两张相同的，则需要重新翻。
3.游戏共有10关，在规定时间内通过为挑战成功。
4.如果某关在规定时间内没有通过，则会从当前关继续游戏。
5.游戏中的卡牌图片与音乐均为大宇公司所有。
6.需要支持html5的浏览器，chrome与firefox效果最好。
游戏图片：
完整实例代码点击此处本站下载。
二、Javascript部分：
/** 仙剑翻牌游戏
* Date: 2013-02-24
* Author: fdipzone
* Ver 1.0
*/
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();
}
}
// 开始游戏
start = function(){
reset();
create(cardnum);
show();
var curtime = turntime;
setHtml('livetime', curtime);
var et = setInterval(function(){
if(curtime==0){
clearInterval(et);
turnall();
set_event();
message('start', process);
return ;
}
if(curtime==turntime){
turnall();
}
curtime--;
setHtml('livetime', curtime);
}, 1000)
}
// 随机抽取N张牌
create = function(n){
carddata = [];
leveldata = [];
// 创建所有牌
for(var i=1; i<=total; 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.length; i++){
cardhtml += '<div class="cardplane">';
cardhtml += '<div class="card viewport-flip" id="card' + i + '">';
cardhtml += '<div class="list flip out"><img src="/UploadFiles/2021-04-02/card' + leveldata[i]['cardno'] + '.jpg">
相信本文所述对大家javascript游戏设计的学习有一定的借鉴价值。