Rumah > hujung hadapan web > tutorial js > Penulisan Javascript idea Tetris dan contoh_kemahiran javascript

Penulisan Javascript idea Tetris dan contoh_kemahiran javascript

WBOY
Lepaskan: 2016-05-16 15:51:15
asal
1126 orang telah melayarinya

Permainan Tetris juga serasi dengan terminal mudah alih Kesukaran permainan ini ialah cara membalikkan blok Cara saya melaksanakannya ialah meletakkan bongkah ke dalam tatasusunan dua dimensi, dan kemudian memutar tatasusunan dua dimensi. lawan jam.

Terdapat kaedah lain, seperti secara langsung menggunakan pembolehubah global untuk mewakili arah, dan memutarkan blok mengikut pembolehubah ini apabila membalikkan, tetapi lebih banyak kod perlu ditulis.

Saya mencari artikel tentang algoritma di perpustakaan, .... Saya kelihatan sangat sedih:

Tangkapan skrin permainan untuk PC:

Tangkapan skrin permainan versi mudah alih:

Enjin templat menggunakan HandlebarsJS, dan untuk modularisasi yang lebih baik, requireJS juga digunakan.... Ia tidak berfungsi dengan baik;

Jalankan kod berikut

var cfg = {
  width:14,
  height:20,
  time : 400
};
requirejs.config({
  baseUrl: 'libs',
  paths: {
    app: '../app'
  }
});

requirejs(["app/controller/mainController","app/view/mobileDOM","app/util"], function(con, mobileDOM, util) {

  if(util.isMobile()) {
    mobileDOM.addDOM();
  };
  con();
});

Salin selepas log masuk
Permainan ini terutamanya mempunyai tiga lapisan model: lapisan model blok permainan, lapisan model skor permainan dan keseluruhan lapisan model struktur antara muka permainan

Hanya terdapat satu lapisan kawalan, iaitu, apabila pengguna mengklik butang mula permainan, permainan akan bermula. Jika ia adalah PC, ia akan mendengar acara keydown buat DOM untuk empat kekunci arah dan dengar klik kekunci arah, peristiwa itu akan menyebabkan model data blok semasa berputar Bagi paparan, itu adalah masalah lapisan paparan 'Jangan bimbang tentangnya buat masa ini Logik utama termasuk penjanaan blok secara rawak, pengesanan perlanggaran blok, penghapusan blok, peningkatan markah, dan menjana semula blok secara rawak, dsb.:

Jalankan kod berikut

define(["app/util"],function(util) {
  //分数模块,游戏开始的时候会用到;
  var score = {};
  require(["app/model/score"],function(defineScore) {
    score = defineScore;
  });

  var startGame = function() {
    //把当前的input元素禁用;
    $(this).attr("disabled","true");
    requirejs(["app/model/data","app/view/init","app/model/Block"], function(data, view, Block){
      //初始化方块;
      var block = new Block;
      var mapData = {};

      //方块发生改变的时候,我们用回调重新渲染界面;
      block.onupdate( function() {
        var blockData = this.get();
        //把数据格式转化成map数据;
        mapData = data.extend(blockData);
        $("#table").html( view( mapData ) );
      });

      block.testTouch = data.testTouch;

      //如果元素触底了或者是元素已经被卡主不能动的情况下;
      block.onend(function() {
        //这个说明当前的block触底了
        data.set( mapData );
        //我们需要重新生成一个方块, 直接调用newBlock即可;
        block.newBlock();
        //通过data计算,如果有连接起来的一条线,就执行SCORE回调, 随之会更新当前界面的分值;
        //如果方块跑到了最上面就是游戏失败了;
        data.oncalculate( score.addScore , block.destory.bind(block));
      });

      //现在才开始绑定事件
      if(!util.isMobile()) {
        $(window).keydown(function(ev) {
          if(ev.keyCode === 37) {
            block.add(block.moveLeft,"left");
          }else if( ev.keyCode === 39 ) {
            block.add(block.moveRight,"right");
          }else if( ev.keyCode === 40 ) {
            block.add(block.moveDown,"down");
          }else if( ev.keyCode === 38 ) {
            block.rotate();
          };
        });
      }else{
        $(".arrow-up").tap(function() {
          block.rotate();
        });
        $(".arrow-down").tap(function() {
          block.add(block.moveDown,"down");
        });
        $(".arrow-left").tap(function() {
          block.add(block.moveLeft,"left");
        });
        $(".arrow-right").tap(function() {
          block.add(block.moveRight,"right");
        });
      };
    });
  };

  //绑定界面事件 ,keyDown;
  var bindEvent = function() {
    //start....
    $("#start").click(startGame)
  };
  //为移动端添加DOM节点,
  //然后绑定移动端的事件;

  return function() {
    bindEvent();
  };
});

Salin selepas log masuk
Tetingkap utama permainan dilihat secara langsung sebagai tatasusunan dua dimensi Semua blok yang akan dipaparkan adalah data dalam tatasusunan, data dikemas kini kepada paparan sekali sesaat seperti berikut:

Jalankan kod berikut

  <script type="text/x-handlebars-template" id="tpl-td">
    {{#each this}}
      <tr>
        {{#each this}}
          <td class="{{#if this}}block{{/if}}">
          </td>
        {{/each}}
      </tr>
    {{/each}}
  </script>

Salin selepas log masuk
Untuk menjadikan keseluruhan kandungan dan gesaan lebih cantik, pemalam segera zepto.alert dan bootStrap digunakan;

DEMO Dalam Talian:

Buka

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan