JS简易贪吃蛇，构造函数实现

最新推荐文章于 2021-10-12 20:26:27 发布

amnesia_ZhangSan

最新推荐文章于 2021-10-12 20:26:27 发布

阅读量445

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/amensia_ZhangSan/article/details/96033254

版权

需求分析:
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();		//执行创建食物1
		var food2=new food();
		food2.color='#fff';		//改变食物2的颜色属性
		food2.display();		//创建食物2
		var snake1  = new snake();
		snake1.move();		//蛇移动
		snake1.display();		//创建蛇		先创建后移动会写死，详情看snake1.move()部分
		//给整个body添加点击事件
		by.onkeydown=function(event){
			snake1.jilu(event.keyCode);       //将获取到的keycode转换引导移动
			console.log(event.keyCode);
//			根据获取到的键值来实现移动
		}
//		=======&

最低0.47元/天解锁文章

amnesia_ZhangSan

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
JS简易贪吃蛇，构造函数实现

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <body> </body> <script> var by = document.getElement...
复制链接

扫一扫

专栏目录