使用JS代碼實(shí)現(xiàn)俄羅斯方塊游戲

簡(jiǎn)單的JS俄羅斯方塊游戲源碼，先給大家展示下效果圖，如果大家感覺不錯(cuò)，請(qǐng)參考實(shí)現(xiàn)代碼，

10多年的新羅網(wǎng)站建設(shè)經(jīng)驗(yàn)，針對(duì)設(shè)計(jì)、前端、開發(fā)、售后、文案、推廣等六對(duì)一服務(wù)，響應(yīng)快，48小時(shí)及時(shí)工作處理。網(wǎng)絡(luò)營(yíng)銷推廣的優(yōu)勢(shì)是能夠根據(jù)用戶設(shè)備顯示端的尺寸不同，自動(dòng)調(diào)整新羅建站的顯示方式，使網(wǎng)站能夠適用不同顯示終端，在瀏覽器中調(diào)整網(wǎng)站的寬度，無(wú)論在任何一種瀏覽器上瀏覽網(wǎng)站，都能展現(xiàn)優(yōu)雅布局與設(shè)計(jì)，從而大程度地提升瀏覽體驗(yàn)。成都創(chuàng)新互聯(lián)公司從事“新羅網(wǎng)站設(shè)計(jì)”,“新羅網(wǎng)站推廣”以來(lái)，每個(gè)客戶項(xiàng)目都認(rèn)真落實(shí)執(zhí)行。

效果圖：

使用JS代碼實(shí)現(xiàn)俄羅斯方塊游戲

代碼如下，復(fù)制即可使用：





使用JS實(shí)現(xiàn)俄羅斯方塊游戲








  
    難度：
    
    
    
      ↑：變換

      ←：左移

      →：右移

      ↓：加速

    
  
  
  
    下一個(gè)圖形:
    
    
    分?jǐn)?shù)：0
  


適用瀏覽器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下瀏覽器。

GameFrame.js

