canvas实现fj40越野车行驶在凹凸山坡路面动画效果代码-html代码-BFW代码库

canvas实现fj40越野车行驶在凹凸山坡路面动画效果代码

代码语言：html

所属分类：动画

代码描述：canvas实现fj40越野车行驶在凹凸山坡路面动画效果代码

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


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

<head>

  <meta charset="UTF-8">
  

  
  
  
<style>
* {
  margin: 0;
  box-sizing: border-box;
  overflow: hidden;
}

body {
  background: #77A1D1;
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
body canvas {
  box-shadow: 0.2em 0.2em 2em #0008;
  border: none;
  outline: none;
}
</style>


</head>

<body >
  <canvas id="canvas"></canvas>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/processing.min.js"></script>
  
      <script  >
var sketchProc = function(processingInstance) {
  with (processingInstance) {
    size(600, 600); 
    frameRate(60);    
    smooth();
    
var road, truck;

var keys = [];
keyPressed = function() {
    keys[keyCode] = true;
};
keyReleased = function() {
    keys[keyCode] = false;
};

var collision = function(wheel, track) {
    return dist(wheel.x, wheel.y, track.x, track.y) < wheel.diameter / 2;
};

var Truck = (function() {
    Truck = function(args) {
        this.x = args.x || 300;
        this.y = args.y || 200;
        this.w = args.w || 150;
        this.h = args.h || 100;
        this.vx = args.vx || 0;
        this.vy = args.vy || 0;
        this.gravity = args.gravity || 0.2;
        this.angle = 0;
        this.speed = {
            value: 7,
            min: 0,
            max: 20
        };
        this.wheels = [
            {
                x: this.x - this.w * 0.5,
                y: this.y,
                diameter: 57,
                circumference: PI * 58,
                angle: 0,
                vx: 0,
                vy: 0
            },
            {
                x: this.x + this.w * 0.5,
                y: this.y,
                diameter: 58,
                circumference: PI * 58,
                angle: 0,
                vx: 0,
                vy: 0
            }
        ];
        this.colors = {
            outline: color(55, 35, 25),
            body: color(250, 175, 65),
            roof: color(255, 255, 255).........完整代码请登录后点击上方下载按钮下载查看