Javascript实现找不同色块的游戏


Posted in Javascript onJuly 17, 2017

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

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

Javascript实现找不同色块的游戏

<!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){//定义构造函数creat
   var obox=document.getElementById("box");
   this.className="creat";//设置className
   this._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的宽,高,颜色和className
     this._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");//获取一下创建好的div
    var 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实现找不同色块的游戏,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JavaScript使用IEEE 标准进行二进制浮点运算产生莫名错误的解决方法
May 28 Javascript
Jquery easyUI 更新行示例
Mar 06 Javascript
node.js实现多图片上传实例
Jun 03 Javascript
JavaScript实现俄罗斯方块游戏过程分析及源码分享
Mar 23 Javascript
实例解析JS布尔对象的toString()方法和valueOf()方法
Oct 25 Javascript
angularjs自定义ng-model标签的属性
Jan 21 Javascript
深入浅析Extjs中store分组功能的使用方法
Apr 20 Javascript
js 将input框中的输入自动转化成半角大写(税号输入框)
Feb 16 Javascript
Angular2入门--架构总览
Mar 29 Javascript
vue 双向数据绑定的实现学习之监听器的实现方法
Nov 30 Javascript
微信小程序基于picker实现级联菜单
Feb 15 Javascript
Element-ui自定义table表头、修改列标题样式、添加tooltip、:render-header使用
Apr 11 Javascript
Vue.js 单页面多路由区域操作的实例详解
Jul 17 #Javascript
Vue项目webpack打包部署到服务器的实例详解
Jul 17 #Javascript
JS中Safari浏览器中的Date
Jul 17 #Javascript
Vue.extend构造器的详解
Jul 17 #Javascript
原生js实现密码输入框值的显示隐藏
Jul 17 #Javascript
extjs简介_动力节点Java学院整理
Jul 17 #Javascript
jQuery Autocomplete简介_动力节点Java学院整理
Jul 17 #jQuery
You might like
PHP 中的面向对象编程:通向大型 PHP 工程的办法
2006/12/03 PHP
部署PHP项目应该注意的几点事项分享
2013/12/20 PHP
PHP获取MySQL执行sql语句的查询时间方法
2018/08/21 PHP
javascript中的继承实例代码
2011/04/27 Javascript
jquery miniui 教程 表格控件 合并单元格应用
2012/11/25 Javascript
js 用CreateElement动态创建标签示例
2013/11/20 Javascript
使用jQuery重置(reset)表单的方法
2014/05/05 Javascript
jQuery实现3D文字特效的方法
2015/03/10 Javascript
js实现兼容性好的微软官网导航下拉菜单效果
2015/09/07 Javascript
详解javascript数组去重问题
2015/11/06 Javascript
轻松掌握JavaScript代理模式
2016/08/26 Javascript
Bootstrap基本组件学习笔记之下拉菜单(7)
2016/12/07 Javascript
原生Aajax 和jQuery Ajax 写法个人总结
2017/03/24 jQuery
深入理解ES6 Promise 扩展always方法
2017/09/26 Javascript
Angular 4.x+Ionic3踩坑之Ionic3.x pop反向传值详解
2018/03/13 Javascript
[53:15]2018DOTA2亚洲邀请赛3月29日 小组赛A组 LGD VS TNC
2018/03/30 DOTA
通过python下载FTP上的文件夹的实现代码
2013/02/10 Python
利用python打印出菱形、三角形以及矩形的方法实例
2017/08/08 Python
Python实现的rsa加密算法详解
2018/01/24 Python
python format 格式化输出方法
2018/07/16 Python
Tensorflow实现部分参数梯度更新操作
2020/01/23 Python
Python tcp传输代码实例解析
2020/03/18 Python
python和pywin32实现窗口查找、遍历和点击的示例代码
2020/04/01 Python
python 对一幅灰度图像进行直方图均衡化
2020/10/27 Python
意大利自行车商店:Cingolani Bike Shop
2019/09/03 全球购物
日本最大的购物网站乐天市场国际版:Rakuten Global Market(支持中文)
2020/02/03 全球购物
后勤部经理岗位职责
2014/02/23 职场文书
新闻编辑求职信
2014/04/09 职场文书
师范大学生求职信
2014/06/13 职场文书
天猫活动策划方案
2014/08/21 职场文书
光荣之路观后感
2015/06/12 职场文书
同意报考公务员证明
2015/06/17 职场文书
公司业务员管理制度
2015/08/05 职场文书
Vue实现下拉加载更多
2021/05/09 Vue.js
解决Jenkins集成SonarQube遇到的报错问题
2021/07/15 Java/Android
浅谈为什么我的 z-index 又不生效了
2022/07/15 HTML / CSS