canvas实现鼠标控制方向2公里比赛游戏-html代码-BFW代码库

代码语言：html

所属分类：游戏

代码描述：canvas实现鼠标控制方向2公里比赛游戏，纯js实现canvas游戏，无需第三方库

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">


</head>

<body style='margin:0;overflow:hidden'>
    <canvas id="c"></canvas>

    <script>
    //  HUE JUMPER - By Frank Force
    //  A 3D racing game in 2 Kilobytes!
    //
    //  Click = Start
    //  Mouse = Turn
    //  Double Click = Jump
    //
    //  The road ends at 1000...


    // draw settings
    const context = c.getContext`2d`; // canvas context
    const drawDistance = 800;         // how far ahead to draw
    const cameraDepth = 1;            // FOV of camera
    const segmentLength = 100;        // length of each road segment
    const roadWidth = 500;            // how wide is road
    const curbWidth = 150;            // with of warning track
    const dashLineWidth = 9;          // width of the dashed line
    const maxPlayerX = 2e3;           // limit player offset
    const mountainCount = 30;         // how many mountains are there
    const timeDelta = 1/60;           // inverse frame rate
    const PI = Math.PI;               // shorthand for Math.PI

    // player settings
    const height = 150;               // high of player above ground
    const maxSpeed = 300;             // limit max player speed
    const playerAccel = 1;            // player forward acceleration
    const playerBrake = -3;           // player breaking acceleration
    const turnControl = .2;           // player turning rate
    const jumpAccel = 25;             // z speed added for jump
    const springConstant = .01;       // spring players pitch
    const collisionSlow = .1;         // slow down from collisions
    const pitchLerp = .1;             // rate camera pitch changes
    const pitchSpringDamp = .9;       // dampen the pitch spring
    const elasticity = 1.2;           // bounce elasticity
    const centrifugal = .002;         // how much turns pull player
    const forwardDamp = .999;         // dampen player z speed
    const lateralDamp = .7;           // dampen player x speed
    const offRoadDamp = .98;          // more damping when off road
    const gravity = -1;               // gravity to apply in y axis
    const cameraTurnScale = 2;        // how much to rotate camera
    const worldRotateScale = .00005;  // how much to rotate world

    // level settings
    const maxTime = 20;               // time to start
    const checkPointTime = 10;        // add time at checkpoints
    const checkPointDistance = 1e5;   // how far between checkpoints
    const maxDifficultySegment = 9e3; // how far until max difficulty
    const roadEnd = 1e4;              // how far until end of road

    //////////////////////////////////////////////////////////////////
    // mouse input
    //////////////////////////////////////////////////////////////////

    mouseDown     =
    mousePressed  =
    mouseUpFrames =
    mouseX        = 0;

    onmouseup   =e=> mouseDown = 0;
    onmousedown =e=> mousePressed ? mouseDown = 1 : mousePressed = 1;
    onmousemove =e=> mouseX = e.x/window.innerWidth*2 - 1;

    //////////////////////////////////////////////////////////////////
    // math and helper functions
    //////////////////////////////////////////////////////////////////

    Clamp     =(v, a, b)  => Math.min(Math.max(v, a), b);
    ClampAngle=(a)        => (a+PI) % (2*PI) + (a+PI<0? PI : -PI);
        Lerp=(p, a, b)=> a + Clamp(p, 0, 1) * (b-a);
        R         =(a=1, b=0) => Lerp((Math.sin(++randSeed)+1)*1e5%1,a,b);
        LSHA      =(l,s=0,h=0,a=1)=>`hsl(${h+hueShift},${s}%,${l}%,${a})`;

        // simple 3d vector class
        class Vec3
        {
        constructor(x=0, y=0, z=0) {this.x = x; this.y = y; this.z = z;}

        Add=(v)=>(
        v = v < 1e5 ? new Vec3(v,v,v) : v,
            new Vec3( this.x + v.x, this.y + v.y, this.z + v.z ));

            Multiply=(v)=>(
            v = v < 1e5 ? new Vec3(v,v,v) : v,
                new Vec3( this.x * v.x, this.y * v.y, this.z * v.z ));
                }

                // draw a trapazoid shaped poly
                DrawPoly=(x1, y1, w1, x2, y2, w2, fillStyle)=>
                {
                context.beginPath(context.fillStyle = fillStyle);
                context.lineTo(x1-w1, y1|0);
 .........完整代码请登录后点击上方下载按钮下载查看