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

代码语言:html

所属分类:视觉差异

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

代码标签: 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] =.........完整代码请登录后点击上方下载按钮下载查看

网友评论0