快捷導(dǎo)航

Javascript實(shí)現(xiàn)找不同色塊的游戲

更新時(shí)間：2017年07月17日 11:45:23 作者：梵海pp

先給大家說(shuō)下游戲規(guī)則：在變化數(shù)量的顏色塊里找出一個(gè)不同顏色的塊點(diǎn)擊。下面通過(guò)js代碼給大家分享找不同色塊的游戲?qū)崿F(xiàn)方法，需要的朋友參考下吧

游戲規(guī)則：在變化數(shù)量的顏色塊里找出一個(gè)不同顏色的塊點(diǎn)擊

這里使用了JS中的構(gòu)造函數(shù)來(lái)創(chuàng)建元素

這里寫(xiě)圖片描述

<!DOCTYPE html>
<html>
<head lang="en">
 <meta charset="UTF-8">
 <title>找不同色塊的游戲（構(gòu)造函數(shù)）</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">關(guān)卡：1</div>
 <div id="box"></div>
 <script>
  var n=1;//關(guān)卡值
  var Create=new creat(3);//定義構(gòu)造函數(shù)對(duì)象，傳入一個(gè)參數(shù)（開(kāi)始時(shí)的布局3x3）
  Create.go();//調(diào)用構(gòu)造函數(shù)里面的函數(shù)屬性
  function creat(event){//定義構(gòu)造函數(shù)creat
   var obox=document.getElementById("box");
   this.className="creat";//設(shè)置className
   this._creat=null;//事先創(chuàng)建出一個(gè)屬性_creat用于指向一個(gè)對(duì)象
   this.go=function(){//創(chuàng)建顏色塊的方法函數(shù)
    var colorNum1=Math.floor(Math.random()*253)+1;//隨機(jī)數(shù)取一個(gè)值范圍是（1~254）防止白色塊出現(xiàn)
    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;//用于改變其中一個(gè)顏色快的顏色(這里可以自定義改變透明度)
    for(var i=0;i<event*event;i++){//創(chuàng)建循環(huán)循環(huán)event*2次，每當(dāng)點(diǎn)擊顏色塊后event變化
     this._creat=document.createElement("div");//動(dòng)態(tài)創(chuàng)建一個(gè)div賦給this._creat屬性
     this._creat.style.width=Math.floor(600/event)+"px";//設(shè)置div的寬，高，顏色和className
     this._creat.style.height=Math.floor(600/event)+"px";
     this._creat.style.backgroundColor=this.color;
     this._creat.className=this.className;//在樣式中給div左浮動(dòng)
     obox.appendChild(this._creat);//作為孩子添加到obox中
    }
    var odiv=document.getElementsByClassName("creat");//獲取一下創(chuàng)建好的div
    var numRandom=parseInt(Math.random()*odiv.length);//隨機(jī)取到其中一個(gè)改變其透明度值
    odiv[numRandom].style.opacity=this.diffOpacity;
    odiv[numRandom].onclick=function(){
    /*給取到的div綁定事件，當(dāng)點(diǎn)擊時(shí)先清空obox中元素即上一關(guān)卡的div
    *獲取score改變n的值
    *改變event的值，可以自定義難度
    *再調(diào)用一下調(diào)用構(gòu)造函數(shù)里面的go函數(shù)屬性,創(chuàng)建一組新的元素
    */
     var oScore=document.getElementById("score");
     n++;
     oScore.innerHTML="關(guān)卡："+n+"";
     obox.innerHTML="";
     event++;
     Create.go();
    }
   }
  }
 </script>
</body>
</html>

以上所述是小編給大家介紹的Javascript實(shí)現(xiàn)找不同色塊的游戲，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章: