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

代码语言：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(464, 347);
                vertex(163, 347);
                vertex(125, 314);
                vertex(124, 269);
                vertex(500, 271);
            endShape(CLOSE);
            rect(307, 330, 29, 30);
            
            //springs
            stroke(this.colors.accent);
            for(var i = 0; i < 10; i++) {
                //rear
                line(191, 287 + i * 5, 206, 292 + i * 5);
                //front
                line(441, 287 + i * 5, 456, 292 + i * 5);
            }
            
            //spash guards
            stroke(this.colors.outline);
            fill(this.colors.guards);
            beginShape();
                vertex(120, 269);
                vertex(501, 269);
                vertex(502, 298);
                vertex(492, 292);
                bezierVertex(486, 289, 482, 289, 474, 288);
                vertex(431, 288);
                bezierVertex(423, 289, 418, 292, 414, 296);
                vertex(380, 333);
                vertex(263, 333);
                vertex(237, 299);
                bezierVertex(232, 293, 227, 293, 221, 293);
                vertex(181, 293);
                bezierVertex(173, 293, 169, 297, 166, 300);
                vertex(151, 319);
                vertex(120, 319);
            endShape(CLOSE);
            
            //circles on splash guard
            noStroke();
            fill(0);
            ellipse(490, 286, 5, 5);
            ellipse(476, 283, 5, 5);
            ellipse(457, 283, 5, 5);
            ellipse(439, 283, 5, 5);
            ellipse(420, 284, 5, 5);
            ellipse(408, 294, 5, 5);
            ellipse(398, 304, 5, 5);
            ellipse(388, 315, 5, 5);
            ellipse(378, 326, 5, 5);
            ellipse(265, 328, 5, 5);
            ellipse(257, 317, 5, 5);
            ellipse(249, 306, 5, 5);
            ellipse(241, 296, 5, 5);
            ellipse(231, 286, 5, 5);
            ellipse(216, 285, 5, 5);
            ellipse(202, 285, 5, 5);
            ellipse(185, 285, 5, 5);
            ellipse(170, 287, 5, 5);
            ellipse(159, 297, 5, 5);
            ellipse(150, 308, 5, 5);
            
            //inside of cabin
            noStroke();
            fill(this.colors.outline, 100);
            beginShape();
                vertex(119, 187);
                vertex(142, 187);
                vertex(142, 199);
                vertex(126, 199);
                vertex(126, 246);
                vertex(119, 246);
            endShape(CLOSE);
            
            beginShape();
                vertex(236, 246);
                vertex(236, 199);
                vertex(164, 199);
                vertex(164, 246);
                vertex(144, 246);
                vertex(144, 187);
                vertex(250, 187);
                vertex(250, 246);
            endShape(CLOSE);
            
            beginShape();
                vertex(340, 246);
                vertex(327, 199);
                vertex(278, 199);
                vertex(278, 246);
                vertex(263, 246);
                vertex(263, 187);
                vertex(339, 187);
                vertex(356, 246);
            endShape(CLOSE);
            
            //steering wheel
            stroke(this.colors.outline);
            strokeWeight(5);
            line(334, 227, 326, 246);
            
            //streaks on windows
            noStroke();
            fill(255, 100);
            quad(185, 186, 240, 245, 218, 245, 163, 186);
            quad(156, 186, 211, 245, 205, 245, 150, 186);
            quad(296, 186, 351, 245, 328, 245, 273, 186);
            quad(269, 186, 324, 245,.........完整代码请登录后点击上方下载按钮下载查看