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),
            guards: color(80, 70, 85),
            carriage: color(60, 50, 50),
            accent: color(230, 80, 60),
            windows: color(50, 50, 50, 20)
        };
        this.truckImage = this.getTruck();
        this.wheelImage = this.getWheel();
    };
    Truck.prototype = {
        getTruck: function() {
            background(0, 0, 0, 0);
            
            //curve brace under carriage
            stroke(this.colors.outline);
            strokeWeight(3);
            noFill();
            beginShape();
                vertex(380, 342);
                bezierVertex(380, 352, 375, 359, 366, 361);
                vertex(280, 361);
                bezierVertex(272, 359, 267, 352, 266, 342);
            endShape();
            
            //front bumper
            noStroke();
            fill(this.colors.outline);
            rect(454, 326, 73, 16);
            //line under front bumper
            stroke(this.colors.outline);
            noFill();
            beginShape();
                vertex(517, 336);
                vertex(517, 349);
                vertex(451, 363);
            endShape();
            
            //under carriage
            stroke(this.colors.guards);
            line(124, 337, 160, 337);
            stroke(this.colors.outline);
            fill(this.colors.carriage);
            beginShape();
                vertex(501, 271);
                vertex(502, 300);
                vertex(.........完整代码请登录后点击上方下载按钮下载查看