html小游戏分工说明,HTML小游戏

开发工具：Visual Studio Code

游戏介绍：已知有3个方块，前面的2个方块涂有相近的两种颜色，你需要根据这两种颜色序列的递减情况猜测第三个方块的颜色是什么，并从下面的方块中选择你觉得最接近的颜色。

程序设计步骤：

1.编写html代码

2.编写js代码

html代码编写

设置css文件

import url('https://fonts.googleapis.com/css?family=Pacifico');

html, body {

background: #9cf;

margin: 0;

padding: 0;

}

h1, h2 {

text-align: center;

color: white;

font-size: 5vmin;

text-shadow: 0 1px 3px rgba(0,0,0,0.25);

font-family: Pacifico, arial, serif;

font-weight: normal;

}

h2 {

font-size: 3.5vmin;

margin-top: 5vmin;

}

#points {

font-family: Pacifico, Verdana, sans-serif;

color: white;

font-size: 5vmin;

text-shadow: 0 1px 3px rgba(0,0,0,0.25);

position: absolute;

top: 1vmin;

right: 2vmin;

}

.center {

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

}

.boxes {

margin: auto auto;

text-align: center;

white-space: nowrap;

}

.color-box {

display: inline-block;

background: red;

box-sizing: border-box;

border: 1.25vmin solid white;

border-radius: 2px;

width: 20vmin;

height: 20vmin;

margin-right: 5vmin;

box-shadow: 0 1rem 0.75rem -0.75rem rgba(0,0,0,0.25);

position: relative;

}

.boxes.mini .color-box {

width: 15vmin;

height: 15vmin;

margin-right: 3vmin;

cursor: pointer;

}

.color-box.right {

border-color: green;

}

.color-box.wrong {

border-color: #e81222;

}

#box-3 {

margin-right: 0;

background: #ccc;

overflow: hidden;

}

#color-3 {

margin-right: 0;

}

#box-3::before {

content: "?";

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

font-family: Pacifico, Verdana, sans-serif;

font-size: 6vmin;

color: rgba(0,0,0,0.5);

}

#scrim {

position: fixed;

top: 0;

left: 0;

width: 100%;

height: 100%;

background: rgba(0,0,0,0);

display: none;

}

#scrim.correct,

#scrim.incorrect {

display: block;

}

#scrim > div {

padding: 3vmin;

border-radius: 3px;

background: white;

box-shadow: 0 0.5rem 1.5rem -0rem rgba(0,0,0,0.25);

}

#scrim h2 {

color: #444;

margin-top: 0;

display: none;

}

#scrim.correct #correct,

#scrim.incorrect #incorrect {

display: block;

}

#scrim button {

width: 100%;

text-align: center;

font-size: 2vmin;

padding: 1.5vmin;

border-radius: 3px;

border: 0;

background: #396;

color: white;

box-shadow: 0 1rem 0.75rem -0.75rem rgba(0,0,0,0.25);

cursor: pointer;

}

#correct-color,

#picked-color {

position: absolute;

width: 100%;

height: 60%;

z-index: 2;

}

#picked-color {

top: 50%;

}

html界面

游戏：根据渐变序列猜颜色