javascript编写贪吃蛇游戏

 更新时间:2015年07月07日 11:25:44   投稿:hebedich   我要评论
这篇文章主要介绍了javascript编写贪吃蛇游戏的代码,非常简单,也很好玩,有需要的童鞋们可以参考下。

代码很简单,这里就不多BB了,小伙伴们直接看示例吧

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
<style>
*{
  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;
}
</style>
<div id="wrap">
</div>
<script src="http://ftp152341.host180.web522.com/%E6%89%93%E8%9C%9C%E8%9C%82/zepto.js"></script>
<script>
var Snak, Food;;
Food = function(op){ //op为zepto对象
  var food = $('<span class="food"></span>');
  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<0) || (t<0) || (l>400) || (t>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>=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);
        $('<div class="snakBody"></div>').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 >= R2 || T1 >= B2 || R1 <= L2 || B1 <= T2){
    return false;
  }
  return true;
};
var wrap = $('#wrap'),snak = new Snak(food);
var food = new Food( wrap );
snak.ev();
wrap.append( $('<div class="snakBody"></div>') )[0].appendChild( snak.obj );
</script>
</body>
</html>

以上所述就是本文的全部内容了,希望大家能够喜欢。

相关文章

  • 解决layui-table单元格设置为百分比在ie8下不能自适应的问题

    解决layui-table单元格设置为百分比在ie8下不能自适应的问题

    今天小编就为大家分享一篇解决layui-table单元格设置为百分比在ie8下不能自适应的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • 浅谈js数据类型判断与数组判断

    浅谈js数据类型判断与数组判断

    下面小编就为大家带来一篇浅谈js数据类型判断与数组判断。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-08-08
  • Javascript实现动态菜单添加的实例代码

    Javascript实现动态菜单添加的实例代码

    在注册信息的时候,常常需要通过下拉菜单让用户选择,而且希望用户在第一个下拉框做的选择,影响第二个下拉框的内容。有时候,如果第一个下拉框不作出选择,第二个下拉框根本不会页面上显示,为了给用户呈现一个更清晰的页面。
    2013-07-07
  • js使浏览器窗口最大化实现代码(适用于IE)

    js使浏览器窗口最大化实现代码(适用于IE)

    点击最大化按钮后,浏览器的内容填充满显示器,浏览器窗口的边框被挤出显示器。而该js的最大化效果是浏览器的边框在显示器内显示,具体实现如下,感兴趣的朋友可以参考下
    2013-08-08
  • javascript如何实现暂停功能

    javascript如何实现暂停功能

    这篇文章主要介绍了javascript如何实现暂停功能,,Javascript本身没有暂停功能,同时vbscript也不能使用doEvents,故编写此函数实现此功能, 需要的朋友可以参考下
    2015-11-11
  • javascript瀑布流式图片懒加载实例解析与优化

    javascript瀑布流式图片懒加载实例解析与优化

    这篇文章主要针对javascript瀑布流式图片懒加载实例进行解析与优化,感兴趣的小伙伴们可以参考一下
    2016-02-02
  • Javascript编程中几种继承方式比较分析

    Javascript编程中几种继承方式比较分析

    这篇文章主要介绍了Javascript编程中几种继承方式比较分析,较为详细的分析了JavaScript继承的原理并对比分析了几种继承方式的实现技巧,需要的朋友可以参考下
    2015-11-11
  • 详解Webpack loader 之 file-loader

    详解Webpack loader 之 file-loader

    这篇文章主要介绍了详解Webpack loader 之 file-loader,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-11-11
  • 原生JS和jQuery操作DOM对比总结

    原生JS和jQuery操作DOM对比总结

    这篇文章主要给大家介绍了原生JS和jQuery操作DOM的一些对比总结,文中总结了很多的对比,相信对大家的学习或者工作能带来一定的帮助,需要的朋友可以参考借鉴,下面来一起看看吧。
    2017-01-01
  • Echarts基本用法_动力节点Java学院整理

    Echarts基本用法_动力节点Java学院整理

    这篇文章主要介绍了Echarts基本用法,详解的介绍了Echarts的基本用法和实例,有兴趣的可以了解一下
    2017-08-08

最新评论