js实现切水果小游戏代码-html代码-BFW代码库

js实现切水果小游戏代码

代码语言：html

所属分类：游戏

代码描述：js实现切水果小游戏代码

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

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

<head>

  <meta charset="UTF-8">
  

  
  
  
<style>
html, body {
  margin: 0;
  padding: 0;
  touch-action: none;
  user-select: none;
}

.bg {
  position: absolute;
  z-index: 0;
  width: 100vw;
  height: 100vh;
  background: url(//repo.bfw.wiki/bfwrepo/image/5fac6eba1693e.png);
  background-size: cover;
  transform: scale(1.1);
}

canvas {
  position: relative;
  z-index: 1;
}

.header {
  position: fixed;
  z-index: 3;
  top: 0;
  left: 0;
  display: flex;
  justify-content: space-between;
  margin: 20px;
  padding: 13px 20px;
  font-size: 15px;
  font-family: Lato, Arial;
  color: #333;
  box-sizing: border-box;
  box-shadow: 0 2px 3px rgba(0, 0, 0, .1);
  background: rgba(255, 255, 255, .8);
  border-radius: 30px;
  width: calc(100% - 40px);
  text-transform: uppercase;
  
  &.game-over {
    color: transparent;
    background: black;

    &:before {
      content: "GAME OVER!";
      color: #fff;
      text-align: center;
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
    }
  }
}
</style>


</head>

<body translate="no" >
  <div class="bg"></div>
<canvas id="canvas"></canvas>
<div class="header">
  <div id="catched">
    Points: <span>0</span>
  </div>
  <div id="lost">
    Lost: <span>0</span>
  </div>
</div>

      <script >
/*--------------------
Utils
--------------------*/
const mapRange = (a, b, c, d, e) => {
  return (a - b) * (e - d) / (c - b) + d;
};
const lerp = (v0, v1, t) => {
  return v0 * (1 - t) + v1 * t;
};
const random = (min, max) => min + Math.random() * (max - min);


/*--------------------
                                                                Raf
                                                                --------------------*/
class Raf {
  constructor() {
    this.raf();
  }

  raf() {
    window.requestAnimationFrame(() => {
      const o = {};
      o.time = window.performance.now() / 1000;
      this.raf();
      if (this.onRaf) this.onRaf(o);
    });
  }}



/*--------------------
     Canvas
     --------------------*/
class Canvas extends Raf {
  constructor(obj) {
    super();
    this.canvas = document.getElementById(obj.id);
    this.ctx = this.canvas.getContext('2d');
    this.resize();
    this.events();
  }

  resize() {
    this.dpr = window.devicePixelRatio;
    this.canvas.style.width = `${window.innerWidth}px`;
    this.canvas.style.height = `${window.innerHeight}px`;
    this.canvas.width = window.innerWidth * this.dpr;
    this.canvas.height = window.innerHeight * this.dpr;
  }

  events() {
    window.addEventListener('resize', this.resize);
  }

  getCtx() {
    return this.ctx;
  }

  clear() {
    this.ctx.clearRect(0, 0, window.innerWidth * this.dpr, window.innerHeight * this.dpr);
  }

  onRaf() {
    this.clear();
  }}



/*--------------------
     Trail
     --------------------*/
class Trail extends Raf {
  constructor(obj) {
    super();
    Object.assign(this, obj);

    this.x = 0;
    this.y = 0;
    this.Trail = [];

    this.binds();
    this.events();
  }

  binds() {
    ['handleMouse', 'events', 'tail'].forEach(e => this[e] = this[e].bind(this));
  }

  handleMouse(e) {
    this.x = this.dpr * (e.clientX || e.touches[0].clientX);
    this.y = this.dpr * (e.clientY || e.touches[0].clientY);
  }

  events() {
    ['mousemove', 'touchstart', 'touchmove'].
    forEach(e => {
      window.addEventListener(e, this.handleMouse);
    });
  }

  tail() {
   .........完整代码请登录后点击上方下载按钮下载查看