three打造一个控制赛车不相撞的游戏代码-html代码-BFW代码库

代码语言：html

所属分类：游戏

代码描述：three打造一个控制赛车不相撞的游戏代码，按住键盘向上箭头开始，向下箭头减速，R键重新开始

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

<html lang="en">
<head>

    <meta charset="UTF-8">





    <style>
@import url("https://fonts.googleapis.com/css?family=Press+Start+2P");

        body {
            margin: 0;
            color: white;
            font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
        }

        button {
            outline: none;
            cursor: pointer;
            border: none;
            box-shadow: 3px 5px 0px 0px rgba(0, 0, 0, 0.75);
        }

        a,
        a:visited {
            color: inherit;
        }

        #score {
            position: absolute;
            font-family: "Press Start 2P", cursive;
            font-size: 0.9em;
            color: white;
            transform: translate(-50%, -50%);
            opacity: 0.9;
            max-width: 100px;
            text-align: center;
            line-height: 1.6em;
        }

        #controls {
            position: absolute;
            bottom: 50px;
            left: 50px;
            display: none;
        }

        #controls #buttons {
            width: 80px;
            opacity: 0;
            transition: opacity 2s;
        }

        #controls #instructions {
            margin-left: 20px;
            max-width: 300px;
            background-color: rgba(0, 0, 0, 0.2);
            padding: 20px;
            opacity: 0;
            transition: opacity 2s;
        }

        #controls button {
            width: 100%;
            height: 40px;
            background-color: white;
            border: 1px solid black;
            margin-bottom: 10px;
        }

        #results {
            position: absolute;
            align-items: center;
            justify-content: center;
            height: 100%;
            width: 100%;
            background-color: rgba(20, 20, 20, 0.75);
            display: none;
            z-index: 51;
        }

        #results .content {
            max-width: 350px;
            padding: 50px;
            border-radius: 20px;
        }

        #result-youtube {
            display: flex;
            background-color: white;
            padding: 20px;
            color: black;
            text-decoration: none;
            cursor: pointer;
        }

        #result-youtube span {
            margin-top: 5px;
            margin-left: 20px;
        }

        .youtube,
        #youtube-card {
            display: none;
            color: black;
        }

        #youtube-main {
            opacity: 0;
            transition: opacity 2s;
        }

@media (min-height: 425px) {
            #score {
                font-size: 1.5em;
                max-width: 150px;
            }

            #controls {
                display: flex;
            }

    </style>



</head>

<body >
    <div id="score" style="left: 212.711px; top: 329.5px;">
        Press UP
    </div>

    <div id="controls">
        <div id="buttons" style="opacity: 1;">
            <button id="accelerate">
                <svg width="30" height="30" viewBox="0 0 10 10">
                    <g transform="rotate(0, 5,5)">
                        <path d="M5,4 L7,6 L3,6 L5,4"></path>
                    </g>
                </svg>
            </button>
            <button id="decelerate">
                <svg width="30" height="30" viewBox="0 0 10 10">
                    <g transform="rotate(180, 5,5)">
                        <path d="M5,4 L7,6 L3,6 L5,4"></path>
                    </g>
                </svg>
            </button>
        </div>
        <div id="instructions" style="opacity: 1;">
            Press UP to start. Avoid collision with other vehicles by accelerating
            or decelerating with the UP and DOWN keys.
        </div>
    </div>

    <div id="results" style="display: none;">
        <div class="content">
            <h1>You hit another vehicle</h1>
            <p>
                To reset the game press R
            </p>

   
        
        </div>
    </div>

    <a id="youtube-main" class="youtube" target="_blank" style="opacity: 1;">
      
    </a>
 
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.126.js"></script>
    <script>
        /*

Three.js video tutorial explaining the source code

Youtube: https://youtu.be/JhgBwJn1bQw

In the tutorial, we go through the source code of this game. We cover, how to set up a Three.js scene with box objects, how to add lights, how to set up the camera, how to add animation and event handlers. We also add textures with HTML Canvas and learn how to draw 2D shapes in Three.js then how to turn them into extruded geometries.

Comparing to the tutorial this version has some extra features:
- trucks also pop up on the other track
- the extruded geometry also has a texture
- there are trees around the track
- shadows
- the game reacts to window resizing

Check out my YouTube channel for other game tutorials: https://www.youtube.com/channel/UCxhgW0Q5XLvIoXHAfQXg9oQ

*/

        window.focus(); // Capture keys right away (by default focus is on editor)

        // Pick a random value from an array
        function pickRandom(array) {
            return array[Math.floor(Math.random() * array.length)];
        }

        // The Pythagorean theorem says that the distance between two points is
        // the square root of the sum of the horizontal and vertical distance's square
        function getDistance(coordinate1, coordinate2) {
            const horizontalDistance = coordinate2.x - coordinate1.x;
            const verticalDistance = coordinate2.y - coordinate1.y;
            return Math.sqrt(horizontalDistance ** 2 + verticalDistance ** 2);
        }

        const vehicleColors = [
            0xa52523,
            0xef2d56,
            0x0ad3ff,
            0xff9f1c /*0xa52523, 0xbdb638, 0x78b14b*/];


        const lawnGreen = "#67C240";
        const trackColor = "#546E90";
        const edgeColor = "#725F48";
        const treeCrownColor = 0x498c2c;
        const treeTrunkColor = 0x4b3f2f;

        const wheelGeometry = new THREE.BoxBufferGeometry(12, 33, 12);
        const wheelMaterial = new THREE.MeshLambertMaterial({
            color: 0x333333
        });
        const treeTrunkGeometry = new THREE.BoxBufferGeometry(15, 15, 30);
        const treeTrunkMaterial = new THREE.MeshLambertMaterial({
            color: treeTrunkColor
        });

        const treeCrownMaterial = new THREE.MeshLambertMaterial({
            color: treeCrownColor
        });


        const config = {
            showHitZones: false,
            shadows: true,
            // Use shadow
            trees: true,
            // Add trees to the map
            c.........完整代码请登录后点击上方下载按钮下载查看