Javascript实现找不同色块的游戏

站长资源 2024/11/28 佚名

2 0 1

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

这里使用了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){//定义构造函数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实现找不同色块的游戏，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！

js,找不同色块游戏

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

评论“Javascript实现找不同色块的游戏”

暂无评论...

P70系列延期，华为新旗舰将在下月发布

3月20日消息，近期博主@数码闲聊站透露，原定三月份发布的华为新旗舰P70系列延期发布，预计4月份上市。

而博主@定焦数码爆料，华为的P70系列在定位上已经超过了Mate60，成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢？
根据目前爆料的消息来看，华为P70系列将推出三个版本，其中P70和P70 Pro采用了三角形的摄像头模组设计，而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智，但辨识度绝对拉满。

更新日志

2024年11月28日

Javascript实现找不同色块的游戏

详解利用jsx写vue组件的方法示例

Vue.js 单页面多路由区域操作的实例详解

评论“Javascript实现找不同色块的游戏”

P70系列延期，华为新旗舰将在下月发布

更新日志

友情链接