js+css实现摇骰子小游戏代码
代码语言：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: pointer;
}
.sliders-container .slider-container .slider::-moz-range-thumb {
width: 25px;
height: 25px;
border-radius: 50%;
background: var(--carpet-color);
cursor: pointer;
}
.rules {
position: relative;
overflow: hidden;
height: 40vh;
width: 85vw;
display: flex;
justify-content: center;
}
.rules #rules-checkbox {
display: none;
}
.rules .toggle-rules {
--rotation: 0deg;
position: absolute;
display: flex;
align-items: center;
justify-content: space-evenly;
cursor: pointer;
height: 5vh;
left: 12.5%;
width: 75%;
background: #11321f;
font-family: "Courgette", cursive;
font-size: min(2rem, 5vw);
border: 0.5vmin solid whitesmoke;
border-radius: 5vmin;
}
.rules .toggle-rules::after, .rules .toggle-rules::before {
content: "▽";
transform: rotate(var(--rotation));
transition: transform 0.5s ease-in-out;
}
.rules #rules-checkbox:checked + .rules-wrapper {
transform: translateY(0%);
}
.rules #rules-checkbox:checked ~ .toggle-rules::before {
--rotation: -180deg;
}
.rules #rules-checkbox:checked ~ .toggle-rules::after {
--rotation: 180deg;
}
.rules .rules-wrapper {
position: absolute;
transform: translateY(-100%);
top: 5vh;
width: 70%;
max-height: 35vh;
transition: transform 0.5s ease-out;
line-height: 1.15;
overflow-y: scroll;
/* width */
/* Track */
/* Handle */
}
.rules .rules-wrapper::-webkit-scrollbar {
width: 1rem;
}
.rules .rules-wrapper::-webkit-scrollbar-track {
background: #11321f;
}
.rules .rules-wrapper::-webkit-scrollbar-thumb {
background-image: linear-gradient(135deg, #11321f 40%, transparent 40%), linear-gradient(225deg, #11321f 40%, transparent 40%), linear-gradient(45deg, #11321f 40%, transparent 40%), linear-gradient(315deg, #11321f 40%, #e5e5f7 40%);
background-position: 0.5rem 0, 0.5rem 0, 0 0, 0 0;
background-repeat: repeat;
}
.rules .rules-wrapper h3 {
padding: 1rem 0 0.25rem 0;
}
.reset-button {
display: none;
--hover-color: red;
position: relative;
cursor: pointer;
width: 50%;
border: none;
border-radius: 5vmin;
}
.reset-button:hover {
background: var(--alert-color);
border: var(--alert-color);
color: whitesmoke;
}
.reset-displayed {
display: grid;
}
.reset .presenter {
color: var(--alert-color);
}
.reset .confirm-reset {
--hover-color: var(--alert-color);
background: var(--alert-color);
}
.reset .reject-reset {
--hover-color: var(--carpet-color);
background: var(--carpet-color);
display: grid;
place-content: center;
}
@keyframes passing-through {
to {
transform: translateX(55vmin) rotate(10deg);
}
}
/* ====== slide 1 ====== */
.slide-1 {
display: flex;
flex-wrap: wrap;
}
.choose-players-qty {
position: relative;
width: min(25vmax, 17.5rem);
aspect-ratio: 1/0.9;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-evenly;
cursor: pointer;
padding: 2vmin;
border: none;
border-radius: 1.5vmin;
font-size: 1.5rem;
transition: transform 0.25s ease-in-out;
line-height: 1.75;
color: var(--carpet-color);
}
.choose-players-qty span {
display: inline-block;
}
.choose-players-qty .fas {
font-size: 2.5rem;
}
/* ====== slide 2 ====== */
.players-identity {
justify-self: center;
display: grid;
grid-template: repeat(2, 1fr)/repeat(3, 1fr);
gap: 25px;
width: 90%;
}
.players-identity .player-option-container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
}
.players-identity .choose-box {
width: min(5rem, 20vw);
aspect-ratio: 1;
font-size: min(5rem, 20vw);
color: wh.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0