html+css+js识色

于 2021-12-01 15:28:18 发布
阅读量685 收藏 3
点赞数 1
分类专栏： 前端小东西 文章标签： javascript 前端 es6
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lutrra/article/details/121656450
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./download/font_2970444_40zea46u07p/iconfont.css">
    <style>
*{
    margin: 0;
    padding: 0;
}
span{
    padding: 0;
    margin: 0;
}
body{
    font-family: -apple-system, BlinkMacSystemFont,
    "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell",
    "Fira Sans", "Droid Sans", "Helvetica Neue",
    sans-serif;
}
.game{
    width: 480px;
    height: 640px;
    margin: 0 auto;
    text-align: center;
    background-color: #ff6666;
}
/* 游戏开始之前 */
.begin{
    width: 480px;
    height: 640px;
    position: relative;
    display: block;
}

.begin-big-title{
    width: 100%;
    height: 150px;
    font-size: 50px;
    color: white;
    font-weight: 550;
    margin: auto;
    line-height: 150px;
    text-shadow: 2px 3px 0px #cc3300;
}
.begin-icon{
    position: relative;
}
.begin-icon::after{
    content: "识";
    display: inline-block;
    font-size: 20px;
    color: #ffcc00;
    font-weight: bolder;
    transform: rotate(-20deg);
    position: absolute;
    margin-top: -35px;
    margin-left: -15px;
}
.begin-small-title{
    width: 250px;
    height: 50px;
    margin: auto;
    line-height: 50px;
    font-size: 15px;
    color: white;
    font-weight: bold;
    opacity: 0.8;
}
.begin-button{
    width: 200px;
    height: 50px;
    line-height: 50px;
    font-size: 35px;
    font-weight: 900;
    color: white;
    border: 1px solid #ffcc00;
    border-radius: 4%;
    border-bottom: #000;
    background-color: #ffcc00;
    position: absolute;
    padding: 5px;
    bottom: 150px;
    left: 50%;
    transform: translateX(-50%);
    box-shadow: 0px 5px 0px #c9a30e;
}
.score-button{
    width: 200px;
    height: 50px;
    line-height: 50px;
    font-size: 35px;
    font-weight: 900;
    color: white;
    border: 1px solid #ffcc00;
    border-radius: 4%;
    background-color: #ffcc00;
    position: absolute;
    padding: 5px;
    bottom: 60px;
    left: 50%;
    transform: translateX(-50%);
    box-shadow: 0px 5px 0px #c9a30e;
}
/* 游戏开始界面 */
.begining{
    width: 480px;
    height: 640px;
    position: relative;
    display: none;
}
.title{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content:space-between;
}
.scoreDiv{
    width: 130px;
    height: 60px;
    font-size: 27px;
    font-weight: bold;
    box-sizing: border-box;
    line-height: 60px;
    color: #ff9898;
}
.score{
    padding-left: 5px;
}
.setting{
    width: 130px;
    height: 60px;
    line-height: 60px;
    font-size: 27px;
    font-weight: bold;
    box-sizing: border-box;
    color: #ff9898;
}
.voice{
    font-size: 20px;
    width: 45px;
    height: 25px;
    line-height: 25px;
    padding: 5px;
    color: azure;
    border-radius: 5px;
    box-sizing: border-box;
    background-color: #ffcc00;
    box-shadow: 0px 3px 0px #c9a30e;
}
.stop{
    width: 30px;
    height: 40px;
    padding: 4px;
    color: azure;
    border-radius: 5px;
    font-size: 23px;
    background-color: #ffcc00;
    box-shadow: 0px 3px 0px #c9a30e;
}
/* 中间游戏区域 */
.main-play{
    width: 95%;
    height: 450px;
    border-radius: 5px;
    margin: 0 auto;
    margin-top: 30px;
    background-color: #ccc;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-evenly; 
    align-items: center;
}
li{
    /* 第一次 */
    width: 48%;
    height: 48%;
    /* 第二次 */
    /* width: 32%;
    height: 32%; */
    padding: 1%;
    list-style: none;
    display: block;
    border: 3px solid #ccc;
    border-radius: 5px;
    background-color: green;
    box-sizing: border-box;
}
/* 底部进度条 */
.footer{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 25px;
    width: 425px;
    height: 50px;
    border-radius: 5px;
    background-color: #ff9999;
}
.bk{
    width: 425px;
    height: 50px;
    float: right;
    border-radius: 5px;
    background-color: #ffcc00;
}
/* 游戏结束 */
.GameOver{
    width: 480px;
    height: 640px;
    position: relative;
    display: none;
}
.game-out-title{
    width: 480px;
    height: 100px;
    font-size: 55px;
    line-height: 100px;
    display: inline-block;
    margin-top: 50px;
    color: #fabc60;
    font-weight: bolder;
    text-indent: 20px;
    letter-spacing: 20px;
    box-sizing: border-box;
    text-shadow: 3px 3px 0px #cc6600;
}
.game-level{
    width: 480px;
    height: 100px;
    font-size: 40px;
    line-height: 100px;
    display: inline-block;
    margin-top: 100px;
    color: #fff;
    font-weight: bolder;
}
.game-ni{
    margin-left: 40px;
}
.game-choice{
    width: 480px;
    height: 200px;
    font-size: 30px;
    display: inline-block;
    margin-top: 40px;
    color: #fff;
    font-weight: bolder;
}
.game-again{
    margin: auto;
    width: 200px;
    height: 50px;
    line-height: 50px;
    border: 1px solid #ffcc00;
    border-radius: 4%;
    background-color: #ffcc00;
    box-shadow: 0px 5px 0px #c9a30e;
}
.game-more{ margin: auto;
    width: 200px;
    height: 50px;
    line-height: 50px;
    border: 1px solid #ffcc00;
    border-radius: 4%;
    background-color: #ffcc00;
    box-shadow: 0px 5px 0px #c9a30e;
    margin-top: 15px;
}
.game-submit{
    margin: auto;
    width: 200px;
    height: 50px;
    line-height: 50px;
    border: 1px solid #ffcc00;
    border-radius: 4%;
    background-color: #ffcc00;
    box-shadow: 0px 5px 0px #c9a30e;
    margin-top: 15px;
}
/* 特殊div块 */
.decorate{
    opacity: 0.75;
}
    </style>
