需求分析:
1.地图 创建. createElement(‘div’) 设置地图的样式
2. 食物 (吃到食物,食物随机出现在下一个位置) 设置食物样式 在地图的DIV中
3.蛇(身体+头) div 每一部分各占一个DIV 身体的div也要断点分开 初始化位置每个div var arr = new[
[], //蛇头
[], //身体
[], //尾巴
]
4.移动 第一次移动时,脖子的位置=蛇头的位置
键盘事件控制————>如何获取键盘的方向键(事件对象); //往左不往右,往上不往下
设置蛇后一节的位置=前一节的位置 拐弯
5.规则 蛇移动中吃食物 碰到食物,食物食物随机出现在下一个位置,同时蛇身体+1 数组push()方法实现
碰到border死亡
自己碰到自己, Game Over
多个食物(大小不一样,颜色不一样 #000 随机)
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title></head><body></body><script>var by = document.getElementsByTagName('body')[0];var map1;var food1;var food2;var snake1; //================================================var map1=new map();map1.display();//执行创建地图var food1=new food();food1.display();//执行创建食物1var food2=new food();food2.color='#fff';//改变食物2的颜色属性food2.display();//创建食物2var snake1 = new snake();snake1.move();//蛇移动snake1.display();//创建蛇先创建后移动会写死,详情看snake1.move()部分//给整个body添加点击事件by.onkeydown=function(event){snake1.jilu(event.keyCode); //将获取到的keycode转换引导移动console.log(event.keyCode); //根据获取到的键值来实现移动} //=======&
12345678910111213141516171819202122232425262728293031