function GameFrame(unit,row,col)
{
  //單位的像素
  this.unit = unit;
  //橫向單位個(gè)數(shù)(列),,(一行的個(gè)數(shù))
  this.row = row;
  //縱向單位個(gè)數(shù)(行)，，(一列的個(gè)數(shù))
  this.col =col;
  //保存頁(yè)面創(chuàng)建div容器的屬性
  this.Content;
  //小圖形
  this.samlldiv;
  //定時(shí)器id
  this.intervalid;
  //速度
  this.speed =document.getElementById("level").value;
  //速度是否改變
  this.ChangeSped=0;
  //記錄每個(gè)位置是否有div
  this.datas=[];
  //記錄消除行數(shù)相應(yīng)的分?jǐn)?shù)
  this.score=[0,100,300,600,1000]
  //記錄當(dāng)前的圖形的下標(biāo)
  this.now;
  //記錄下一個(gè)圖形的下標(biāo)
  this.next;
  //記錄當(dāng)前的圖形的顏色
  this.nowcolor;
  //記錄下一個(gè)圖形的顏色
  this.nextcolor;
  //保存7種圖形相對(duì)坐標(biāo)的數(shù)組
  this.arr = "0,1,0,2,1,2,2,2;0,1,1,1,1,2,2,2;0,1,0,2,1,1,2,1;0,2,1,1,1,2,2,1;1,0,1,1,1,2,1,3;1,1,1,2,2,1,2,2;1,1,2,0,2,1,2,2".split(";");
  //保存小方塊的顏色
  this.color=["red","blue","green","yellow","#00FFFF","#930093","#F80000","#984B4B"];
  //初始化容器div
  this.init = function()
  {
    //創(chuàng)建div
    var div = document.createElement("div");
    //設(shè)置div的寬度
    div.style.width = (this.unit*this.row)+"px";
    //設(shè)置div的高度
    div.style.height=(this.unit*this.col)+"px";
    //設(shè)置div的樣式
    div.className="MainFrame";
    div.id="MainFrame";
    //加入到body中
    document.getElementById("TFrime").appendChild(div);
    this.Content =div; //保存div的引用
    //初始化數(shù)組
    for(var i=0;i

graph.js

function Graph(frame) {
  //保存7種圖形相對(duì)坐標(biāo)的數(shù)組
//  var arr = "0,1,0,2,1,2,2,2;0,1,1,1,1,2,2,2;0,1,0,2,1,1,2,1;0,2,1,1,1,2,2,1;1,0,1,1,1,2,1,3;1,1,1,2,2,1,2,2;1,1,2,0,2,1,2,2".split(";");
  //保存4個(gè)小圖形的數(shù)組
  this.divs = [];
  //外部容器div的數(shù)組
  this.parentFrame = frame;
  //圖形橫縱偏移
  this.x = 0;
  this.y = 0;
  //記錄圖形的坐標(biāo)數(shù)組
  this.zb = [];
  //記錄消除的行數(shù)
  this.line=0;
  //初始化小圖形的方法
  this.init = function(rand,color) {
      //計(jì)算圖形其實(shí)坐標(biāo)的單位
      var startleft = (this.parentFrame.row - 4) / 2;
      this.x = startleft;
      //隨機(jī)生成圖形數(shù)組下標(biāo)
//      var rand = Math.floor(Math.random() * arr.length);
      //分解圖形的坐標(biāo)
      var smallarr = this.parentFrame.arr[rand].split(",");
      this.zb = smallarr;
      //循環(huán)設(shè)置小div的 left和top
      for (var i = 0; i < 8; i += 2) {
        //創(chuàng)建小div
        var smalldiv = document.createElement("div");
        //設(shè)置樣式
        smalldiv.className = "smallDiv";
        //設(shè)置顏色
        smalldiv.style.backgroundColor=color;
        //定義高寬
        smalldiv.style.width = (this.parentFrame.unit - 2) + "px";
        smalldiv.style.height = (this.parentFrame.unit - 2) + "px";
        //設(shè)置小div的top
        smalldiv.style.top = ((smallarr[i] - 0) * this.parentFrame.unit) + "px";
        //設(shè)置小div的left
        smalldiv.style.left = (((smallarr[i + 1] - 0) + startleft) * this.parentFrame.unit) + "px";
        //保存小div的引用
        this.divs.push(smalldiv);        
        //加入到外部容器
        document.getElementById("MainFrame").appendChild(smalldiv);
      }
      //執(zhí)行自動(dòng)向下移動(dòng)
      //this.parentFrame.intervalid = setInterval(autoMoveDown, this.parentFrame.speed);
    }
    //左移動(dòng)
  this.moveleft = function() {
      //    var canmove = true;
      //    //判斷能否左移動(dòng)
      //    
      //    for(var i=0;i=parseInt(this.parentFrame.Content.style.width))
    //      {
    //        canmove = false;
    //        break;
    //      }
    //    }
    var temp = canMove(this.zb, this.x, this.y, this.parentFrame, 1);
//    alert(temp);
    console.log(temp);
    if (canMove(this.zb, this.x, this.y, this.parentFrame, 1)) {
      this.x += 1;
      for (var i = 0; i < this.divs.length; i++) {
        var left = parseInt(this.divs[i].style.left);
        this.divs[i].style.left = (left + this.parentFrame.unit) + "px";
      }
    }
  }
  //變形
  this.change = function() {
    //變形的公式
    //小div的2個(gè)相對(duì)坐標(biāo)點(diǎn)改變  x = y ; y= 3-x; 比如 （0，1） 變化之后 就是  x=1，y=3-0 -> (1,3)
    //循環(huán)4個(gè)小div
    if (!canMove(this.zb, this.x, this.y, this.parentFrame, 4)) {
      if (this.x < 0) {
        this.x += 1;
      } else {
        this.x -= 1;
      }
    }
    for (var i = 0; i < this.divs.length; i++) {
      //根據(jù)公式改變每個(gè)div的相對(duì)偏移量，2個(gè)一改
      var temp = this.zb[i * 2]
      this.zb[i * 2] = this.zb[i * 2 + 1];
      this.zb[i * 2 + 1] = 3 - temp;
      //根據(jù)改變后的偏移量計(jì)算圖形的當(dāng)前l(fā)eft和top
      this.divs[i].style.top = ((this.y + parseInt(this.zb[i * 2])) * this.parentFrame.unit) + "px";
      this.divs[i].style.left = ((this.x + parseInt(this.zb[i * 2 + 1])) * this.parentFrame.unit) + "px";
    }
  }
  this.movedown = function() {
    var $this = this =="window" ? this.frame.samlldiv : this;
    if (canMove($this.zb, $this.x, $this.y, $this.parentFrame, 3)) {
      $this.y += 1;
      for (var i = 0; i < $this.divs.length; i++) {
        var top = parseInt($this.divs[i].style.top);
        $this.divs[i].style.top = (top + $this.parentFrame.unit) + "px";
      }
      return false;
    } else {
      clearInterval($this.parentFrame.intervalid);
//      var temp = $this.parentFrame.Content.getElementsByTagName("div");
      for (var i=0;i<$this.divs.length;i++) {
        //div變灰
        //$this.divs[i].className ="smallDivblack";
        var $y = $this.y + parseInt($this.zb[i*2]);
        var $x = $this.x+parseInt($this.zb[i*2+1]);
//        debugger;
        $this.parentFrame.datas[$y*$this.parentFrame.row+ $x] =1;
        $this.divs[i].dataset.row=$y;  //記錄div所在的行
        $this.divs[i].dataset.col=$x;  //記錄div所在的列
        $this.divs[i].className="smallDivblack";
        $this.divs[i].style.backgroundColor="black";
        //$this.parentFrame.datas[]
      }
        //消行并計(jì)分
        for (var i= 0;i<$this.parentFrame.col;i++) {    //i為行
          //判斷是否滿足消行條件
          for (var j=0;j<$this.parentFrame.row;j++) {    //j為列
            if($this.parentFrame.datas[i*$this.parentFrame.row+ j] !=1){
              break;
            }
          }
          //消行，將該行上面的所有div下移一行
          if(j==$this.parentFrame.row){
            var x;    //記錄div在哪一列
            var y;    //記錄div在哪一行
            var getsmalldiv=document.getElementById("TFrime").getElementsByClassName("smallDivblack");//得到小div
            for (var a=0;a0;a--) {
              for (var b=0;b= f.row)
          {
            return false;
          }else if(f.datas[(parseInt(zb[i + 1]) + x + 1)+(y+parseInt(zb[i]))*f.row] !=0)
          {
            return false;
          }
        }
        break;
      case 2:
        for (var i = 0; i < zb.length; i += 2) {
          if (parseInt(zb[i + 1]) + x - 1 < 0 ) {
            return false;
          }else if(f.datas[(parseInt(zb[i + 1]) + x - 1)+(y+parseInt(zb[i]))*f.row] !=0)
          {
            return false;
          }
        }
        break;
      case 3:
        for (var i = 0; i < zb.length; i += 2) {
          if (parseInt(zb[i]) + y + 1 >= f.col ||
          f.datas[(parseInt(zb[i + 1]) + x)+(parseInt(zb[i]) + y+1)*f.row] !=0) {
            return false;
          }
        }
        break;
      case 4:
        for (var i = 0; i < zb.length; i += 2) {
          var temp = 3 - zb[i];
          if (temp + x < 0 || temp + x >= f.row) {
            return false;
          }
        }
        break;
    }
    return true;
  }
  this.rescore=function(){
    var gamescore=document.getElementById("score");
    gamescore.innerHTML=parseInt(gamescore.innerHTML)+this.parentFrame.score[this.line];
  }
}

index.js

var frame;
function initGame()
{
  frame = new GameFrame(16,20,38);
  frame.init();
  document.body.addEventListener("keydown",MoveOrChange)
}
function changespeed(){
  frame.changespeed();
}
function regame(){
  location.reload();
}
function MoveOrChange()
{
  switch(event.keyCode)
  {
    case 38: //變形（上方向鍵）
      frame.Change();
      break;
    case 37: //左移動(dòng)
      frame.MoveLeft();
      break;
    case 39://右移動(dòng)
      frame.MoveRight();
      break;
    case 40: //向下
      frame.MoveDown();
      break;
  }
}

總結(jié)

以上所述是小編給大家介紹的使用JS代碼實(shí)現(xiàn)俄羅斯方塊游戲，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)創(chuàng)新互聯(lián)網(wǎng)站的支持！

網(wǎng)站欄目：使用JS代碼實(shí)現(xiàn)俄羅斯方塊游戲
本文地址：http://www.xueling.net.cn/article/iejghg.html

老熟女激烈的高潮_日韩一级黄色录像_亚洲1区2区3区视频_精品少妇一区二区三区在线播放_国产欧美日产久久_午夜福利精品导航凹凸

重慶分公司，新征程啟航

使用JS代碼實(shí)現(xiàn)俄羅斯方塊游戲

其他資訊