js+css实现摇骰子小游戏代码-html代码-BFW代码库

代码语言：html

所属分类：游戏

代码描述：js+css实现摇骰子小游戏代码，支持人机对战及双人对战模式，三次机会，看看谁的点数大。

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <script src="https://kit.fontawesome.com/6d9f33d815.js" crossorigin="anonymous"></script>



    <style>
        @charset "UTF-8";
        @import url("https://fonts.googleapis.com/css2?family=Courgette&display=swap");
        * {
          margin: 0;
          padding: 0;
          box-sizing: border-box;
        }
        
        :root {
          --border-radius: 1vmin;
          --face-size: min(12.5vh, 17.5vw);
          --duration: 2s;
          --point-size: min(2.25vh, 3.5vw);
          --point-position: 1.75vmin;
          --current-player-color: hsl(120deg, 80%, 60%);
          --player1-color: hsl(120deg, 80%, 60%);
          --player2-color: hsl(270deg, 80%, 60%);
          --carpet-color: hsl(147deg, 50%, 23%);
          --hover-color: #f7b318;
          --alert-color: orangered;
        }
        
        body {
          position: fixed;
          width: 100vw;
          height: 100vh;
          overflow: hidden;
        }
        
        .title {
          position: absolute;
          display: flex;
          justify-content: center;
          height: 5vh;
          left: 50%;
          font-family: "Courgette", cursive;
          color: whitesmoke;
          transform: translate(-50%, 12.5%);
        }
        
        h1 {
          font-size: min(2.5rem, 7.5vw);
          text-shadow: 1px 1px 0 var(--carpet-color), 1px -1px 0 var(--carpet-color), -1px 1px 0 var(--carpet-color), -1px -1px 0 var(--carpet-color), 1px 0px 0 var(--carpet-color), 0px 1px 0 var(--carpet-color), -1px 0px 0 var(--carpet-color), 0px -1px 0 var(--carpet-color);
          width: 100%;
          z-index: 20;
        }
        
        h2 {
          font-size: min(2.15rem, 6.5vw);
        }
        
        .button-hover-shadow::after {
          content: "";
          position: absolute;
          height: 100%;
          width: 100%;
          border-radius: inherit;
          box-shadow: 0 0 2.5rem 0.5rem var(--hover-color);
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          opacity: 0;
          transition: opacity 0.25s ease-in;
        }
        .button-hover-shadow:hover::after {
          opacity: 1;
        }
        
        .player-settings {
          top: 5vh;
        }
        
        .game-board {
          position: absolute;
          height: 100vh;
          width: 100vw;
          background: radial-gradient(circle, #1d5838, #11321f 90%);
          transition: transform 0.5s ease-out;
          display: grid;
          place-content: center;
        }
        
        .slide-content {
          position: relative;
          width: 90vw;
          height: 90vh;
          border: 1vmin solid whitesmoke;
          padding: 5vmin;
          border-radius: 5vmin;
          color: whitesmoke;
        }
        .slide-content::after, .slide-content::before {
          position: absolute;
          height: 15vmin;
          width: 15vmin;
          border: 1vmin solid #11321f;
          background: #11321f;
          border-radius: 100%;
          display: grid;
          place-content: center;
          font-size: min(5rem, 8vw);
        }
        .slide-content::after {
          content: "♥";
          top: 0;
          left: 0;
          border-bottom: 1vmin solid whitesmoke;
          transform: translate(-9.5vmin, -9.5vmin) rotate(-45deg);
        }
        .slide-content::before {
          content: "♣";
          bottom: 0;
          right: 0;
          border-top: 1vmin solid whitesmoke;
          transform: translate(9.5vmin, 9.5vmin) rotate(-45deg);
        }
        
        .slide {
          position: absolute;
          inset: 0;
          height: inherit;
          font-family: arial;
          color: whitesmoke;
          font-size: 1.5rem;
          align-items: center;
          justify-content: space-evenly;
          overflow: hidden;
          transition: opacity 0.25s ease-in-out;
        }
        .slide:not(:first-child) {
          opacity: 0;
          display: none;
        }
        
        /* ====== options ====== */
        .option-wrapper {
          position: fixed;
          top: 5vh;
          left: 5vw;
          clip-path: circle(0 at calc(90vw - 5vmin) 5vmin);
          transition: clip-path 0.75s ease-out;
          background: #11321f;
          border-radius: 5vmin;
          z-index: 10;
        }
        .option-wrapper .title {
          background: #11321f;
        }
        
        #option-checkbox {
          display: none;
        }
        
        .toggle-option {
          position: absolute;
          color: whitesmoke;
          font-size: 2.5rem;
          right: calc(5vw + 5vmin);
          top: calc(5vh + 5vmin);
          cursor: pointer;
          display: grid;
          place-content: center;
          z-index: 20;
        }
        
        #option-checkbox:checked + .option-wrapper {
          clip-path: circle(150% at calc(90vw - 5vmin) 5vmin);
        }
        
        .options {
          position: absolute;
          inset: 0;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: space-evenly;
          font-family: arial;
        }
        
        .options-title {
          display: grid;
          place-content: center;
          height: 5vh;
          width: 50%;
          font-family: "Courgette", cursive;
          font-size: min(2rem, 5vw);
        }
        
        .sliders-container {
          height: 25%;
          width: 90%;
          display: flex;
          justify-content: space-evenly;
          align-items: center;
          font-size: 2.5rem;
        }
        .sliders-container .music-container,
        .sliders-container .sound-container {
          height: 80%;
          width: 50%;
          display: flex;
          flex-direction: column;
          justify-content: space-evenly;
          align-items: center;
        }
        .sliders-container .slider-container {
          width: 100%;
          display: flex;
          justify-content: center;
          gap: 25px;
          align-items: center;
        }
        .sliders-container .slider-container .music-symbol,
        .sliders-container .slider-container .sound-symbol {
          position: relative;
          display: inline-block;
          cursor: pointer;
        }
        .sliders-container .slider-container .muted::after {
          content: "⦰";
          font-size: 3rem;
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
        }
        .sliders-container .slider-container .slider {
          -webkit-appearance: none;
          width: 25%;
          height: 15px;
          border-radius: 999px;
          background: #d3d3d3;
          outline: none;
          -webkit-transition: 0.2s;
          transition: opacity 0.2s;
        }
        .sliders-container .slider-container .slider::-webkit-slider-thumb {
          -webkit-appearance: none;
          appearance: none;
          width: 25px;
          height: 25px;
          border-radius: 50%;
          background: var(--carpet-color);
          cursor: poin.........完整代码请登录后点击上方下载按钮下载查看