JavaScript编写一个贪吃蛇游戏


Posted in Javascript onMarch 09, 2017

写的比较乱,有个逻辑错误:蛇吃了果果后应该是蛇尾加一节,写成了蛇头部增加一节- -。

可用键盘的上下左右键操作;

效果图:

JavaScript编写一个贪吃蛇游戏

代码如下:

<html>
<head>
<title>
贪吃蛇
</title>
<style type="text/css">
body{margin:0;padding:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  user-select:none;}
table{border-collapse:collapse;width:500px}
td{border:1px solid white;width:20px;height:20px;}
#wrap{width:500px;height:500px;background-color:#8B8386;margin:0 auto;position:absolute;border:1px solid #8B2500;}
#tar{width:20px;height:20px;position:absolute;background-color:#FFEE26;}
.num{width:20px;height:20px;background-color:#FDFF68;border:1px solid blue;border-radius:50%;position:absolute;}
input{color:red;font-size:20px;font-weight:bold;position:absolute;display:block;width:60px;height:35px;}
#btn2{top:45px;left:0px;}
#btn4{top:90px;left:70px;}
#btn1{top:45px;left:140px;}
#btn3{top:0px;left:70px;}
#btn{position:absolute;background-color:black;width:200px;height:125px;}
#txt{width:80px;height:55px;background-color:black;position:absolute;left:60px;top:35px;color:white;font-size:16px;font-weight:bold;line-height:55px;text-align:center;cursor:move;}
</style>
</head>
<body>
<div id="btn" style="left:520px;top:20px">
<input type="button" value="→" id="btn1"/>
<input type="button" value="←" id="btn2"/>
<input type="button" value="↑" id="btn3"/>
<input type="button" value="↓" id="btn4"/>
<div id="txt">点此拖动</div>
</div>
<div id="wrap" style="left:20px;top:20px">
<div id="tar"></div>
<table>
<tbody id="tb">
</tbody>
</table>
<div class="num"></div>
<div class="num"></div>
<div class="num"></div>
<div class="num"></div>
<div class="num"></div>
</div>
<script type="text/javascript">
  var tb=document.getElementById('tb');
var wrap=document.getElementById('wrap');
var tr=new Array();
var td=new Array();
for(var i=0;i<25;i++)           //绘制地图
{
 tr[i]=document.createElement('tr');
 tb.appendChild(tr[i]);
 for(var j=0;j<25;j++)
 {
 td[j]=document.createElement('td');
 tr[i].appendChild(td[j]); 
 }
}
var tar=document.getElementById('tar');  //食物定位
function food()
{
 var a,b;
 a=Math.random()*460;
 a=Math.floor(a/20)*20+20;
 b=Math.random()*460;
 b=Math.floor(b/20)*20+20;
 tar.style.left=a+"px";
 tar.style.top=b+"px";
}
food();
var s=document.getElementsByClassName('num'); //定位蛇的位置
s[0].style.backgroundColor="#3EFF1A";
var x=300,y=400,f,d,p,Fraction=0,t=600,tt=60;
for(var k=0;k<s.length;k++)
{
 s[k].style.left=x+"px";
 s[k].style.top=y+20*k+"px";
}
function move(obj,direction)       //控制移动函数开始
{
 clearTimeout(d);
 s=document.getElementsByClassName('num');
 var l=new Array();
 l[0]=s[0].style.left;
 var w=new Array();
 w[0]=s[0].style.top;
 obj;             //移动方向
 s[0].style.left=x+"px";
 s[0].style.top=y+"px";
 for(var k1=1;k1<s.length;k1++)
 {
 l[k1]=s[k1].style.left;
 w[k1]=s[k1].style.top;
 s[k1].style.left=l[k1-1];
 s[k1].style.top=w[k1-1];
 }
 if(parseInt(s[0].style.left)==parseInt(tar.style.left)&&parseInt(s[0].style.top)==parseInt(tar.style.top))
{
 t=t-tt;
 tt-=5;
 if(tt==0)tt=5;
 var new_div=document.createElement('div');
 new_div.className="num";
 Fraction+=100;
 if(p==1)
 {
 new_div.style.top=s[0].style.top;
 new_div.style.left=parseInt(s[0].style.left)+20+"px";
 }
 if(p==2)
 {
 new_div.style.top=s[0].style.top;
 new_div.style.left=parseInt(s[0].style.left)-20+"px";
 }
 if(p==3)
 {
 new_div.style.left=s[0].style.left;
 new_div.style.top=parseInt(s[0].style.top)-20+"px";
 }
 if(p==4)
 {
 new_div.style.left=s[0].style.left;
 new_div.style.top=parseInt(s[0].style.top)+20+"px";
 }
 s[0].parentNode.insertBefore(new_div,s[0]);
 food();
 s[0].style.backgroundColor="#3EFF1A";
 for(var k=1;k<s.length;k++)
 {
 s[k].style.backgroundColor="#FDFF68";
 }
}
if(parseInt(s[0].style.left)<0||parseInt(s[0].style.left)>=500||parseInt(s[0].style.top)<0||parseInt(s[0].style.top)>=500)
{
 alert("GAME OVER!"+"你的分数为:"+Fraction+"分");
 food();
 x=300;
 y=400;
 for(var k=0;k<5;k++)
{
 s[k].style.left=x+"px";
 s[k].style.top=y+20*k+"px";
}
 for(var kk=s.length-1;kk>4;kk--)
 {
  s[kk].parentNode.removeChild(s[kk]);
 }
 t=700;
 tt=60;
 return false;
}
 for(k=1;k<s.length;k++)
{
 if(parseInt(s[0].style.left)==parseInt(s[k].style.left)&&parseInt(s[0].style.top)==parseInt(s[k].style.top))
 {
  alert("GAME OVER!"+"你的分数为:"+Fraction+"分");
  food();
  x=300;
  y=400;
  for(var k=0;k<5;k++)
 {
  s[k].style.left=x+"px";
  s[k].style.top=y+20*k+"px";
 }
 for(var kk=s.length-1;kk>4;kk--)
 {
  s[kk].parentNode.removeChild(s[kk]);
 }
  t=700;
  tt=60;
  return false;
 }
}
 d=setTimeout(direction,t);
}
document.getElementById('btn1').onclick=function R() //绑定鼠标点击事件
{
 x=parseInt(s[0].style.left);
 y=parseInt(s[0].style.top);
 if(parseInt(s[0].style.left)<parseInt(s[1].style.left))return false; 
 p=1;           
 move(x=x+20,R);
}
document.getElementById('btn2').onclick=function L()
{
 x=parseInt(s[0].style.left);
 y=parseInt(s[0].style.top);
 if(parseInt(s[0].style.left)>parseInt(s[1].style.left))return false;
 p=2;
 move(x=x-20,L);
}
document.getElementById('btn3').onclick=function T()
{
 x=parseInt(s[0].style.left);
 y=parseInt(s[0].style.top);
 if(parseInt(s[0].style.top)>parseInt(s[1].style.top))return false;
 p=3;
 move(y=y-20,T);
}
document.getElementById('btn4').onclick=function B()
{
 x=parseInt(s[0].style.left);
 y=parseInt(s[0].style.top);
 if(parseInt(s[0].style.top)<parseInt(s[1].style.top))return false;
 p=4;
 move(y=y+20,B);
}
document.onkeydown=function(event)    //绑定键盘事件
{
var e=event||window.event;
if(e&&e.keyCode==39)
{
 function R()
{
 x=parseInt(s[0].style.left);
 y=parseInt(s[0].style.top);
 if(parseInt(s[0].style.left)<parseInt(s[1].style.left))return false; 
 p=1; 
 move(x=x+20,R);
}
R();
return false;
}
if(e&&e.keyCode==37)
{
 function L()
{
 x=parseInt(s[0].style.left);
 y=parseInt(s[0].style.top);
 if(parseInt(s[0].style.left)>parseInt(s[1].style.left))return false;
 p=2;
 move(x=x-20,L);
}
L();
return false;
}
if(e&&e.keyCode==38)
{
 function T()
{
 x=parseInt(s[0].style.left);
 y=parseInt(s[0].style.top);
 if(parseInt(s[0].style.top)>parseInt(s[1].style.top))return false;
 p=3;
 move(y=y-20,T);
}
T();
return false;
}
if(e&&e.keyCode==40)
{
 function B()
{
 x=parseInt(s[0].style.left);
 y=parseInt(s[0].style.top);
 if(parseInt(s[0].style.top)<parseInt(s[1].style.top))return false;
 p=4;
 move(y=y+20,B);
}
B();
return false;
}
}
var btn=document.getElementById('btn');
var btn_l,btn_t;
function btn_move()
{
 btn_l=clientX-parseInt(wrap.style.left)
}
confirm("可用键盘的上下左右四个按键进行游戏操作!")
var btn=document.getElementById('btn');  //开始制作操作区拖动效果
var txt=document.getElementById('txt');
var new_x,new_y,bool=false;
txt.onmousedown=function ()
{
 var eve=event||window.event;
 bool=true;
 new_x=eve.clientX-parseInt(btn.style.left);
 new_y=eve.clientY-parseInt(btn.style.top);
}
btn.onmousemove=function btn_move(event)
{
 if(bool)
 {
 var e=event||window.event;
 btn.style.left=e.clientX-new_x;
 btn.style.top=e.clientY-new_y;
 if(parseInt(btn.style.left)<520)btn.style.left="520px";
 if(parseInt(btn.style.top)<0)btn.style.top="0px";
 if(parseInt(btn.style.top)>395)btn.style.top="395px";
 }
}
document.body.onmouseup=function()
{
 bool=false;
}
</script>
</body>
</html>

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
jquery文字上下滚动的实现方法
Mar 22 Javascript
jQuery使用之处理页面元素用法实例
Jan 19 Javascript
JavaScript实现表格快速变色效果代码
Aug 19 Javascript
深入理解js中this的用法
May 28 Javascript
jQuery替换节点用法示例(使用replaceWith方法)
Sep 08 Javascript
使用JQuery选择HTML遍历函数的方法
Sep 17 Javascript
vue.js指令v-model实现方法
Dec 05 Javascript
vue2.0嵌套路由实现豆瓣电影分页功能(附demo)
Mar 13 Javascript
webpack构建vue项目的详细教程(配置篇)
Jul 17 Javascript
详解Vue CLI3 多页应用实践和源码设计
Aug 30 Javascript
小程序实现新用户判断并跳转激活的方法
May 20 Javascript
利用JS响应式修改vue实现页面的input值
Sep 02 Javascript
canvas压缩图片转换成base64格式输出文件流
Mar 09 #Javascript
Bootstrap笔记之缩略图、警告框实例详解
Mar 09 #Javascript
Bootstrap学习笔记之进度条、媒体对象实例详解
Mar 09 #Javascript
bootstrap实现的自适应页面简单应用示例
Mar 09 #Javascript
js实现3D图片环展示效果
Mar 09 #Javascript
Vue监听数组变化源码解析
Mar 09 #Javascript
Node.js通过身份证号验证年龄、出生日期与性别方法示例
Mar 09 #Javascript
You might like
PHP 删除文件与文件夹操作 unlink()与rmdir()这两个函数的使用
2011/07/17 PHP
详解PHP数组赋值方法
2015/11/07 PHP
PhpStorm配置Xdebug调试的方法步骤
2019/02/02 PHP
在IE,Firefox,Safari,Chrome,Opera浏览器上调试javascript
2008/12/02 Javascript
jquery ready(fn)事件使用介绍
2013/08/21 Javascript
jquery与prototype框架的详细对比
2013/11/21 Javascript
JS判断字符串长度的5个方法(区分中文和英文)
2014/03/18 Javascript
Node.js中安全调用系统命令的方法(避免注入安全漏洞)
2014/12/05 Javascript
jQuery中die()方法用法实例
2015/01/19 Javascript
javascript中innerText和innerHTML属性用法实例分析
2015/05/13 Javascript
jQuery自定义数值抽奖活动代码
2016/06/11 Javascript
javascript中的 object 和 function小结
2016/08/14 Javascript
微信小程序 二维码canvas绘制实例详解
2017/01/06 Javascript
Vue实现用户自定义字段显示数据的方法
2018/08/28 Javascript
node基于async/await对mysql进行封装
2019/06/20 Javascript
Moment.js实现多个同时倒计时
2019/08/26 Javascript
js实现GIF图片的分解和合成
2019/10/24 Javascript
微信小程序scroll-view点击项自动居中效果的实现
2020/03/25 Javascript
javascript canvas时钟模拟器
2020/07/13 Javascript
vue render函数动态加载img的src路径操作
2020/10/26 Javascript
[02:09]抵达西雅图!中国军团加油!
2014/07/07 DOTA
Python+微信接口实现运维报警
2016/08/27 Python
Django外键(ForeignKey)操作以及related_name的作用详解
2019/07/29 Python
基于Python2、Python3中reload()的不同用法介绍
2019/08/12 Python
Python3 翻转二叉树的实现
2019/09/30 Python
基于python实现微信好友数据分析(简单)
2020/02/16 Python
婚前保证书
2014/04/29 职场文书
网站创业计划书
2014/04/30 职场文书
团代会宣传工作方案
2014/05/08 职场文书
演讲稿格式范文
2014/05/19 职场文书
敬老院献爱心活动总结
2014/07/08 职场文书
科学发展观演讲稿
2014/09/11 职场文书
2014教师“四风问题”对照检查材料思想汇报
2014/09/16 职场文书
监考失职检讨书
2015/01/26 职场文书
2015年行政助理工作总结
2015/04/30 职场文书
奶茶店的创业计划书该怎么写?
2019/07/15 职场文书