您的位置：首页 > 其它

贪吃蛇的web版出现了问题希望大家帮忙留言改正

2017-01-16 11:28 106 查看

html代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>贪吃蛇</title>
<link rel="stylesheet" href="贪吃蛇.css">
<script src="贪吃蛇.js"></script>
</head>
<body onkeydown="move(event);">
<div id="oDiv">

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

css代码

*{margin: 0;padding: 0;}#oDiv{width: 704px;height: 464px;border: 2px solid #ff625d;position: absolute;left: 600px;top: 250px}

js代码

/*** Created by zhao on 2017/2/2.*/oDiv=document.getElementById('oDiv');var i=index=0;var timer;lefts=new Array();tops=new Array();//定义食物function food() {//在随机位置上产生食物的节点var m=Math.round(Math.random()*684);var n=Math.round(Math.random()*444);this.m=m;this.n=n;//产生食物的节点foo=document.createElement('div');foo.style.width=20+'px';foo.style.height=20+'px';foo.style.background='blue';foo.style.position='absolute';foo.style.left=m+'px';foo.style.top=n+'px';document.getElementById('oDiv').appendChild(foo);}//每次吃到食物后产生一个新的节点function product(left,top) {len=document.createElement('div');len.style.width=20+'px';len.style.height=20+'px';len.style.background='red';len.style.position='absolute';len.style.left=left+'px';len.style.top=top+'px';document.getElementById('oDiv').insertBefore(len,document.getElementById('oDiv').childNodes[1]);alert();}//每次吃到食物后，食物消失function die(foo) {foo.parentNode.removeChild(foo);var foo=new food(foo);}//跟随模式function follow() {setTimeout(function () {for(i=1;i< document.getElementById('oDiv').childNodes.length;i++){lefts[i]=  document.getElementById('oDiv').childNodes[i-1].offsetLeft;tops[i]=  document.getElementById('oDiv').childNodes[i-1].offsetTop;}for(i=1;i<oDiv.childNodes.length;i++){document.getElementById('oDiv').childNodes[i].style.left=lefts[i]+'px';document.getElementById('oDiv').childNodes[i].style.top=tops[i]+'px';}},20)}//定义蛇function snake() {//坐标this.x=x;this.y=y;//在随机位置出产生一个节点，并返回其坐标var x=Math.round(Math.random()*684);var y=Math.round(Math.random()*444);//产生蛇一个节点pro=document.createElement('div');pro.style.width=20+'px';pro.style.height=20+'px';pro.style.background='red';pro.style.position='absolute';pro.style.left=x+'px';pro.style.top=y+'px';document.getElementById('oDiv').appendChild(pro);//移动this.left=function () {clearInterval(timer);timer=setInterval(function () {if(pro.offsetLeft<-2||pro.offsetLeft>686||pro.offsetTop<-2||pro.offsetTop>446) alert('死亡');else{if((pro.offsetLeft>foo.offsetLeft-20)&&(pro.offsetLeft<foo.offsetLeft+20)&&(pro.offsetTop<foo.offsetTop+20)&&(pro.offsetTop>foo.offsetTop-20)){die(foo);product(pro.offsetLeft+20,pro.offsetTop);}pro.style.left = pro.offsetLeft - 1 + 'px';follow();}},20);};this.right=function () {clearInterval(timer);timer=setInterval(function () {if(pro.offsetLeft<-2||pro.offsetLeft>686||pro.offsetTop<-2||pro.offsetTop>446) alert('死亡');else {if((pro.offsetLeft>foo.offsetLeft-20)&&(pro.offsetLeft<foo.offsetLeft+20)&&(pro.offsetTop<foo.offsetTop+20)&&(pro.offsetTop>foo.offsetTop-20)){die(foo);product(pro.offsetLeft-20,pro.offsetTop);}pro.style.left = pro.offsetLeft + 1 + 'px';follow();}},20);};this.up=function () {clearInterval(timer);timer=setInterval(function () {if(pro.offsetLeft<-2||pro.offsetLeft>686||pro.offsetTop<-2||pro.offsetTop>446) alert('死亡');else {if((pro.offsetLeft>foo.offsetLeft-20)&&(pro.offsetLeft<foo.offsetLeft+20)&&(pro.offsetTop<foo.offsetTop+20)&&(pro.offsetTop>foo.offsetTop-20)){die(foo);product(pro.offsetLeft,pro.offsetTop+20);}pro.style.top = pro.offsetTop - 1 + 'px';follow();}},20);};this.down=function () {clearInterval(timer);timer=setInterval(function () {if(pro.offsetLeft<-2||pro.offsetLeft>686||pro.offsetTop<-2||pro.offsetTop>446) alert('死亡');else {if((pro.offsetLeft>foo.offsetLeft-20)&&(pro.offsetLeft<foo.offsetLeft+20)&&(pro.offsetTop<foo.offsetTop+20)&&(pro.offsetTop>foo.offsetTop-20)){die(foo);product(pro.offsetLeft,pro.offsetTop-20);}pro.style.top = pro.offsetTop + 1 + 'px';follow();}},20);};this.eat=function () {};this.dead=function () {};}//当按键无效时发出响声function music() {}//蛇的移动function move(event) {switch (event.keyCode){case 38: snakes.up(); break;case 40: snakes.down();break;case 39: snakes.right();break;case 37: snakes.left(); break;default:  music();}}//初始化过程；window.onload=function () {//定义一条蛇snakes=new snake();//定义食物foods=new food();//产生移动的动作if(event) move(event);}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航

贪吃蛇的web版 出现了问题 希望大家帮忙留言改正

贪吃蛇的web版出现了问题希望大家帮忙留言改正