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 相关文章推荐
CLASS_CONFUSION JS混淆 全源码
Dec 12 Javascript
javascript 写的一个简单的timer
Jul 30 Javascript
编写js扩展方法判断一个数组中是否包含某个元素
Nov 08 Javascript
js获取select标签的值且兼容IE与firefox
Dec 30 Javascript
Node.js的特点和应用场景介绍
Nov 04 Javascript
jQuery实现首页图片淡入淡出效果的方法
Jun 10 Javascript
javascript中tostring()和valueof()的用法及两者的区别
Nov 16 Javascript
socket.io学习教程之基础介绍(一)
Apr 29 Javascript
全面解析vue中的数据双向绑定
May 10 Javascript
react-native 完整实现登录功能的示例代码
Sep 11 Javascript
Vue + Elementui实现多标签页共存的方法
Jun 12 Javascript
基于vue--key值的特殊用处详解
Jul 31 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
php批量删除数据库下指定前缀的表以prefix_为例
2014/08/24 PHP
PHP实现返回JSON和XML的类分享
2015/01/28 PHP
PHP中使用register_shutdown_function函数截获fatal error示例
2015/04/21 PHP
老生常谈ThinkPHP中的行为扩展和插件(推荐)
2017/05/05 PHP
PHP预定义超全局数组变量小结
2018/08/20 PHP
ext 列表页面关于多行查询的办法
2010/03/25 Javascript
jQuery的实现原理的模拟代码 -4 重要的扩展函数 extend
2010/08/03 Javascript
JavaScript中的原型链prototype介绍
2014/12/30 Javascript
JavaScript学习心得之概述
2015/01/20 Javascript
javascript中sort()的用法实例分析
2015/01/30 Javascript
详解JavaScript中循环控制语句的用法
2015/06/03 Javascript
js强制把网址设为默认首页
2015/09/29 Javascript
jQuery解决IE6、7、8不能使用 JSON.stringify 函数的问题
2016/05/31 Javascript
jQuery的层级查找方式分析
2016/06/16 Javascript
深入浅析JavaScript中的3DES
2016/08/24 Javascript
ionic2打包android时gradle无法下载的解决方法
2017/04/05 Javascript
js链表操作(实例讲解)
2017/08/29 Javascript
微信小程序之页面跳转和参数传递的实现
2017/09/29 Javascript
Layer弹出层动态获取数据的方法
2018/08/20 Javascript
解决layer 动态加载select 失效的问题
2019/09/18 Javascript
[54:41]2018DOTA2亚洲邀请赛3月30日 小组赛B组 VGJ.T VS paiN
2018/03/31 DOTA
python去掉字符串中重复字符的方法
2014/02/27 Python
在Python中使用mongoengine操作MongoDB教程
2015/04/24 Python
代码讲解Python对Windows服务进行监控
2018/02/11 Python
Python文件操作基础流程解析
2020/03/19 Python
举例详解CSS3中的Transition
2015/07/15 HTML / CSS
Unineed中文官网:高端护肤美妆与时尚配饰,英国直邮
2020/07/23 全球购物
Perfume’s Club中文官网:西班牙美妆在线零售品牌
2020/08/24 全球购物
一套比较完整的软件测试人员面试题
2012/05/13 面试题
科研先进个人典型材料
2014/01/31 职场文书
四个太阳教学反思
2014/02/01 职场文书
妈妈的账单教学反思
2014/02/06 职场文书
中级会计职业生涯规划书
2014/03/01 职场文书
《植树问题》教学反思
2016/03/03 职场文书
2019终止劳动合同协议书最新范本!
2019/07/09 职场文书
关于JS中的作用域中的问题思考分享
2022/04/06 Javascript