6月1日のドラゴンボートフェスティバルをスキップして、一緒にちまきを掘りましょう

詳しくは「初夏クリエイティブコンテスト」に参加しておりますので、早夏クリエイティブコンテストをご覧ください。

コードブロック

後でナンセンスを入れて、最初に体験リンクにアクセスしてください：zongzi.lovetime.top/

コードをもう一度入力してください。

序文

ドゥアン（ゾン）アフタヌーン（ジ）フェスティバルは、記憶に残る興味深いものです。

今とは異なり、ドラゴンボートフェスティバルでは、「3日間の休日、休憩の必要はありません」という期待しかありません。

私の記憶では、その時道端で見られた一握りのよもぎを切り、ドラゴンボートフェスティバルによもぎを吊るし、卵、アヒルの卵、ニンニクなどの鍋を調理しました。

今では「ドラゴンボートフェスティバル」という一文しかなく、すべてがシンプルです。

多くの人々にとって、「ゼロシュガーカルチャー」の発展に伴い、zongziはもはやドラゴンボートフェスティバルの標準ではありません。

「DigaZongzi」は、ドラゴンボートフェスティバルとZongziのペアが100万ポイント続くことを望んでいます〜

ゲームの背景

「DigaZongzi」は非常にシンプルなポイントアンドクリックゲームです。現在、指やマウスを使って簡単なテストをクリックしても問題ありません。

一文の要約：限られた時間内に、ドロップをクリックしてポイントを獲得します。

2文の概要：指定された時間内にランダムなドロップをクリックします。餃子をクリックしてスコアを1増やし、小さなモンスターをクリックしてスコアを1減らし、ブラインドボックスの小袋をクリックしてスコアをランダムに増減します。

ちまき

悪霊を追い払うアーティファクト。 ドラゴンボートフェスティバルが登場する場所には、ちまきが必要です。ちまきを食べることは悪と悪魔払いの疫病を防ぐことができ、それはポイントを増やすための最初の選択肢です。

小さな怪物

小さな怪物はもともとジャングルの中で楽しく自由に暮らしていましたが、疫病の神がやってきたとき、残念ながら悪霊に取り憑かれていました。慎重に避けてください。中小のポイントが減ります。

ブラインドボックスサシェ

小袋はもともと悪霊を追い出す効果があり、その点で大きな点が爆発する可能性があります。しかし、小袋は「スモッグ」の疑いのある名前で汚染されていたため、「ブラインドボックス」の特徴があります。つまり、小袋をクリックすると、未知のポイントを減らすチャンスがあります。

要するに、ブラインドボックスの小袋をクリックすると、ランダムなポイントが増減する可能性があり、冒険と運のバフの祝福の下でポイントは常に大きく変化します。

技術的な選択

コードのナゲッツはしばらくの間オンラインになっています、やってみましょう！最も簡単な使い方として、長い間使われていなかったjQueryを祝福に選びました。

基本ロジックの改善を考慮し、Vue/PixiJSで再度実装する予定です。もちろん、計画の意味を理解する必要があります。

コアノート

退屈なコードは常に魅力的であるため、ドロップアンドクリックロジックについて簡単に説明しましょう。興味がある場合は、ナゲッツの上記のコードに完全なコードがあります。

戦利品をドロップ

ゲームのコア存在として、ドロップされたオブジェクトには常に名前が付いているため、名前を付けるのに多大な労力を要し、* DROP LOOT *と呼ぶことにしました。次に、定義したメインモジュールをそれと呼びますDROP_LOOT。

function DROP_LOOT () {
  this.speed = ''; // drop运动总时长,animate缓动
  this.x = ''; // drop起始x坐标
  this.y = ''; // drop起始y坐标
}
复制代码

各ドロップには、ランダムなデータセット、初期作成、およびeasingイージングによるドロップアニメーションのバインドが必要です。

