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

相关文章

Oracle查询优化之高效实现仅查询前10条记录的方法与实践

《Oracle查询优化之高效实现仅查询前10条记录的方法与实践》:本文主要介绍Oracle查询优化之高效实现仅查询前10条记录的相关资料,包括使用ROWNUM、ROW_NUMBER()函数、FET... 目录1. 使用 ROWNUM 查询2. 使用 ROW_NUMBER() 函数3. 使用 FETCH FI

Python脚本实现自动删除C盘临时文件夹

《Python脚本实现自动删除C盘临时文件夹》在日常使用电脑的过程中,临时文件夹往往会积累大量的无用数据,占用宝贵的磁盘空间,下面我们就来看看Python如何通过脚本实现自动删除C盘临时文件夹吧... 目录一、准备工作二、python脚本编写三、脚本解析四、运行脚本五、案例演示六、注意事项七、总结在日常使用

Java实现Excel与HTML互转

《Java实现Excel与HTML互转》Excel是一种电子表格格式,而HTM则是一种用于创建网页的标记语言,虽然两者在用途上存在差异,但有时我们需要将数据从一种格式转换为另一种格式,下面我们就来看看... Excel是一种电子表格格式,广泛用于数据处理和分析,而HTM则是一种用于创建网页的标记语言。虽然两

java图像识别工具类(ImageRecognitionUtils)使用实例详解

《java图像识别工具类(ImageRecognitionUtils)使用实例详解》:本文主要介绍如何在Java中使用OpenCV进行图像识别,包括图像加载、预处理、分类、人脸检测和特征提取等步骤... 目录前言1. 图像识别的背景与作用2. 设计目标3. 项目依赖4. 设计与实现 ImageRecogni

Java中Springboot集成Kafka实现消息发送和接收功能

《Java中Springboot集成Kafka实现消息发送和接收功能》Kafka是一个高吞吐量的分布式发布-订阅消息系统,主要用于处理大规模数据流,它由生产者、消费者、主题、分区和代理等组件构成,Ka... 目录一、Kafka 简介二、Kafka 功能三、POM依赖四、配置文件五、生产者六、消费者一、Kaf

Java访问修饰符public、private、protected及默认访问权限详解

《Java访问修饰符public、private、protected及默认访问权限详解》:本文主要介绍Java访问修饰符public、private、protected及默认访问权限的相关资料,每... 目录前言1. public 访问修饰符特点:示例:适用场景:2. private 访问修饰符特点:示例:

详解Java如何向http/https接口发出请求

《详解Java如何向http/https接口发出请求》这篇文章主要为大家详细介绍了Java如何实现向http/https接口发出请求,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 用Java发送web请求所用到的包都在java.net下,在具体使用时可以用如下代码,你可以把它封装成一

使用Python实现在Word中添加或删除超链接

《使用Python实现在Word中添加或删除超链接》在Word文档中,超链接是一种将文本或图像连接到其他文档、网页或同一文档中不同部分的功能,本文将为大家介绍一下Python如何实现在Word中添加或... 在Word文档中,超链接是一种将文本或图像连接到其他文档、网页或同一文档中不同部分的功能。通过添加超

windos server2022里的DFS配置的实现

《windosserver2022里的DFS配置的实现》DFS是WindowsServer操作系统提供的一种功能,用于在多台服务器上集中管理共享文件夹和文件的分布式存储解决方案,本文就来介绍一下wi... 目录什么是DFS?优势:应用场景:DFS配置步骤什么是DFS?DFS指的是分布式文件系统(Distr

NFS实现多服务器文件的共享的方法步骤

《NFS实现多服务器文件的共享的方法步骤》NFS允许网络中的计算机之间共享资源,客户端可以透明地读写远端NFS服务器上的文件,本文就来介绍一下NFS实现多服务器文件的共享的方法步骤,感兴趣的可以了解一... 目录一、简介二、部署1、准备1、服务端和客户端:安装nfs-utils2、服务端:创建共享目录3、服