手抄报 安全手抄报 手抄报内容 手抄报图片 英语手抄报 清明节手抄报 节约用水手抄报

JS 编写贪吃蛇

时间:2024-10-29 05:27:44

1、分析项目需求使用键盘的方向键控制蛇的运动方向并吃到相应的食物。2、使用面向对象的思想分析贪吃蛇面向对象的核心思想:把一个系统分解为若干个事务,每个事务就是一个类分析贪吃蛇有哪些事务:地图食物蛇

2、确定项目的开发顺序① 地图 ② 食物 ③ 蛇

JS 编写贪吃蛇

3、定义地兔脒巛钒图类在Javascript中,任何一个类都存在两部分:属性和方法定义地图类:属性:宽度 :800px高度 :400px背景颜色:灰色定位方式:absolute(绝对定位)方法:sh泠贾高框ow方法用于显示地图

JS 编写贪吃蛇

4、定义window.onload方法,实例化地图类

JS 编写贪吃蛇

5、定义食物类食物类也有自己的属性和方法属性:宽度:20px高度:20px背景颜色:green定位方式:absolute横纵坐标:默认0和0方法:show方法用于随机显示食物

JS 编写贪吃蛇

6、实例化食物类并显示在地图中

JS 编写贪吃蛇

7、算法:随机显示食物坐标横坐标:Math.floor(Math.random()*40)纵坐标:Math.floor(Math.random()*20)

8、定义蛇类属骂宙逃慈性:宽度:20高度:20定位方式:absolute定义蛇节3节:使用数组保存蛇节,横坐标、纵坐标(横坐标连续,纵坐标相等),颜色方法:show方法,用于显示蛇节信息

JS 编写贪吃蛇

9、实例化Snake类,显示蛇节信息

JS 编写贪吃蛇

10、让蛇运动起来

JS 编写贪吃蛇

11、使用定时器让蛇运动起来

JS 编写贪吃蛇

12、定义setDirect方法,判断键盘键值并设置蛇的运动方向

JS 编写贪吃蛇

13、判断蛇是否吃到食物如果蛇头坐标与食物坐标完全重合,代表吃到食物

JS 编写贪吃蛇
© 手抄报圈