6월 1일 단오절을 건너뛰고 함께 종쯔를 파자

자세한 내용은 "Early Summer Creative Contest"에 참여하고 있습니다. 자세한 내용은 Early Summer Creative Contest 를 참조하십시오 .

코드 블록

헛소리는 나중에 하고 체험링크로 먼저 가세요: zongzi.lovetime.top/

코드를 다시 입력합니다.

머리말

Duan (zong) 오후 (zi) 축제는 여전히 기억에 더 흥미 롭습니다.

지금과 달리 단오절은 '3일간의 휴가, 쉴 필요가 없다'는 기대만 존재한다.

기억으로는 그때 길가에 아무데나 볼 수 있었던 쑥을 한 움큼 베어내고, 단오절에 쑥을 걸고, 냄비에 계란, 오리알, 마늘 등을 삶아 먹었던 기억이 난다.

이제 "Dragon Boat Festival"이라는 한 문장만 있고 모든 것이 간단합니다.

많은 사람들에게 "무설탕 문화"의 발전과 함께 zongzi는 더 이상 Dragon Boat Festival의 표준이 아닙니다.

"Dig a Zongzi"는 Dragon Boat Festival & Zongzi의 쌍이 백만 포인트 지속되기를 바랍니다~

게임 배경

"Dig a Zongzi"는 매우 간단한 포인트 앤 클릭 게임으로 현재로서는 간단한 테스트를 클릭하기 위해 손가락이나 마우스를 사용하는 것이 좋습니다.

한 문장 요약: 제한된 시간 내에 드롭을 클릭하여 점수를 얻습니다.

두 문장 개요: 지정된 시간 내에 무작위 드롭을 클릭합니다. 만두 를 클릭 하면 점수가 1 증가하고 작은 몬스터 를 클릭하면 점수가 1 감소하고 블라인드 박스 주머니 를 클릭 하면 점수가 무작위로 증가하거나 감소합니다.

종쯔

악령을 쫓는 유물. 단오절이 열리는 곳에 반드시 종자가 있어야 합니다. zongzi를 먹으면 액막이를 물리치고 역병을 쫓을 수 있으며, 포인트를 높이는 첫 번째 선택 입니다.

작은 괴물

작은 괴물은 원래 정글에서 행복하게 자유롭게 살았고, 역병의 신이 왔을 때 불행하게도 악령에 사로 잡혔습니다. 조심해서 피하세요. 중소형 포인트가 줄어듭니다 .

블라인드 박스 향 주머니

향낭은 원래 액막이를 쫓아내는 효과가 있어 그 자리에 큰 점이 터질 가능성이 있다. 그러나 향낭은 '스모그'라는 의심스러운 이름으로 오염되었기 때문에 '블라인드 박스'의 특성을 가지고 있다 .

요컨대, 블라인드 박스 봉지를 클릭하면 랜덤 포인트가 증가/감소할 수 있는 기회가 있으며, 모험 과 행운 버프 의 축복으로 포인트는 항상 크게 변경됩니다 .

기술 선택

코드 의 너겟 은 한동안 온라인 상태였습니다. 해봅시다! 가장 간단하게 사용하기 위해 오랫동안 사용하지 않은 jQuery를 축복으로 선택했습니다.

기본 로직의 개선을 고려하여 Vue/PixiJS로 다시 구현할 계획입니다. 음, 물론 계획이 의미하는 바를 이해해야 합니다.

핵심 노트

지루한 코드는 항상 매력적이므로 드롭 앤 클릭 로직에 대해 간단히 설명하겠습니다. 관심이 있는 경우 Nuggets에 위 코드에 대한 완전한 코드가 있습니다.

전리품을 떨어 뜨리다

게임의 핵심 존재로서 드랍된 오브젝트는 항상 이름이 있기 때문에 이름을 짓는데 많은 노력을 들이고 이름을 * 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를 오랫동안 사용하지 않았지만 셔틀로 간단한 문제를 해결하는 데 여전히 강력합니다.

Zongzi를 파다'의 원래 아이디어는 포인트가 바뀌면서 아래에 용선의 길이가 증감하는 애니메이션을 그리는 것입니다. 곰곰히 생각해보니 기간한정 게임에서 이게 좀 맛이 없나? (주인공량이 작지않음) 음 그래서 경기가 끝난 직후에 드래곤보트를 보여드렸는데 모두들 건승하시고 건강하세요~

블라인드 박스는 위험하므로 주의해서 다루어야 합니다.