three+cannon实现三维方块搭积木游戏效果代码-html代码-BFW代码库

代码语言：html
所属分类：游戏
代码描述：three+cannon实现三维方块搭积木游戏效果代码，
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="UTF-8">




    <style>
        @import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@900&display=swap");
        
        body {
          margin: 0;
          color: white;
          font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
          cursor: pointer;
        }
        
        #instructions {
          display: none;
        }
        
        #results,
        body:hover #instructions {
          position: absolute;
          display: flex;
          align-items: center;
          justify-content: center;
          height: 100%;
          width: 100%;
          background-color: rgba(20, 20, 20, 0.75);
        }
        
        a:visited {
          color: inherit;
        }
        
        #results {
          display: none;
          cursor: default;
        }
        
        #results .content,
        #instructions .content {
          max-width: 300px;
          padding: 50px;
          border-radius: 20px;
        }
        
        #results {
        }
        
        #score {
          position: absolute;
          color: white;
          font-size: 3em;
          font-weight: bold;
          top: 30px;
          right: 30px;
        }
        
        #youtube,
        #skillshare,
        #youtube-card,
        #skillshare-card {
          display: none;
          color: black;
        }
        
        @media (min-height: 425px) {
          /** Youtube logo by https://codepen.io/alvaromontoro */
          #youtube,
          #skillshare {
            z-index: 50;
            width: 100px;
            height: 70px;
            position: fixed;
            bottom: 20px;
            transform: scale(0.8);
            transition: transform 0.5s;
          }
        
          #youtube {
            display: block;
            background: red;
            right: 20px;
            border-radius: 50% / 11%;
          }
        
          #skillshare {
            display: block;
            left: 20px;
            color: white;
            font-size: 1.8em;
            font-weight: extra-bold;
            font-family: "Montserrat", sans-serif;
            text-decoration: none;
          }
        
          #youtube:hover,
          #youtube:focus {
            transform: scale(0.9);
            color: black;
          }
        
          #skillshare:hover,
          #skillshare:focus {
            transform: scale(0.9);
            color: #002333;
          }
        
          #youtube::before {
            content: "";
            display: block;
            position: absolute;
            top: 7.5%;
            left: -6%;
            width: 112%;
            height: 85%;
            background: red;
            border-radius: 9% / 50%;
          }
        
          #youtube::after {
            content: "";
            display: block;
            position: absolute;
            top: 20px;
            left: 40px;
            width: 45px;
            height: 30px;
            border: 15px solid transparent;
            box-sizing: border-box;
            border-left: 30px solid white;
          }
        
          #youtube span {
            font-size: 0;
            position: absolute;
            width: 0;
            height: 0;
            overflow: hidden;
          }
        
          #youtube:hover + #youtube-card,
          #skillshare:hover + #skillshare-card {
            z-index: 49;
            display: block;
            position: fixed;
            bottom: 12px;
            width: 300px;
            background-color: white;
          }
        
          #youtube:hover + #youtube-card {
            right: 10px;
            padding: 25px 130px 25px 25px;
          }
        
          #skillshare:hover + #skillshare-card {
            left: 10px;
            padding: 25px 25px 25px 130px;
          }
        }
    </style>


</head>

<body>
    <div id="instructions">
        <div class="content">
            <p>把积木叠在一起</p>
            <p>当块位于积木上方时，单击、轻按或按空格键。你能够到蓝色的色块吗？</p>
            <p>单击、轻按或按空格键开始游戏</p>
        </div>
    </div>
    <div id="results">
        <div class="content">
            <p>失败了</p>
            <p>按键盘R键重新开始游戏</p>

        </div>
    </div>
    <div id="score">0</div>




    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.123.js"></script>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/cannon.js"></script>
    <script>
        window.focus(); // Capture keys right away (by default focus is on editor)
        
        let camera, scene, renderer; // ThreeJS globals
        let world; // CannonJs world
        let lastTime; // Last timestamp of animation
        let stack; // Parts that stay solid on top of each other
        let overhangs; // Overhanging parts that fall down
        const boxHeight = 1; // Height of each layer
        const originalBoxSize = 3; // Original width and height of a box
        let autopilot;
        let gameEnded;
        let robotPrecision; // Determines how precise the game is on autopilot
        
        const scoreElement = document.getElementById("score");
        const instructionsElement = document.getElementById("instructions");
        const resultsElement = document.getElementById("results");
        
        init();
        
        // Determines how precise the game is on autopilot
        function setRobotPrecision() {
          robotPrecision = Math.random() * 1 - 0.5;
        }
        
        function init() {
          autopilot = true;
          gameEnded = false;
          lastTime = 0;
          stack = [];
          overhangs = [];
          setRobotPrecision();
        
          // Initialize CannonJS
          world = new CANNON.World();
          world.gravity.set(0, -10, 0); // Gravity pulls things down
          world.broadphase = new CANNON.NaiveBroadphase();
          world.solver.iterations = 40;
        
          // Initialize ThreeJs
          const aspect = window.innerWidth / window.innerHeight;
          const width = 10;
          const height = width / aspect;
        
          camera = new THREE.OrthographicCamera(
            width / -2, // left
            width / 2, // right
            height / 2, // top
            height / -2, // bottom
            0, // near plane
            100 // far plane
          );
        
          /*
          // If you want to use perspective camera instead, uncomment these lines
          camera = new THREE.PerspectiveCamera(
            45, // field of view
            aspect, // aspect ratio
            1, // near plane
            100 // far plane
          );
          */
        
          camera.position.set(4, 4, 4);
          camera.lookAt(0, 0, 0);
        
          scene = new THREE.Scene();
        
          // Foundation
          addLayer(0, 0, originalBoxSize, originalBoxSize);
        
          // First layer
          addLayer(-10, 0, originalBoxSize, originalBoxSize, "x");
        
          // Set up lights
          const ambientLight = new THREE.AmbientLight(0xffffff, 0.6);
          scene.add(ambientLight);
        
          const dirLight = new THREE.DirectionalLight(0xffffff, 0.6);
          dirLight.position.set(10, 20, 0);
          scene.add(dirLight);
        
          // Set up renderer
          renderer = new THREE.WebGLRenderer({ antialias: true });
          renderer.setSize(window.innerWidth, window.innerHeight);
          renderer.setAnimationLoop(animation);
          document.body.appendChild(renderer.domElement);
        }
        
        function startGame() {
          autopilot = false;
          gameEnded = false;
          lastTime = 0;
          stack = [];
          overhangs = [];
        
          if (instructionsElement) instructionsElement.style.display = "none";
          if (resultsElement) resultsElement.style.display = "none";
          if (scoreElement) scoreElement.innerText = 0;
        
          if (world) {
            // Remove every object from world
            while (world.bodies.length > 0) {
              world.remove(world.bodies[0]);
            }
          }
        
          if (scene) {
            // Remove every Mesh from the scene
            while (scene.children.find((c) => c.type == "Mesh")) {
              const mesh = scene.children.find((c) => c.type == "Mesh");
              scene.remove(mesh);
            }
        
            // Foundation
            addLayer(0, 0, originalBoxSize, originalBoxSize);
        
            // First layer
            addLayer(-10, 0, originalBoxSize, originalBoxSize, "x");
          }
        
          if (camera) {
            // Reset camera positions
            camera.position.set.........完整代码请登录后点击上方下载按钮下载查看