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 .........完整代码请登录后点击上方下载按钮下载查看