js实现贪吃蛇蛇蛇蛇

<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title></title>
</head>
<body>
<script>/*第一步：创建地图：*/var map;//封装地图的类function Map(){//设置地图的相关属性this.width=1200;this.height=600;this.bgcolor="black";//居中的属性this.margin="0 auto";//封装接收地图对象的属性this._map=null;//封装方法来实现dom元素的创建this.createMap=function (){//创建dom元素if(this._map==null){this._map=document.createElement("div");this._map.style.width=this.width+"px";this._map.style.height=this.height+"px";this._map.style.position="relative";this._map.style.margin=this.margin;this._map.style.backgroundColor=this.bgcolor;document.body.appendChild(this._map);}}}var snack;function Snack(){this.width=30;this.height=30;//控制方向的this.direct="right";//封装蛇的身子this.snackbody=[[3,1,"blue",null],[2,1,"white",null],[1,1,"white",null]];//封装创建蛇的方法this.createsnack=function (){for(var i=0;i<this.snackbody.length;i++){if(this.snackbody[i][3]==null){//创建dom元素this.snackbody[i][3]=document.createElement("div");this.snackbody[i][3].style.width=this.width+"px";this.snackbody[i][3].style.height=this.height+"px";this.snackbody[i][3].style.backgroundColor=this.snackbody[i][2];this.snackbody[i][3].style.position="absolute";map._map.appendChild(this.snackbody[i][3]);}this.snackbody[i][3].style.left=this.snackbody[i][0]*this.width+"px";this.snackbody[i][3].style.top=this.snackbody[i][1]*this.height+"px";}}//封装蛇移动的方法this.snackmove=function (){var length=this.snackbody.length-1;for(var i=length;i>0;i--){this.snackbody[i][0]=this.snackbody[i-1][0];this.snackbody[i][1]=this.snackbody[i-1][1];}//在xy传递之后让蛇头动/*根据移动方向来确定想x,y++ --*/switch (this.direct){case "right":this.snackbody[0][0]+=1; break;case "left":this.snackbody[0][0]-=1; break;case "up":this.snackbody[0][1]-=1; break;case "down":this.snackbody[0][1]+=1; break;}this.snackback();this.snackCollider();//去判断蛇头和食物是否坐标一致if(this.snackbody[0][0]==food.x&&this.snackbody[0][1]==food.y){//开始长身体this.snackbody.push([this.snackbody[this.snackbody.length-1][0],this.snackbody[this.snackbody.length-1][1],"white",null]);//食物换位置food.createfood();}//动态传递xy坐标之后   重新设置蛇的位置this.createsnack();}//判断蛇是否穿墙this.snackback=function (){if(this.snackbody[0][0]>=40){this.snackbody[0][0]=0;}if(this.snackbody[0][0]<0){this.snackbody[0][0]=39;}if(this.snackbody[0][1]>=20){this.snackbody[0][1]=0;}if(this.snackbody[0][1]<0){this.snackbody[0][1]=19;}}//判断是否自己撞自己this.snackCollider=function (){for(var i=1;i<this.snackbody.length;i++){if(this.snackbody[0][0]==this.snackbody[i][0]&&this.snackbody[0][1]==this.snackbody[i][1]){clearInterval(time);alert("撞死啦！");}}}}var food;function Food(){this.width=30;this.height=30;//食物的属性坐标this.x=0;this.y=0;this._food=null;this.createfood=function (){//设置随机值this.x=Math.floor(Math.random()*40);this.y=Math.floor(Math.random()*20);if(this._food==null){this._food=document.createElement("div");this._food.style.width=this.width+"px";this._food.style.height=this.height+"px";this._food.style.position="absolute";this._food.style.backgroundColor="yellow";map._map.appendChild(this._food);}this._food.style.left=this.x*this.width+"px";this._food.style.top=this.y*this.height+"px";}}var time;//在窗体加载完成里面去实例化对象window.οnlοad=function (){map=new Map();map.createMap();snack=new Snack();snack.createsnack();time=setInterval("snack.snackmove()",100);food=new Food();food.createfood();document.οnkeydοwn=function (e){/* 通过按键   控制蛇的移动方向*//*e.keyCode*/switch (e.keyCode){case 37: if(snack.direct!="right")snack.direct="left"; break;case 38: if(snack.direct!="down") snack.direct="up";break;case 39: if(snack.direct!="left")snack.direct="right";break;case 40: if(snack.direct!="up")snack.direct="down";break;}}}
</script>
</body>
</html>

