Javascript实现找不同色块的游戏

2023-11-23 22:40

本文主要是介绍Javascript实现找不同色块的游戏,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

游戏规则:在变化数量的颜色块里找出一个不同颜色的块点击

这里使用了JS中的构造函数来创建元素

这里写图片描述

<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title>找不同色块的游戏(构造函数)</title>
</head>
<style>*{margin: 0;padding: 0;}#box{width: 600px;height: 600px;margin: auto;margin-top: 100px;}#score{width: 180px;height: 50px;line-height: 150%;font-size: 2em;position: absolute;top: 30px;left: 35%;}.creat{float: left;border-radius: 100%;}
</style>
<body><div id="score">关卡:1</div><div id="box"></div><script>var n=1;//关卡值var Create=new creat(3);//定义构造函数对象,传入一个参数(开始时的布局3x3)Create.go();//调用构造函数里面的函数属性function creat(event){//定义构造函数creatvar obox=document.getElementById("box");this.className="creat";//设置classNamethis._creat=null;//事先创建出一个属性_creat用于指向一个对象this.go=function(){//创建颜色块的方法函数var colorNum1=Math.floor(Math.random()*253)+1;//随机数取一个值范围是(1~254)防止白色块出现var colorNum2=Math.floor(Math.random()*253)+1;var colorNum3=Math.floor(Math.random()*253)+1;this.color="rgb("+colorNum1+","+colorNum2+","+colorNum3+")";//定义rgb颜色属性this.diffOpacity=0.7;//用于改变其中一个颜色快的颜色(这里可以自定义改变透明度)for(var i=0;i<event*event;i++){//创建循环循环event*2次,每当点击颜色块后event变化this._creat=document.createElement("div");//动态创建一个div赋给this._creat属性this._creat.style.width=Math.floor(600/event)+"px";//设置div的宽,高,颜色和classNamethis._creat.style.height=Math.floor(600/event)+"px";this._creat.style.backgroundColor=this.color;this._creat.className=this.className;//在样式中给div左浮动obox.appendChild(this._creat);//作为孩子添加到obox中}var odiv=document.getElementsByClassName("creat");//获取一下创建好的divvar numRandom=parseInt(Math.random()*odiv.length);//随机取到其中一个改变其透明度值odiv[numRandom].style.opacity=this.diffOpacity;odiv[numRandom].onclick=function(){/*给取到的div绑定事件,当点击时先清空obox中元素即上一关卡的div*获取score改变n的值*改变event的值,可以自定义难度*再调用一下调用构造函数里面的go函数属性,创建一组新的元素*/var oScore=document.getElementById("score");n++;oScore.innerHTML="关卡:"+n+"";obox.innerHTML="";event++;Create.go();}}}</script>
</body>
</html>

这篇关于Javascript实现找不同色块的游戏的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/420796

相关文章

使用Python实现矢量路径的压缩、解压与可视化

《使用Python实现矢量路径的压缩、解压与可视化》在图形设计和Web开发中,矢量路径数据的高效存储与传输至关重要,本文将通过一个Python示例,展示如何将复杂的矢量路径命令序列压缩为JSON格式,... 目录引言核心功能概述1. 路径命令解析2. 路径数据压缩3. 路径数据解压4. 可视化代码实现详解1

PyQt6/PySide6中QTableView类的实现

《PyQt6/PySide6中QTableView类的实现》本文主要介绍了PyQt6/PySide6中QTableView类的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学... 目录1. 基本概念2. 创建 QTableView 实例3. QTableView 的常用属性和方法

PyQt6/PySide6中QTreeView类的实现

《PyQt6/PySide6中QTreeView类的实现》QTreeView是PyQt6或PySide6库中用于显示分层数据的控件,本文主要介绍了PyQt6/PySide6中QTreeView类的实现... 目录1. 基本概念2. 创建 QTreeView 实例3. QTreeView 的常用属性和方法属性

SpringBoot UserAgentUtils获取用户浏览器的用法

《SpringBootUserAgentUtils获取用户浏览器的用法》UserAgentUtils是于处理用户代理(User-Agent)字符串的工具类,一般用于解析和处理浏览器、操作系统以及设备... 目录介绍效果图依赖封装客户端工具封装IP工具实体类获取设备信息入库介绍UserAgentUtils

Android使用ImageView.ScaleType实现图片的缩放与裁剪功能

《Android使用ImageView.ScaleType实现图片的缩放与裁剪功能》ImageView是最常用的控件之一,它用于展示各种类型的图片,为了能够根据需求调整图片的显示效果,Android提... 目录什么是 ImageView.ScaleType?FIT_XYFIT_STARTFIT_CENTE

Spring 中的循环引用问题解决方法

《Spring中的循环引用问题解决方法》:本文主要介绍Spring中的循环引用问题解决方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧... 目录什么是循环引用?循环依赖三级缓存解决循环依赖二级缓存三级缓存本章来聊聊Spring 中的循环引用问题该如何解决。这里聊

pandas中位数填充空值的实现示例

《pandas中位数填充空值的实现示例》中位数填充是一种简单而有效的方法,用于填充数据集中缺失的值,本文就来介绍一下pandas中位数填充空值的实现,具有一定的参考价值,感兴趣的可以了解一下... 目录什么是中位数填充?为什么选择中位数填充?示例数据结果分析完整代码总结在数据分析和机器学习过程中,处理缺失数

Golang HashMap实现原理解析

《GolangHashMap实现原理解析》HashMap是一种基于哈希表实现的键值对存储结构,它通过哈希函数将键映射到数组的索引位置,支持高效的插入、查找和删除操作,:本文主要介绍GolangH... 目录HashMap是一种基于哈希表实现的键值对存储结构,它通过哈希函数将键映射到数组的索引位置,支持

Java学习手册之Filter和Listener使用方法

《Java学习手册之Filter和Listener使用方法》:本文主要介绍Java学习手册之Filter和Listener使用方法的相关资料,Filter是一种拦截器,可以在请求到达Servl... 目录一、Filter(过滤器)1. Filter 的工作原理2. Filter 的配置与使用二、Listen

Pandas使用AdaBoost进行分类的实现

《Pandas使用AdaBoost进行分类的实现》Pandas和AdaBoost分类算法,可以高效地进行数据预处理和分类任务,本文主要介绍了Pandas使用AdaBoost进行分类的实现,具有一定的参... 目录什么是 AdaBoost?使用 AdaBoost 的步骤安装必要的库步骤一:数据准备步骤二:模型