</head>
<body>
    <div class="game">
        <!-- 开始游戏 -->
          <div class="begin">
            <div class="begin-big-title">看你有<span class="begin-icon">多</span>色</div>
            <div class="begin-small-title">找出所有色块里颜色不同的一个</div>
            <div class="begin-button">开始游戏</div>
            <div class="score-button">积分排行榜</div>
        </div>
        <!-- 游戏中 -->
        <div class="begining">
            <div class="title">
                <div class="scoreDiv">
                    <span>得分:LV</span><span class="score">1</span>
                </div>
                <div class="setting">
                    <span class="iconfont icon-shengyin voice"></span>
                    <span class="stop">暂停</span>
                </div>
            </div>
            <div class="main-play">

            </div>
            <div class="footer">
                <div class="bk"></div>
            </div>
        </div>
        <!-- 游戏结束 -->
        <div class="GameOver">
            <div class="game-out-title">
                游戏结束
            </div>
            <div class="game-level">
                <span>LV</span>
                <span class="game-score">0</span>
                <span class="game-ni">青铜</span>
            </div>
            <div class="game-choice">
                <div class="game-again">再来一次</div>
                <div class="game-more">更多游戏</div>
                <div class="game-submit">提交积分</div>
            </div>

        </div>
    </div>
    <script>
        //开始视图
var beginView=document.querySelector(".begin");
//开始按钮
var btnGame=document.querySelector(".begin-button");
//游戏中视图
var beginingDiv=document.querySelector(".begining");
//进度条
var bkDiv=document.querySelector(".bk");
//游戏结束的视图
var overDiv=document.querySelector(".GameOver");
//等级分数
var gamescore=document.querySelector(".game-score");
//等级名称
var gameni=document.querySelector(".game-ni");
//再来一次按钮
var againBtn=document.querySelector(".game-again");
//更多游戏
var moreBtn=document.querySelector(".game-more");
//提交积分
var submitBtn=document.querySelector(".game-submit");
//游戏空间的视图
var mainGameDiv=document.querySelector(".main-play");
//bigining页面分数
var beginingscore=document.querySelector(".score");
//倒计时时间设置30s
var maxTime=30;
//背景Div的宽度
var widthDiv=425;
//每次减小的宽度
var evDiv=widthDiv/maxTime;
//最终分数
var lastScore=0;
//将beginvView页面的
btnGame.addEventListener('click',function(){
    beginView.style.display="none";
    beginingDiv.style.display="block";
    init(2);
    var timer=setInterval(function(){
        maxTime--;
        widthDiv=widthDiv-evDiv;
        if(lastScore>=30){
            gameni.innerHTML="王者";
            beginingDiv.style.display="none";
            overDiv.style.display="block";
            gamescore.innerHTML=lastScore;
            clearInterval(timer);
        }
        if(maxTime>0){
            bkDiv.style.width=widthDiv+"px";
        }else{
            bkDiv.style.width="0px";
            beginingDiv.style.display="none";
            overDiv.style.display="block";
            gamescore.innerHTML=lastScore;
            if(lastScore>=4&&lastScore<=8){
                gameni.innerHTML="白银";
            }
            if(lastScore>=9&&lastScore<=13){
                gameni.innerHTML="黄金";
            }
            if(lastScore>=14&&lastScore<=18){
                gameni.innerHTML="铂金";
            }
            if(lastScore>=19&&lastScore<=23){
                gameni.innerHTML="钻石";
            }
            if(lastScore>=24&&lastScore<=29){
                gameni.innerHTML="星耀";
            }
            clearInterval(timer);
        }
    },1000);
});
// 再来一次
againBtn.addEventListener('click',function(){
    beginView.style.display="block";
    overDiv.style.display="none";
    maxTime=30;
    widthDiv=425;
    bkDiv.style.width="425px";
    lastScore=0;
    beginingscore.innerHTML=lastScore;
})

