您的位置：首页 > Web前端 > JavaScript

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

2018-01-22 17:01 435 查看

刚学完js基础，想写个小游戏练练手，就写了这个最简单的贪吃蛇的小游戏。很多不足的，不喜勿喷。欢迎同道交流。前后历经三四天，代码写了两天！离自己的要求差了好远，我是希望一个上午或者下午写完的，结果却这么久。汗颜，这样子可以找到工作吗？？？温馨提示：开始玩不要按向下键哦，否则一口咬死自己，哈哈。

上代码：

<!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.onload=function(){
boxDiv=document.getElementById('box');
sDiv=document.getElementById('screen');
aDiv=boxDiv.getElementsByTagName('div');
newEgg();
}
document.onkeydown=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>

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

标签：

相关文章推荐

新的分享

章节导航