js實現(xiàn)踩五彩塊游戲

本文實例為大家分享了js實現(xiàn)踩五彩塊游戲的具體代碼，供大家參考，具體內(nèi)容如下

10年積累的做網(wǎng)站、網(wǎng)站制作經(jīng)驗，可以快速應對客戶對網(wǎng)站的新想法和需求。提供各種問題對應的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡服務。我雖然不認識你，你也不認識我。但先制作網(wǎng)站后付款的網(wǎng)站建設流程，更有白云鄂免費網(wǎng)站建設讓你可以放心的選擇與我們合作。

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>Document</title>
 <link rel="stylesheet" href="demo.css" >
</head>
<body>
 <div class="wrapper">
  <div id = "go">Game Start</div>
  <!-- 運動的dom -->
  <div id="main"></div>
 </div>
 <script src = "demo.js"></script>
</body>
</html>

CSS:

*{
 margin: 0;
 padding: 0;
}
.wrapper{
 position: relative;
 width: 400px;
 height: 600px;
 border: 1px solid black;
 margin :160px auto;
 overflow: hidden;
}
#go{
 position:absolute;
 left:0;
 top: 0;
 width: 100%;
 height: 100px;
 border-bottom: 1px solid #000;
 font-weight: bolder;
 font-size: 60px;
 line-height: 100px;
 text-align: center;
 cursor: pointer;
 z-index: 999;
}
#main{
 position: relative;
 width:400px;
 height: 600px;
 /* border:1px solid red; */
}
.row{
 width: 400px;
 height: 150px;
}
.row div{
 /* 塊級元素水平排列 */
 float: left;
 width: 100px;
 height: 150px;
 border: 1px solid #000;
 /* 混雜模式盒模型 */
 box-sizing: border-box;
 /* 最終顯示寬度為設定寬度 */
}

js:

// bindEvent顯示開始,清除 creatDiv增加一行 move運動 判斷勝負 計分
var go = document.getElementById('go');
// 運動趨于
var main = document.getElementById('main');
var timer;
var speed = 5,num = 0,flag = true;

function bindEvent() {
 go.addEventListener('click', function () {
  go.style.display = 'none';
  move();

 });
 main.addEventListener('click',function(e){
  if(flag){
  var tar = e.target;
  if(tar.className == 'tar'){
   tar.style.backgroundColor = '#bbb';
   tar.classList.remove('tar');
   num++;

  }else{
   clearInterval(timer);
   alert('游戲結束吧得分'+num);
   flag = false;
  }
  }

 });

}
bindEvent();
function move() {
 timer = setInterval(function(){
  // 初始位置+速度
  var step = parseInt(main.offsetTop)+speed;
  // 當前位置付給新的top
  main.style.top = step+'px';
  if(parseInt(main.offsetTop)>=0){
   main.style.top = '-150px';
   cDiv();

  }
  // 移除多余的div
  var len = main.childNodes.length;
  if(len == 6){
   var lastRow = main.childNodes[len -1];
   // 是否結束
   for(var i = 0;i<4;i++){
   if(lastRow.childNodes[i].classList.contains('tar')){
    clearInterval(timer);
    alert('游戲結束得分：'+num);
    flag = false;

   }}

   main.removeChild(main.childNodes[len - 1]);

  }

 }
 ,20 );
}
// 創(chuàng)建行和列
function cDiv() {
 // 生成數(shù)組顏色
 var color = ['red','blue','green','pink'];
 // 創(chuàng)建一個行
 var oDiv = document.createElement('div');
 // 生成一個隨機數(shù)
 var index = Math.floor(Math.random()*4);
 // 創(chuàng)建四列
 for (var i = 0; i < 4; i++) {
  // 創(chuàng)建四個列塊
  var iDiv = document.createElement('div');
  // 行里面插入列
  oDiv.appendChild(iDiv);

 }
 // 被點擊的div 
 var clickDiv = oDiv.childNodes[index];
 clickDiv.setAttribute('class','tar');
 // 顏色隨機
 clickDiv.style.backgroundColor = color[index];
 oDiv.setAttribute('class', 'row');
 // 如果行為空則插入，如果不為空則向上插入；
 if (main.childNodes.length == 0) {
  main.appendChild(oDiv);
 } else {
  main.insertBefore(oDiv, main.childNodes[0]);
 }

}

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。

網(wǎng)站欄目：js實現(xiàn)踩五彩塊游戲
標題URL：http://chinadenli.net/article34/giegse.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供動態(tài)網(wǎng)站、微信小程序、關鍵詞優(yōu)化、電子商務、品牌網(wǎng)站設計、品牌網(wǎng)站制作

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

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

欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

js實現(xiàn)踩五彩塊游戲