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=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>
以上所述就是本文的全部内容了，希望大家能够喜欢。
相关文章
这篇文章主要介绍了微信小程序实现列表滚动头部吸顶的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-07-07
在我们日常工作的时候，利用javaScript判断一个字符串中是否包括有数字和"-"，在一些表单提交的地方，这是比较有用的常规判断，这里收集有几种不同的方法，最后还将简要介绍下isNAN函数的使用方法和例子，有需要的朋友们可以参考借鉴，下面来一起看看吧。2016-11-11
本篇文章主要是对js中window.open()的所有参数进行了详细的介绍，需要的朋友可以过来参考下，希望对大家有所帮助2014-01-01
这篇文章主要为大家详细介绍了微信小程序自定义底部弹出框，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-07-07
js如何使用Pagination+PageHelper实现分页
本文主要介绍了js如何使用Pagination+PageHelper实现分页，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-06-06
这篇文章主要分享了一则JavaScript阻止事件冒泡示例,需要的朋友可以参考下2014-12-12
记录微信小程序中使用wxss加载图片并实现动画的方式，最终实现loading效果。本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友参考下吧2018-08-08
这篇文章主要介绍了javascript trie单词查找树的示例，详细的介绍了trie的概念和实现，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-01-01
这篇文章主要为大家详细介绍了小程序实现左右来回滚动字幕效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-12-12
这篇文章主要介绍了JS中去掉array中重复元素的方法,需要的朋友可以参考下2017-05-05
最新评论