gsap实现切水果水果忍者小游戏代码-html代码-BFW代码库

gsap实现切水果水果忍者小游戏代码

代码语言：html

所属分类：游戏

代码描述：gsap实现切水果水果忍者小游戏代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">

  
  
<style>
@import url('https://fonts.googleapis.com/css2?family=Kdam+Thmor+Pro&display=swap');

html, body {
  margin:0;
  padding:0;
  width:100;
  height:100%;
}

body {
  overflow:hidden;
  background:url(https://images.unsplash.com/photo-1628006203055-b4aa5f6300f3?q=60&w=2000);
  background-size:cover;
  background-position:center;
}

div {
  position:absolute;
  left:0;
  top:0;
  user-select:none;
}

.stage-bg {
  background:linear-gradient(rgba(0,0,0,0) 77%,rgba(0,0,0,0.5));
}

.follower {
  font-size:150px;
  pointer-events:none;
}

.stage {
  width:100%;
  height:100%;
}

.score {
  font-size:40px;
  left:20px;
  top:10px;
  font-family: 'Kdam Thmor Pro', sans-serif;
  color:#fff;
}

.score .num {
  font-size:0.65em;
  color:#ccc;
}

.timer {
  font-size:85px;
  top:unset;
  bottom:115px;
  left:15px;
  display:flex;
}

.timer .face {
  overflow:hidden;
  width:65px;
  height:65px;
  border-radius:50%;
  left:10px;
  top:22px;
}

.timer .face .inner {
  left:-10px;
  top:-22px;
}

.replay {
  font-size:25px;
  width:200px;
  left:105px;
  top:35px;
  font-family: 'Kdam Thmor Pro', sans-serif;
  color:#fff;
}
</style>


  
  
</head>

<body translate="no">
  <div class="stage stage-bg"></div>
<div class="stage stage-fg"></div>
<div class="score"></div>
<div class="timer">
  <div class="replay"></div>
  <div class="outter">⏲️</div>
  <div class="face">
    <div class="inner">⏲️</div>
  </div>
</div>
<div class="follower">
  <div class="dagger">🗡️</div>
</div>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/gsap.3.11.0.js"></script>
      <script >
const stageBg = document.querySelector('.stage-bg');
const stageFg = document.querySelector('.stage-fg');
const score = document.querySelector('.score');
const timer = document.querySelector('.timer');
const veg = ['🫑', '🍅', '🥕', '🍆', '🥬', '🥔', '🥦', '🧅', '🧄', '🌶️', '🫛'];
const vegTLs = [];
const props = { x: 0, dir: 1 };
let vegNum = 0;
let pts = 0;
let timeScale = 1;

gsap.set('.follower', { filter: 'drop-shadow(30px 30px 4px rgba(0,0,0,0.1))' });
gsap.set('.dagger', { rotate: 125, xPercent: -50, yPercent: -55 });

window.onpointerdown = e => {
  gsap.timeline({ defaults: { duration: 0.3, ease: 'back.out(4)' } }).
  to('.dagger', { rotate: 200, xPercent: -30, scale: 0.8 }, 0).
  to('.follower', { filter: 'drop-shadow(5px 7px 2px rgba(0,0,0,0.3))' }, 0).
  add(() => {//check distance between veg and dagger
    const mark = document.createElement('div');
    stageFg.append(mark);
    gsap.fromTo(mark, { innerHTML: '🗯️', x: e.x + 84, y: e.y - 20, rotate: 'random(0,360)' }, { scale: 4, duration: 0.1, opacity: 0.5, onComplete: () => mark.remove() });
    for (const item of stageBg.children) {
      const dX = Math.abs(gsap.getProperty(item, 'x') - (e.x + 84));
      const dY = Math.abs(gsap.getProperty(item, 'y') - (e.y - 25));
      const dist = (dX + dY) / 2;
      if (dist < 60) {
        if (item..........完整代码请登录后点击上方下载按钮下载查看