我的JS 简单的贪吃蛇小游戏

最新推荐文章于 2024-08-08 13:37:43 发布

打坐的稻草人

最新推荐文章于 2024-08-08 13:37:43 发布

阅读量240

点赞数 1

本文链接：https://blog.csdn.net/qq_33368722/article/details/79130994

版权

上代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>贪吃蛇</title>
<style type="text/css">
*{
margin: 0px;padding: 0px;
}
body{
width:900px;height: 600px;
}
#screen{
width: 600px;height: 500px;background: black;position: absolute;
left:300px;top:100px;
}
#box{
width:500px;height: 400px;position: absolute;left: 50px;top:30px;
background: grey;
}
#button{
width: 400px;height: 40px;background: green;position: absolute;
left: 100px;top:450px;text-align: center;line-height: 40px;
}
#d1{
width:8px;height: 8px;position: absolute;left:200px;top:200px;background: black;
border: 1px black solid;z-index: 1000;
}
#d2{
width:8px;height: 8px;position: absolute;left:200px;top:210px;background: blue;
border: 1px black solid;
}
#d3{
width:8px;height: 8px;position: absolute;left:200px;top:220px;background: green;
border: 1px black solid;
}
#d4{
width:8px;height: 8px;position: absolute;left:200px;top:230px;background: red;
border: 1px black solid;
}
#d5{
width:8px;height: 8px;position: absolute;left:200px;top:240px;background: red;
border: 1px black solid;
}
#d6{
width:8px;height: 8px;position: absolute;left:200px;top:250px;background: red;
border: 1px black solid;
}
</style>
<script type="text/javascript">
var timer=null;
var dir='';
var name=null;
var oDiv=null;
var boxDiv=null;
var sDiv=null;
var aDiv=null;
var speed=10;
var time=500;
window.οnlοad=function(){
boxDiv=document.getElementById('box');
sDiv=document.getElementById('screen');
aDiv=boxDiv.getElementsByTagName('div');
newEgg();
}
document.οnkeydοwn=function(ev){
var oEvent=ev||event;
clearInterval(timer);
if(oEvent.keyCode==37){
name='left';
dir='west';
}else if(oEvent.keyCode==39){
name='left';
dir='east';
}else if(oEvent.keyCode==38){
name='top';
dir='north';
}else if(oEvent.keyCode==40){
name='top';
dir='south';
}
move();
timer=setInterval(move,500);
};
function move(){
for (var i = aDiv.length-1; i >0 ; i--) {
aDiv[i].style.left=aDiv[i-1].offsetLeft+'px';
aDiv[i].style.top=aDiv[i-1].offsetTop+'px';
}
if(name=='left'){
if(dir=='west'){
aDiv[0].style[name]=aDiv[0].offsetLeft-speed+'px';
}else if(dir=='east'){
aDiv[0].style[name]=aDiv[0].offsetLeft+speed+'px';
}
}else if(name=='top'){
if(dir=='north'){
aDiv[0].style[name]=aDiv[0].offsetTop-speed+'px';
}else if(dir=='south'){
aDiv[0].style[name]=aDiv[0].offsetTop+speed+'px';
}
}
ifTouch();
if((aDiv[0].offsetLeft==oDiv.offsetLeft-50)&&(aDiv[0].offsetTop==oDiv.offsetTop-30)){
boxDiv.appendChild(oDiv);
oDiv.style.top=aDiv[aDiv.length-2].offsetTop+'px';
oDiv.style.left=aDiv[aDiv.length-2].offsetLeft+'px';
newEgg();
}

}
function newEgg(){
oDiv=null;
oDiv=document.createElement('div');
oDiv.style.display='none';
oDiv.style.position='absolute';
oDiv.style.background='red';
oDiv.style.width='8px';
oDiv.style.height='8px';
oDiv.style.borderWidth='1px';
oDiv.style.borderColor='black';
oDiv.style.borderStyle='solid';
oDiv.style.zIndex='100';
sDiv.appendChild(oDiv);
oDiv.style.display='block';
while(true){
var l=parseInt(Math.random()*49)*10+50;
var t=parseInt(Math.random()*39)*10+40;
for(var i=0;i<aDiv.length;i++){
if((l==aDiv[i].offsetLeft+50)&&(t==aDiv[i].offsetTop+30)){
continue;
}
break;
}
break;
}
oDiv.style.left=l+'px';
oDiv.style.top=t+'px';
}
function gameover(){
clearInterval(timer);
aDiv=null;
name='';
dir='';
alert('GAME OVER');
}
function ifTouch(){
if(aDiv[0].offsetLeft<0){
aDiv[0].style.left=0+'px';
gameover();

}else if(aDiv[0].offsetLeft>boxDiv.offsetWidth-aDiv[0].offsetWidth){
aDiv[0].style.left=boxDiv.offsetWidth-aDiv[0].offsetWidth+'px';
gameover();
}
if(aDiv[0].offsetTop<0){
aDiv[0].style.top=0+'px';
gameover();
}else if(aDiv[0].offsetTop>boxDiv.offsetHeight-aDiv[0].offsetHeight){
aDiv[0].style.top=boxDiv.offsetHeight-aDiv[0].offsetHeight+'px';
gameover();
}
for (var i = aDiv.length-1; i >0 ; i--) {
if((aDiv[0].offsetLeft==aDiv[i].offsetLeft)&&
(aDiv[0].offsetTop==aDiv[i].offsetTop)){
gameover();
}
}
}
</script>
</head>
<body>
<div id="screen">
<div id="box">
<div id="d1"></div>
<div id="d2"></div>
<div id="d3"></div>
<div id="d4"></div>
<div id="d5"></div>
<div id="d6"></div>
</div>
<div id='button'>
点击屏幕后按方向键开始游戏。

</div>
</div>
</body>
</html>