贪吃蛇
来源：互联网 发布：网络机顶盒爱奇艺会员 编辑：程序博客网 时间：2024/05/01 00:31
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>开始</title>
<style type="text/css">
* {
margin:0;
}
li {
list-style:none;
padding:0;
}
img {
border:none;
}
.clear {
clear:both;
}
#center {
width:800px;
margin:0 auto;
}
#menu {
position: absolute;
top: 125px;
left: 75px;
width: 80px;
}
#show ,#time,#score {
width:150px;
float:left;
}
#field {
border:1px solid #ccc;
margin-top:10px;
float:left;
background-color:rgb(255,255,255);
}
.cell {
width:18px;
height:18px;
float:left;
border:1px solid #ccc;
background-color:grb(255,255,255);
}
.food {
background-color:grb(200,0,0);
}
.body {
background-color:grb(10,231,137);
}
.barrier {
background-color:rgb(0,0,0);
}
#background {
position: absolute;
left: 896px;
top: -92px;
width: 182px;
}
#setting {
height:30px
width:40px;
}
#rgb {
width:180px;
height:auto;
padding:10px 0;
border:1px dashed #555;
background-color:rgb(255,255,255);
}
#red,#green,#blue {
width:30px;
height:250px;
float:left;
margin-left:8px;
position:relative;
border:1px solid #CCC;
}
#diamond1,#diamond2,#diamond3 {
width:30px;
height:30px;
position:absolute;
}
#diamond1 {
background-color:#c00;
}
#diamond2 {
background-color:#0c0;
}
#diamond3 {
background-color:#00c;
}
#rankBack {
display:none;
width:50px;
margin-left:50px;
}
</style>
</head>
<body background="image/背景2.jpg" align="center">
<div id="menu">
<div id="show">show</div>
<div id="time">time</div>
<div id="score">score</div>
<div id="degree">
<button id="rankSet">难度</button>
<div id="rankBack">
<button id="rank1">简单</button>
<button id="rank2">一般</button>
<button id="rank3">困难</button>
</div>
</div>
<button id="btn">开始</button>
<div id="background">
<button id="setting">背景</button>
<div id="rgb">
<div id="red"><div id="diamond1"></div></div>
<div id="green"><div id="diamond2"></div></div>
<div id="blue"><div id="diamond3"></div></div>
<div class="clear"><!--none--></div>
</div>
</div>
</div>
<div id="center">
<div id="field"></div>
</div>
</body>
<script type="text/javascript">
function css(obj,attri,ova){ //对象 属性
switch(arguments.length)
{
case 2:
if(obj.currentStyle)
{
return obj.currentStyle[attri];
}
else
{
return getComputedStyle(obj, false)[attri];
}
break;
case 3:
obj.style[attri]=ova;
break;
default:break;
}
}
function attr(obj,attr,value){
switch(arguments.length)
{
case 2:
return obj.getAttribute(attr);
break;
case 3:
obj.attr=value;
break;
default:break;
}
}
function myadd(obj,oevt,fn){
if(obj.attatchEvent)
obj.attatchEvent('on'+oevt,fn);
else
obj.addEventListener(oevt,fn,false);
}
function obj(id,tag){
if(arguments.length==2)
{
var NewTags=[];
var OldTags=id.getElementsByTagName(tag);
var i;
for(i=0;i<OldTags.length;i++)
{
NewTags.push(OldTags[i]);
}
return NewTags;
}
else
return document.getElementById(id);
}
function rad(obj){
var L = obj.length;
var n = false ;
while(n===false)
{
n = Math.random();
n = Math.ceil(n*L)-1;
if(obj[n].attr=='default')
{
obj[n].attr = 'food';
css(obj[n],abgc,aColorFood);
n=true;
}
else
n=false;
}
delete n;
delete L;
}
document.onkeydown = function(oevt){
var sevt = oevt||window.event;
//37 ----- 左
//38 ----- 上
//39 ----- 右
//40 ----- 下
//116 ---- F5
if(ctr==false)
{
switch(sevt.keyCode)
{
case 37:
if(snack[0]!=1)
snack[0]=-1;
break;
case 39:
if(snack[0]!=-1)
snack[0]=1;
break;
case 40:
if(snack[0]!=-M)
snack[0]=M;
break;
case 38:
if(snack[0]!=M)
snack[0]=-M;
break;
default:break;
};
ctr = true;
if(sevt.keyCode!=116)
return false;
}
}
function move(){
if((snack[0]+snack[1])%M==1&&snack[0]==1)
{
alert('你输了！');
location.reload();
};
if((snack[0]+snack[1])%M==0&&snack[0]==-1)
{
alert('你输了！');
location.reload();
};
if(snack[1]<=M&&snack[0]==-M)
{
alert('你输了！');
location.reload();
};
if(snack[1]>=(N-1)*M&&snack[0]==M)
{
alert('你输了！');
location.reload();
};
var next = odivs[(snack[0]+snack[1]-1)];
switch(next.attr){
case 'food':
snack.push(snack[snack.length-1]);
//头部伸长
attr(next,'attr','body');
css(next,'className','body');
rad(odivs);
score++;
oscore.innerHTML = score + '分';
go();
break;
case 'default':
//尾部还原
css(odivs[snack[snack.length-1]-1],abgc,aColorCell);
css(odivs[snack[snack.length-1]-1],'attr','default');
go();
break;
case 'body':
alert('你输了！');
location.reload();
break;
case 'barrier':
alert('你输了！');
location.reload();
break;
default:break;
}
}
function go(){
//尾部还原
css(odivs[snack[snack.length-1]-1],abgc,aColorCell);
attr(odivs[snack[snack.length-1]-1],'attr','default');
//向前运动
for(var i=snack.length-1;i>1;i--)
{
snack[i]=snack[i-1];
attr(snack[i],'attr','body');
odivs[snack[i]-1].style.backgroundColor = aColorBody;
};
//头部伸长
snack[1]+=snack[0];
css(odivs[snack[1]-1],abgc,aColorBody);
attr(odivs[snack[1]-1],'attr','body');
//允许键盘事件
ctr = false;
}
function fTime(){
var oDate = new Date();
var iRemain = (oDate.getTime() - oDate0.getTime())/1000;
var iHour=parseInt(iRemain/3600);
iRemain%=3600;
var iMin=parseInt(iRemain/60);
iRemain%=60;
var iSec=parseInt(iRemain);
otime.innerHTML = iHour+'时'+iMin+'分'+iSec+'秒';
}
//--------------scroll---------------
function wheelNew(oEvent)//obj1:父容器；obj2：子容器
{
var obj1 = this;
var obj2 = this.getElementsByTagName('div')[0];
var H = obj1.offsetHeight - obj2.offsetHeight;
var bDown=true;
bDown = oEvent.wheelDelta?oEvent.wheelDelta<0:oEvent.detail>0;
if(bDown)
{
if(obj2.offsetTop<obj1.offsetHeight-obj2.offsetHeight)
obj2.style.top=obj2.offsetTop+10+'px';
else
obj2.offsetTop=obj1.offsetHeight-obj2.offsetHeight-obj1.offsetTop;
}
else
{
if(obj2.offsetTop>0)
obj2.style.top = obj2.offsetTop-10+'px';
}
if(oEvent.preventDefault)
oEvent.preventDefault();
//alert(obj1.color);
switch(obj1.color)
{
case 'red':
cRed = 255 - (255*obj2.offsetTop/H).toFixed(0);
css(obody,abgc,'rgb('+cRed+','+cGreen+','+cBlue+')');
break;
case 'green':
cGreen = 255 - (255*obj2.offsetTop/H).toFixed(0);
css(obody,abgc,'rgb('+cRed+','+cGreen+','+cBlue+')');
break;
case 'blue':
cBlue = 255 - (255*obj2.offsetTop/H).toFixed(0);
css(obody,abgc,'rgb('+cRed+','+cGreen+','+cBlue+')');
break;
default :break;
}
return false;
}
function Drag(sEvt){
sEvt = window.event||sEvt;
//alert(this);
var oC =this;
var oP = oC.parentElement;
//alert(oP);
var H = oP.offsetHeight - oC.offsetHeight;
var oscroll=document.documentElement.scrollTop||document.body.scrollTop;
//y0为鼠标按下时距离obar顶部的距离
var y0= sEvt.clientY-oC.offsetTop-oscroll;
document.onmousemove = function(sEvt2){
sEvt2 = document.event||sEvt2;
var y=sEvt2.clientY;
if(y-y0>=oscroll&&y-y0<=H+oscroll)
oC.style.top = y - y0 - oscroll + 'px';
else
{
if(y-y0<oscroll)
oC.style.top=0;
else
oC.style.top=H+'px';
}
switch(oP.color)
{
case 'red':
cRed = 255 - (255*oC.offsetTop/H).toFixed(0);
break;
case 'green':
cGreen = 255 - (255*oC.offsetTop/H).toFixed(0);
break;
case 'blue':
cBlue = 255 - (255*oC.offsetTop/H).toFixed(0);
break;
default :break;
}
css(obody,'backgroundColor','rgb'+'('+cRed+','+cGreen+','+cBlue+')');
}
document.onmouseup = function(){
document.onmousemove = null;
document.onmouseup = null;
}
}
function barrier(num){
var oba = true;
for(var i=0;i<num;i++)
{
oba = true
while (oba)
{
oba = Math.ceil((odivs.length)*Math.random());
if(odivs[oba-1].attr =='default')
{
odivs[oba-1].attr = 'barrier';
css(odivs[oba-1],abgc,'rgb(0,0,0)');
oba = false;
}
else
oba = true;
};
};
delete oba;
}
var obody = document.getElementsByTagName('body')[0];
var N = 20;
var M = 30;
var score = 0;//保存分数
var t0 = 300;//保存时间
var ctr = true;
var snack = [1];//蛇身数组
var oField = obj('field');
oField.style.width = M*20+'px';
var odivs = [];
var oshow = obj('show');
var oscore = obj('score');
var otime = obj('time');
var obtn = obj('btn');
var oDate0 = new Date();
var odegree = obj('degree');
//-------------scroll-----------
var obackground = obj('background');
var osetting = obj('setting');
var orgb = obj('rgb');
orgb.style.display='block';
var obar1 = obj('red');
var obar2 = obj('green');
var obar3 = obj('blue');
var ohold1 = obj('diamond1');
var ohold2 = obj('diamond2');
var ohold3 = obj('diamond3');
var cRed = 255;
var cGreen = 255;
var cBlue = 255;
//attr(obar1,'color','red');attr 比不上obj.color 啊
obar1.color = 'red';
obar2.color = 'green';
obar3.color = 'blue';
myadd(obar1,'mousewheel',wheelNew);
myadd(obar2,'mousewheel',wheelNew);
myadd(obar3,'mousewheel',wheelNew);
myadd(obar1,'DOMMouseScroll',wheelNew);
myadd(obar2,'DOMMouseScroll',wheelNew);
myadd(obar3,'DOMMouseScroll',wheelNew);
myadd(ohold1,'mousedown',Drag);
myadd(ohold2,'mousedown',Drag);
myadd(ohold3,'mousedown',Drag);
osetting.onclick = function(){
if(orgb.style.display=='block')
css(orgb,'display','none');
else
css(orgb,'display','block');
}
var orankSet = obj('rankSet');
var orankBack = obj('rankBack');
var odegree = obj(orankBack,'button');
var olock=false;
var num =0;
orankSet.onclick = function(){
if(orankBack.style.display=='block')
orankBack.style.display = 'none';
else
orankBack.style.display = 'block';
}
odegree[0].onclick = function(){
if(olock==false)
{
num = 5;
olock = true;
barrier(num);
}
else
alert('难度已设定！');
}
odegree[1].onclick = function(){
if(olock==false)
{
num = 10;
olock = true;
barrier(num);
}
else
alert('难度已设定！');
}
odegree[2].onclick = function(){
if(olock==false)
{
num = 15;
olock = true;
barrier(num);
}
else
alert('难度已设定！');
}
//开始、暂停游戏的控制
var pause=false;
var abgc = 'backgroundColor';
var aColorBody = 'rgb(200,0,0)';//红色
var aColorCell = 'rgb(255,255,255)';//白色
var aColorBarrier = 'rgb(95,95,95)';//黑色
var aColorFood = 'rgb(110,231,137)';//绿色
//定时器 ------ 蛇的和时间的
var timerSnack;
var timerTime;
//------------- 初始化开始-----------------------------
//生成战场
for(var i=0;i<M*N;i++){
//用于创建标签节点
var oelement;
oelement = document.createElement('div');
oelement.index = i;
oelement.attr = 'default';
oelement.className = 'cell';
oField.appendChild(oelement);
delete oelement;
};
//----------- 900个格子的数组-------------------------
odivs = obj(oField,'div');
snack.push(N*M/2+M/2);
snack.push(N*M/2+M/2-1);
rad(odivs);
obtn.onclick = function(){
if(pause==true)
{
pause = false;
clearInterval(timerSnack);
clearInterval(timerTime);
obtn.innerHTML = '开始';
}
else
{
pause = true;
timerSnack=setInterval(fTime,t0);
timerTime=setInterval(move,t0);
obtn.innerHTML = '暂停';
}
}
//------------------- 初始化结束-----------------------
</script>
</html>
0 0
