javascript编写贪吃蛇游戏


Posted in Javascript onJuly 07, 2015

代码很简单,这里就不多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=gb2312" />
<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>

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

Javascript 相关文章推荐
js prototype截取字符串函数
Apr 01 Javascript
基于JQuery实现的类似购物商城的购物车
Dec 06 Javascript
asp.net刷新本页面的六种方法总结
Jan 07 Javascript
javascript数组操作(创建、元素删除、数组的拷贝)
Apr 07 Javascript
javascript文件加载管理简单实现方法
Jul 25 Javascript
clipboard.js无需Flash无需依赖任何JS库实现文本复制与剪切
Oct 10 Javascript
关于JavaScript和jQuery的类型判断详解
Oct 08 Javascript
详解JS获取HTML DOM元素的8种方法
Jun 17 Javascript
ndm:NPM的桌面GUI应用程序
Oct 15 Javascript
微信小程序实现的五星评价功能示例
Apr 25 Javascript
解决vue axios跨域 Request Method: OPTIONS问题(预检请求)
Aug 14 Javascript
JavaScript 几种循环方式以及模块化的总结
Sep 03 Javascript
Javascript编写2048小游戏
Jul 07 #Javascript
利用JavaScript脚本实现滚屏效果的方法
Jul 07 #Javascript
JavaScript编写连连看小游戏
Jul 07 #Javascript
使用JavaScript制作一个简单的计数器的方法
Jul 07 #Javascript
JavaScript编写推箱子游戏
Jul 07 #Javascript
使用JavaScript实现连续滚动字幕效果的方法
Jul 07 #Javascript
理解JavaScript的变量的入门教程
Jul 07 #Javascript
You might like
php5中类的学习
2008/03/28 PHP
利用PHP生成静态HTML文档的原理
2012/10/29 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(十二)
2014/06/25 PHP
PHP编写登录验证码功能 附调用方法
2016/05/19 PHP
Javascript实现的分页函数
2007/02/07 Javascript
jQuery 性能优化指南(3)
2009/05/21 Javascript
扩展Jquery插件处理mouseover时内部有子元素时发生样式闪烁
2011/12/08 Javascript
在NodeJS中启用ECMAScript 6小结(windos以及Linux)
2014/07/15 NodeJs
通过javascript进行UTF-8编码的实现方法
2016/06/27 Javascript
使用React实现轮播效果组件示例代码
2016/09/05 Javascript
微信小程序学习之数据处理详解
2017/07/05 Javascript
React Native react-navigation 导航使用详解
2017/12/01 Javascript
JS 中document.write()的用法和清空的原因浅析
2017/12/04 Javascript
VSCode中如何利用d.ts文件进行js智能提示
2018/04/13 Javascript
JS 中可以提升幸福度的小技巧(可以识别更多另类写法)
2018/07/28 Javascript
Python中使用pprint函数进行格式化输出的教程
2015/04/07 Python
Numpy array数据的增、删、改、查实例
2018/06/04 Python
python控制nao机器人身体动作实例详解
2019/04/29 Python
Django给admin添加Action的步骤详解
2019/05/01 Python
python 实现从高分辨图像上抠取图像块
2020/01/02 Python
8种常用的Python工具
2020/08/05 Python
PyCharm设置注释字体颜色以及是否倾斜的操作
2020/09/16 Python
Shopee越南:东南亚与台湾电商平台
2019/02/03 全球购物
如何查找网页漏洞
2016/06/22 面试题
swtich是否能作用在byte上,是否能作用在long上,是否能作用在String上
2013/07/06 面试题
工程业务员工作职责
2013/12/07 职场文书
煤矿班组长的职责
2013/12/25 职场文书
代理班主任的自我评价
2014/02/04 职场文书
师德建设实施方案
2014/03/21 职场文书
营销部内勤岗位职责
2014/04/30 职场文书
英语四级考试作弊检讨书
2014/09/29 职场文书
团员年度个人总结
2015/02/26 职场文书
高校自主招生自荐信2015
2015/03/04 职场文书
酒店财务经理岗位职责
2015/04/08 职场文书
利用Python将list列表写入文件并读取的方法汇总
2022/03/25 Python
怎么禁用Win11输入法 最新Win11输入法关闭教程
2022/08/05 数码科技