本文实例讲述了JS小游戏的仙剑翻牌源码,是一款非常优秀的游戏源码。分享给大家供大家参考。具体如下:

一、游戏介绍:

这是一个翻牌配对游戏,共十关。

1.游戏随机从42张牌中抽取9张进行游戏,每组为2张相同的牌,共18张牌。
2.连续翻到两张相同的为胜利,当9组全部翻到则过关。如不是翻到连续两张相同的,则需要重新翻。
3.游戏共有10关,在规定时间内通过为挑战成功。
4.如果某关在规定时间内没有通过,则会从当前关继续游戏。
5.游戏中的卡牌图片与音乐均为大宇公司所有。
6.需要支持html5的浏览器,chrome与firefox效果最好。

游戏图片:

JS小游戏之仙剑翻牌源码详解

JS小游戏之仙剑翻牌源码详解

完整实例代码点击此处本站下载。

二、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游戏设计的学习有一定的借鉴价值。

华山资源网 Design By www.eoogi.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
华山资源网 Design By www.eoogi.com