找色差小游戏

最新推荐文章于 2024-06-11 06:47:40 发布

似舟非洲

最新推荐文章于 2024-06-11 06:47:40 发布

阅读量2.4k

点赞数 8

分类专栏：前端文章标签： jquery scss html5

本文链接：https://blog.csdn.net/m0_74250610/article/details/134426321

版权

前言：找色差小游戏其实是对色彩敏感度的一个测试。

找色差小游戏的成功实现，其实是跟教我前端的老师是分不开的。某周星期四，下课时无聊时，我打开电脑正在全神贯注玩找色差小游戏，结果被走进来查看作业进度的老师发现了！！他并没有骂我，而是和蔼地问我，说：“这个游戏简单不”！我说：“简单”！然后我blbl一堆，我老师说让我做出来，让我星期一做出来拿给他看，结果我失约了，它也忘记了！！但我觉得这是表现我技术能力的好时候，最终在我的不懈努力下，星期三的那天，我做出来了！于是我快速跑到办公室拿给老师瞧了瞧！！并问了我的一些实现思路，并夸奖了我一顿！！

实现思路：

1.首先把找色差小游戏的全部页面（静态页面）排好，比如：首页、闯关、暂停、继续、评价页面

2.接着实现页面中点击按钮显示与隐藏功能

3.再接着实现定时器的功能，开始，暂停，继续

4.紧接着根据点击的色块与随机颜色的色块相符合的话，关数+1并刷新本关页面

5.接着循环创建节点，根据关卡数，控制循环色块个数

6.再接着倒计时结束后，根据所闯关卡数，进行对应的评价

7.最后点击再玩一次，刷新页面

实现技术：

Html5、Css3、Jquery、Javascript、Scss、响应式布局（rem）

实现工具：

雅虎屏幕取色、Vscode

首页页面，如下图所示：

闯关页面，如下图所示：

暂停页面，如下图所示：

继续页面，如下图所示：

评价页面，如下图所示：

找色差小游戏功能实现的关键代码：

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>测测你的视力达不达标</title>

<link rel="stylesheet" href="./scss/color.css">

<link rel="icon" href="./images/微信图片_20230813184350.jpg">

<script src="./Jquery.js"></script>

<script>

$(document).ready(function () {

//创建随机颜色函数

function randomColor() {

var r = Math.floor(Math.random() * 256);

var g = Math.floor(Math.random() * 256);

var b = Math.floor(Math.random() * 256);

return "rgb(" + r + "," + g + "," + b + ")";

}

//点击后开始

$("#start").click(function () {

$(".box").hide();

$(".box3").show();

//随机给某个div元素随机颜色

$(".box33 > div .col

最低0.47元/天解锁文章