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 相关文章推荐
IE与Firefox在JavaScript上的7个不同写法小结
Sep 14 Javascript
火狐textarea输入法的bug的触发及解决
Jul 24 Javascript
js中Image对象以及对其预加载处理示例
Nov 20 Javascript
给ListBox添加双击事件示例代码
Dec 02 Javascript
javascript实时获取鼠标坐标值并显示的方法
Apr 30 Javascript
JS实现PC手机端和嵌入式滑动拼图验证码三种效果
Feb 15 Javascript
TypeScript入门-基本数据类型
Mar 28 Javascript
AngularJS实现select的ng-options功能示例
Jul 12 Javascript
babel之配置文件.babelrc入门详解
Feb 22 Javascript
详解JS函数stack size计算方法
Jun 18 Javascript
JS重学系列之聊聊new操作符
Mar 04 Javascript
vue 输入电话号码自动按3-4-4分割功能的实现代码
Apr 30 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 CURL获取邮箱地址的详解
2013/06/03 PHP
php文件夹的创建与删除方法
2015/01/24 PHP
php数组冒泡排序算法实例
2016/05/06 PHP
Laravel框架下的Contracts契约详解
2020/03/17 PHP
一段好玩的JavaScript代码
2006/12/01 Javascript
javascript YUI 读码日记之 YAHOO.util.Dom - Part.4
2008/03/22 Javascript
window.name代替cookie的实现代码
2010/11/28 Javascript
jQuery点击tr实现checkbox选中的方法
2013/03/19 Javascript
javascript实现捕捉键盘上按下的键
2015/05/05 Javascript
jquery验证邮箱格式是否正确实例讲解
2015/11/16 Javascript
Node.js文件操作方法汇总
2016/03/22 Javascript
JavaScript基本类型值-Undefined、Null、Boolean
2017/02/23 Javascript
微信小程序新增的拖动组件movable-view使用教程
2017/05/20 Javascript
Angular js 实现添加用户、修改密码、敏感字、下拉菜单的综合操作方法
2017/10/24 Javascript
快速搭建vue2.0+boostrap项目的方法
2018/04/09 Javascript
Electron-vue脚手架改造vue项目的方法
2018/10/22 Javascript
uni-app微信小程序登录并使用vuex存储登录状态的思路详解
2019/11/04 Javascript
vue 实现通过vuex 存储值 在不同界面使用
2019/11/11 Javascript
JS实现简单的表格增删
2020/01/16 Javascript
[03:14]辉夜杯主赛事 12月25日每日之星
2015/12/26 DOTA
[55:48]VGJ.S vs TNC Supermajor 败者组 BO3 第二场 6.6
2018/06/07 DOTA
python回调函数用法实例分析
2015/05/09 Python
Python常用时间操作总结【取得当前时间、时间函数、应用等】
2017/05/11 Python
python实现决策树ID3算法的示例代码
2018/05/30 Python
pandas 把数据写入txt文件每行固定写入一定数量的值方法
2018/12/28 Python
基于Numba提高python运行效率过程解析
2020/03/02 Python
Pycharm无法打开双击没反应的问题及解决方案
2020/08/17 Python
html5 css3 动态气泡按钮实例演示
2012/12/02 HTML / CSS
Hotter Shoes英国官网:英伦风格,舒适的鞋子
2017/12/28 全球购物
本科生求职简历的自我评价
2013/10/21 职场文书
集团薪酬管理制度
2014/01/13 职场文书
机电专业求职信
2014/06/14 职场文书
工作表扬信范文
2015/01/17 职场文书
鲁迅故里导游词
2015/02/05 职场文书
Django集成富文本编辑器summernote的实现步骤
2021/05/31 Python
Python matplotlib可视化之绘制韦恩图
2022/02/24 Python