//初始化游戏的界面
function init(level){
    //判断level大小
    if(level>9){
        level=9;
    }
    //根据level的1,2,3,4
        //height

    var liHeight=100/level;
        //width
    var liWidth=100/level;
    console.log("liWidth:"+liWidth);
    console.log("liHeight:"+liHeight);
    console.log("level:"+level+":"+Math.pow(level,2));
    //创建外部的div
    //块数
    var str="";
    num=level*level;
    for(var i=0;i<num;i++){
        str=str+"<li></li>";
    }
    mainGameDiv.innerHTML=str;
    //获取每个li的id
    var verLi=document.querySelectorAll("li");
    //创建这几个块谁是特殊的~~~0-4
    var decorate=Math.floor(Math.random()*Math.pow(level,2));
    //设置每个li的样色
    var color=randomColor();
    //添加修饰
    verLi[decorate].style.opacity="0.75";
    //设置每个块的监听
    for(var i=0;i<verLi.length;i++){
        verLi[i].setAttribute("index",i);
        verLi[i].style.backgroundColor=color;
        //width
        verLi[i].style.width=liWidth+"%";
        //heigh
        verLi[i].style.height=liHeight+"%";
        //设置监听
        verLi[i].addEventListener("click",function(){
            var index=this.getAttribute("index");
            if(index==decorate){
                level++;
                init(level);
                lastScore++;
                beginingscore.innerHTML=lastScore;
            }else{
                //加速
                if(maxTime>0){
                maxTime--;
                widthDiv=widthDiv-evDiv;
                bkDiv.style.width=widthDiv+"px";
                }else{
                    bkDiv.style.width="0px";
                    maxTime=-1;
                }
            }
        });
    }
}
//随机颜色
function randomColor(){
    var str='#';
    for(var i=0;i<6;i++){
        //0-15转为16进制
    　str+=Math.floor(Math.random()*16).toString(16);
    }
    return str;
}
    </script>
</body>
</html>
Lutrra
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js 获取 图片颜色
12-17
通过cancas 获取图片图片的颜色，可以是固定位置的颜色，也可以是所有位置的颜色
css 圆形扩散特效 水波
笔记库
10-16 2072
<html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=...
canvas看你有多色源码(包括简单方法和createjs两种)
10-05
canvas看你有多色源码(包括简单方法和createjs两种)createjs方法是在极客学院的视频中学的
识别图片内文字颜色
03-06
截屏，获取图片内文字颜色， 使用了Qt5.6, 读者可以自行更改其它版本， 里面的三种算子都是大众认可的边缘检测，可算是定理了
另外一套中英文颜色代码
02-02 5108
颜色英文代码形像颜色HEX格式RGB格式 LightPink浅粉红#FFB6C1 255,182,193 Pink粉红#FFC0CB 255,192,203 Crimson猩红#DC143C 220,20,60 LavenderBlush脸红的淡紫色#FFF0F5 255,2
html5+css3+js登录页面
04-10
html5+css3+js登录页面模板，适用于网页设计的登录页面。html+css+js网页设计、大学生网页课程设计、期末大作业、毕业设计、网页模板，DW网页成品源代码等，2000+套Web案例源码，优质文章，关注作者获取更多源码。
美食网站js+html+css
01-03
【美食网站js+html+css】是一个以JavaScript、HTML和CSS为核心技术的项目，旨在创建一个展示美食的网站。这个项目提供了完整的源代码，包括HTML结构文件、CSS样式表和JavaScript脚本，以及用于视觉呈现的网站图片。...
html5+css3+JS代码
05-22
HTML5、CSS3和JavaScript是构建现代网页和应用程序的核心技术，它们共同构成了Web开发的三驾马车。在本篇文章中，我们将深入探讨这三种技术的详细知识点，并结合《精通html5+css3+JavaScript页面设计》这本书中的...
html+css+js科幻后台登录界面模板
最新发布
04-10
html+css+js科幻后台登录界面模板，适用于网页设计的登录页面个性化制作。html+css+js网页设计、大学生网页课程设计、期末大作业、毕业设计、网页模板，DW网页成品源代码等，2000+套Web案例源码，优质文章，关注作者...
HTML+CSS+JS 网页设计模板.zip
05-31
每个模板通常会包含HTML文件（.html）、CSS文件（.css）和JavaScript文件（.js），有时还会包含图像和其他资源文件。 在使用这些模板时，开发者可以根据需求修改HTML元素以调整内容，通过调整CSS样式来定制界面，...
html小游戏——看你有多色
weixin_30609287的博客
04-18 787
前几天一个朋友问了我要做看你有多色这样的一个游戏需要怎么学，我也就自己写了一下。 我有放在自己的个人网站上：查看游戏 源代码也放在了github上：查看源码 现在开始说明制过程： 项目结构 注：偷懒用了jquery，其实代码不多，完全可以原生js，另外，由于这次我没有使用图片，所以img里面的内容是空的 game -index.html ...
实现LUT
weixin_33938733的博客
06-05 661
//实现LUT 查找表 #include "stdafx.h" #include &lt;iostream&gt; #include &lt;opencv2/opencv.hpp&gt;   using namespace std; using namespace cv;   void colorReduce(Mat &amp;image,int div = 64){     Ma...
html5黄游戏,HTML5游戏-看你有多色
热门推荐
weixin_39615808的博客
06-04 1万+
需引入easeljs-0.7.1.min.jshtml:倒计时:60s 分数:0Rect.js,在html中需要引入:function Rect(n,color){//个数createjs.Shape.call(this);//构造方法this.setRectType = function (type) {this._RectType = type;switch (type){case 1:thi...
Html5 + JavaScript 写了一个拾色器
dushaobindoudou的专栏
09-01 1630
html5 设色器
HTML 拾色器
冷月醉雪的博客
05-10 3016
HTML 拾色器选取颜色:或输入颜色值:OK或使用 HTML5:选择的颜色:黑色文本阴影白色文本阴影#33cc00rgb(51, 204, 0)hsl(105, 100%, 40%)hsv(105, 100%, 80%)淡 / 暗:100%   #ffffff95%   #ecffe590%   #d9ffcc85%   #c6ffb380%   #b3ff9975%   #9fff8070%  ...
Three.js: Lut
qq_33699478的博客
12-02 1950
Three.js之Lut配色方案 文章目录Three.js之Lut配色方案介绍使用1.引入2.配置参数3.使用4.自定义配色方案 介绍 Lut属于Three.js的Math模块，主要方便对模型按照常见颜色方案进行上色，适用用于二维、三维的图表，比如下面这种颜色条。 使用 1.引入 import { Lut } from 'three/examples/jsm/math/Lut.js'; 2.配置参数 let lut = new Lut(); let params = { colorMap: 'ra
游戏2：HTML5制作网页游戏看看你有多色--createjs
dengluandai1740的博客
11-24 232
效果： index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>看你有多色</title> <script src="easeljs.min.js">&l...
html能识别的颜色,html能识别的颜色名称.docx
weixin_39704246的博客
06-07 265
《html能识别的颜色名称.docx》由会员分享，提供在线免费全文阅读可下载，此文档格式为docx，更多相关《html能识别的颜色名称.docx》文档请在天天文库搜索。1、HTML能够识别的颜色名称列表——以下内容来源于“W3CSchool”使用HTML赋给颜色值的时候，直接输入Color=”颜色名称”，如：Color = “Blue”，点击颜色名称可以查看网页效果。序号颜色名称十六进制颜色效果...
网页设计作业成品文档(HTML+CSS+JS).docx
08-22
网页设计作业成品文档(HTML+CSS+JS).docx HTML实例网页代码, 本实例适合于初学HTML的同学。该实例里面有设置了css的样式设置，有div的样式格局，这个实例比较全面，有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代码的过程来实践设计。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值