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

這篇文章將為大家詳細(xì)講解有關(guān)Javascript如何實現(xiàn)找不同色塊的游戲，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

創(chuàng)新互聯(lián)從2013年創(chuàng)立，是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司，擁有項目成都網(wǎng)站建設(shè)、網(wǎng)站建設(shè)網(wǎng)站策劃，項目實施與項目整合能力。我們以讓每一個夢想脫穎而出為使命，1280元二道做網(wǎng)站,已為上家服務(wù),為二道各地企業(yè)和個人服務(wù),聯(lián)系電話:13518219792

javascript是一種什么語言

javascript是一種動態(tài)類型、弱類型的語言，基于對象和事件驅(qū)動并具有相對安全性并廣泛用于客戶端網(wǎng)頁開發(fā)的腳本語言，同時也是一種廣泛用于客戶端Web開發(fā)的腳本語言。它主要用來給HTML網(wǎng)頁添加動態(tài)功能，現(xiàn)在JavaScript也可被用于網(wǎng)絡(luò)服務(wù)器，如Node.js。

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

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

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

<!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ù)對象，傳入一個參數(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)建出一個屬性_creat用于指向一個對象
   this.go=function(){//創(chuàng)建顏色塊的方法函數(shù)
    var colorNum1=Math.floor(Math.random()*253)+1;//隨機(jī)數(shù)取一個值范圍是（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;//用于改變其中一個顏色快的顏色(這里可以自定義改變透明度)
    for(var i=0;i<event*event;i++){//創(chuàng)建循環(huán)循環(huán)event*2次，每當(dāng)點擊顏色塊后event變化
     this._creat=document.createElement("div");//動態(tài)創(chuàng)建一個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左浮動
     obox.appendChild(this._creat);//作為孩子添加到obox中
    }
    var odiv=document.getElementsByClassName("creat");//獲取一下創(chuàng)建好的div
    var numRandom=parseInt(Math.random()*odiv.length);//隨機(jī)取到其中一個改變其透明度值
    odiv[numRandom].style.opacity=this.diffOpacity;
    odiv[numRandom].onclick=function(){
    /*給取到的div綁定事件，當(dāng)點擊時先清空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>

關(guān)于“Javascript如何實現(xiàn)找不同色塊的游戲”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學(xué)到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。

分享名稱：Javascript如何實現(xiàn)找不同色塊的游戲
本文網(wǎng)址：http://muchs.cn/article30/gpghso.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供軟件開發(fā)、企業(yè)建站、自適應(yīng)網(wǎng)站、ChatGPT、企業(yè)網(wǎng)站制作、外貿(mào)建站

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容