// 基础范围随机数生成
DROP_LOOT.prototype.randomNum = function (min, max) { 
  return parseInt(Math.random() * (max - min + 1) + min, 10)
}
​
// 初始化基础数据
DROP_LOOT.prototype.basic = function () {
  this.x = parseInt(this.randomNum(0, RX)); 
  this.y = parseInt(this.randomNum(70, 300));
  this.speed = this.randomNum(3000, 5000);
}
​
// 随机生成当前掉落物是粽子/小怪兽/盲盒香囊
DROP_LOOT.prototype.theme = function (num) {
  var themeNum = num || parseInt(this.randomNum(0, 2));
  switch (themeNum) {
    case 0:
      return 'drop01';
      break;
    case 1:
      return 'drop02';
      break;
    case 2:
      return 'drop03';
      break;
  }
}
​
// 创建掉落物DOM，并插入到HTML容器内
DROP_LOOT.prototype.bindDom = function () {
  var lock = 0;
  var luck = this.theme();
  if (luck === 'drop01') {
    lock = 1;
  } else if (luck === 'drop02') {
    lock = 0;
  } else {
    lock = this.randomNum(2, 20)
  }
​
  var pkDom = $('<div class="drop ' + luck + '" data-luck="' + luck + '" data-rom=' + lock + '></div>');
  pkDom.css({ 'left': this.x + 'px', 'top': '-' + this.y + 'px' });
  pkDom.animate({ top: RY }, this.speed, this.eases(), function () {
    $(this).remove();
  });
  var _that = this;
  pkDom.on('click touchstart', function (e) {
    // e.preventDefault();
    var curLuck = $(this).attr('data-luck');
    var curRom = $(this).attr('data-rom');
    var num = parseInt(curRom) % 3;
    var action = parseInt(curRom) % 2 === 0 ? 'increase' : 'reduce';
    if (curLuck === 'drop01') {
      num = 1;
      action = 'increase';
    } else if (curLuck === 'drop02') {
      num = 1;
      action = 'reduce';
    }
    _that.grade(num, action);
    var pageX=$(this).offset().left;
    var pageY=$(this).offset().top;
    _that.fraction(pageX, pageY, num, action);
​
    if (num) {
      if (action === 'reduce') {
        $(this).addClass('boom');
      } else {
        $(this).addClass('cool');
      }
    }
    setTimeout(function () {
      $(this).remove();
    }.bind(this), 200)
    return false;
​
  });
  $('.container').append(pkDom);
}
复制代码

クリックロジック

jQuery互換のマウスおよびフィンガークリック表記。

pkDom.on('click touchstart', function (e) {
  // ...一些逻辑
  // 获取点击点的坐标
  var pageX=$(this).offset().left;
  var pageY=$(this).offset().top;
  return false;
});
复制代码

ヒットしたときに単純なクレジットの増加/減少キューアニメーションを追加します。

// 得分效果动画
DROP_LOOT.prototype.fraction = function (pageX, pageY, num, action) {
  var fractionText = '';
  if (!num || num === 0) {
    fractionText = '空盒子'
  }
  fractionText = action === 'increase' ? '+' + num : '-' + num;
  var fractionDom = $('<div class="fraction">' + fractionText + '</div>');
  fractionDom.css({ 'left': pageX + 'px', 'top': pageY + 'px', 'opacity': 1 });
  fractionDom.animate({ top: '-300px', opacity: 0 }, 3000, 'swing', function () {
    $(this).remove();
  });
  $('.container').append(fractionDom);
}
复制代码

ポイントをヒットするたびに、ポイントに変化があった場合、異なるクラスを追加することで、落下するオブジェクトを制御して、異なる背景画像を表示できます。

if (num) {
  if (action === 'reduce') {
    $(this).addClass('boom');
  } else {
    $(this).addClass('cool');
  }
}
复制代码

最後に書く

私は長い間jQueryを使用していませんが、シャトルを使用して単純な問題を解決することは依然として非常に強力です。

「DigaZongzi」の元々のアイデアは、ポイントが変化する間、下のドラゴンボートの長さの増減のアニメーションを描くことです。考えてみたら、期間限定のゲームではちょっと味がないのでしょうか？（主な作業量は少なくありません）えーと、ゲーム終了直後にドラゴンボートを見せて、みんなの幸運と健康を祈っています〜

ブラインドボックスは危険であり、注意して取り扱う必要があります。