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] =.........完整代码请登录后点击上方下载按钮下载查看
网友评论0