js实现贪吃蛇蛇蛇蛇相关推荐

eclipse javascript_原生js实现贪吃蛇游戏_javascript技巧
更新时间:2020年10月26日 11:46:36 作者:leisure-ZL 这篇文章主要为大家详细介绍了原生js实现贪吃蛇小游戏,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴 ...
前端那些事之原生 js实现贪吃蛇篇
2019独角兽企业重金招聘Python工程师标准>>> 原生js实现贪吃蛇 <!DOCTYPE html> <html lang="en"> ...
原生JS实现贪吃蛇游戏
原生JS实现贪吃蛇游戏贪吃蛇游戏(原生JavaScript) 贪吃蛇游戏思路分析游戏思想: 面向对象的思想三个js文件分别代表三个对象三个对象相互独立,在HTML中控制全局使用面向对象思想的 ...
好玩的小游戏系列（一）基于html+js 原生贪吃蛇
一朵花如果只被用来观赏那只呈现出它的外在意义只是它生命的一部分若是不能够将其内在更实质的美发挥出来充其量也不过就是一朵死的花而已. 目录一.前言二.代码介绍三.效果显示四.编码实现 index ...
HTML+js实现贪吃蛇小游戏（内含完整代码）
案例分析看图拆解游戏首先我们根据图片上的内容把这个游戏拆解成几个部分去单独看: 最外面的大盒子包裹着内容加边框限制蛇的活动范围,整个范围可以看成由许多小方格排列构成的,例如这样子的:: 两个按钮, ...
使用canvas实现js原生贪吃蛇
先看效果图: 游戏要求: 1.方向键可以控制蛇头的运动方向. 2.食物随机出现在画布中. 3.蛇身跟随蛇头运动. 4.蛇头不能撞墙或撞到蛇身. 5.蛇吃了食物后蛇身增长. 细节注意事项: 其实贪吃蛇游 ...
贪吃蛇之智能蛇的实现
历经很长时间,在下终于把贪吃蛇人工控制的版本写好,虽然略显粗糙,但也为自己初步写好一个简单游戏高兴不已.近日,又尝试了智能蛇的实现. 智能蛇与人工蛇很相似,不同之处在于一个不需要手动输入字符,另一个则 ...
仿生蛇类机器人特点_不像蛇的仿生蛇凶猛迅捷，吓人一跳
浙江在线杭州4月4日讯浙江大学玉泉校区西南面的工控新楼,楼如其名,是一幢非常"工"的教学楼:里面的团队搞机械.控制.电子--各种工程研究,成员也基本上都是笔笔直的工科男. 可是这里 ...
js练习--贪吃蛇（转）
最近一直在看javascript,但是发现不了动力.就开始想找动力,于是在网上找到了一个用js写的贪吃蛇游戏.奈何还不会用git,就只能先这样保存着.哈哈哈,这也算第一篇博客了,以后会坚持用自己的代码 ...
用JS实现贪吃蛇小游戏
疫情期间呆在家里无聊,于是深入学习了一下JS.自己也模仿写一个贪吃蛇的小游戏,本人刚接触JS不久如有错误,望评论区指出. 因为一般贪吃蛇游戏中的CSS样式较为简单,所以这里主要讲一下JS的写法. 食物 ...

js实现贪吃蛇蛇蛇蛇

js实现贪吃蛇蛇蛇蛇相关推荐

最新文章

热门文章