canvas按住键盘左右键森林奔跑视觉差异效果代码-html代码-BFW代码库

canvas按住键盘左右键森林奔跑视觉差异效果代码

代码语言：html

代码描述：canvas按住键盘左右键森林奔跑视觉差异效果代码，按住鼠标左右键看看效果。

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

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

<head>

  <meta charset="UTF-8">
  

  
  
  
<style>
body {
 overflow: hidden;
}

.message {
 position: absolute;
 background: black;
 color: white;
 bottom: 50px;
 left: 50px;
 padding: .5rem 1rem;
}
</style>



</head>

<body>
  <canvas id="relics-canvas"></canvas>

<div class="message">
 Use arrow keys to move.
</div>

  
      <script >
!function () {
  let canvas = document.getElementById('relics-canvas');
  let context = canvas.getContext('2d');
  let width = canvas.width = window.innerWidth;
  let height = canvas.height = window.innerHeight;
  let trees = [];
  let numTrees = 100;
  let fl = 250;
  let vpX = canvas.width / 2;
  let vpY = canvas.height / 2;
  let floor = 50;
  let ax = 0;
  let ay = 0;
  let az = 0;
  let vx = 0;
  let vy = 0;
  let vz = 0;
  let gravity = 0.3;
  let friction = 0.95;

  function Tree() {
    this.x = 0;
    this.y = 0;
    this.xpos = 0;
    this.ypos = 0;
    this.zpos = 0;
    this.scaleX = 1;
    this.scaleY = 1;
    this.color = "#ffffff";
    this.alpha = 1;
    this.lineWidth = Math.random() * 4 + 1;
    this.branch = [];

    //generate some random branch positions
    this.branch[0] = -140 - Math.random() * 20;
    this.branch[1] = -30 - Math.random() * 30;
    this.branch[2] = Math.random() * 80 - 40;
    this.branch[3] = -100 - Math.random() * 40;
    this.branch[4] = -60 - Math.random() * 40;
    this.branch[5] = Math.random() * 60 - 30;
    this.branch[6] = -110 - Math.random() * 20;
  }

  Tree.prototype.draw = function (context) {
    context.save();
    context.translate(this.x, this.y);
    context.scale(this.scaleX, this.scaleY);

    context.lineWidth = this.lineWidth;
    // context.strokeStyle = utils.colorToRGB(this.color, this.alpha);
    context.beginPath();
    context.moveTo(0, 0);
    context.lineTo(0, this.branch[0]);
    context.moveTo(0, this.branch[1]);
    context.lineTo(this.branch[2],.........完整代码请登录后点击上方下载按钮下载查看