javascript編寫貪吃蛇游戲

2024-05-06 16:22:50

字體：大中小

來源：轉載

供稿：網友

這篇文章主要介紹了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>