JavaScript menulis kemahiran permainan ular_javascript-tutorial js-php.cn

Rumah

hujung hadapan web

tutorial js

JavaScript menulis kemahiran permainan ular_javascript

May 16, 2016 pm 03:51 PM

javascript Ular

Kodnya sangat mudah, tidak banyak BB di sini, kawan-kawan, lihat sahaja contoh

&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
&lt;head&gt;
&lt;meta http-equiv="Content-Type" content="text/html;charset=gb2312" /&gt;
&lt;title&gt;无标题文档&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;style&gt;
*{
  margin:0;
  padding:0;
}
#wrap{
  position:relative;width:400px;height:400px;
  border:1px solid #ccc;
  margin:10px auto;
}
.snak, .snakBody{
  position:absolute;
  width:10px;height:10px;
  background:#666;
}
.food{
  position:absolute;width:10px;height:10px;
  background:#09F;display:block;
}
&lt;/style&gt;
&lt;div id="wrap"&gt;
  
&lt;/div&gt;
&lt;script src="http://ftp152341.host180.web522.com/%E6%89%93%E8%9C%9C%E8%9C%82/zepto.js"&gt;&lt;/script&gt;
&lt;script&gt;
var Snak, Food;;

Food = function(op){ //op为zepto对象
  var food = $('&lt;span class="food"&gt;&lt;/span&gt;');
  food.css({ left : Math.floor(((op[0].clientWidth-10)*Math.random())), top : Math.floor(((op[0].clientHeight-10)*Math.random())) })
  op.append( food );
};
Snak = function(op){
  this.obj = document.createElement('div');
  this.obj.className = 'snak';
  this.op = op;
};
Snak.prototype.ev = function(){
  var _this = this, code;
  $(window).bind('keydown',function(e){
    clearInterval(_this.downTimer);
    code = e.keyCode;
    _this.downTimer = setInterval(function(){
      var l = _this.obj.offsetLeft, t = _this.obj.offsetTop;
      switch( code ){
        case 37 :
          l = l - 5;
        break;
        case 38 : 
          t = t - 5;
        break;
        case 39 : 
          l = l + 5;
        break;
        case 40:
          t = t + 5;
        break;
      };
      if( (l&lt;0) || (t&lt;0) || (l&gt;400) || (t&gt;400)){location.reload()};
      _this.obj.style.left = l + 'px';
      _this.obj.style.top = t + 'px';
      var snakB = $('.snakBody');
      for(var i=snakB.length-1; i&gt;=0; i--){
        if(i == 0){
          snakB[0].style.left = l + 'px';
          snakB[0].style.top = t + 'px';
        }else{
          snakB[i].style.left = snakB[i-1].offsetLeft + 'px';
          snakB[i].style.top = snakB[i-1].offsetTop + 'px';
        };
      };
      if( pz(_this.obj,$('.food')[0]) ){
        $('.food').remove();
        new Food(wrap);
        $('&lt;div class="snakBody"&gt;&lt;/div&gt;').appendTo(wrap)
      };
    },30);
  }).bind('keyup',function(e){
  });
};
function pz(obj1,obj2){  
  var L1 = obj1.offsetLeft;
  var T1 = obj1.offsetTop;
  var R1 = L1 + obj1.offsetWidth;
  var B1 = T1 + obj1.offsetHeight;
  
  var L2 = obj2.offsetLeft;
  var T2 = obj2.offsetTop;
  var R2 = L2 + obj2.offsetWidth;
  var B2 = T2 + obj2.offsetHeight;
  if(L1 &gt;= R2 || T1 &gt;= B2 || R1 &lt;= L2 || B1 &lt;= T2){
    return false;
  }
  return true;
};
var wrap = $('#wrap'),snak = new Snak(food);
var food = new Food( wrap );
snak.ev();
wrap.append( $('&lt;div class="snakBody"&gt;&lt;/div&gt;') )[0].appendChild( snak.obj );
&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;

Salin selepas log masuk

Di atas adalah keseluruhan kandungan artikel ini, saya harap anda semua menyukainya.

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