- html里面的img元素只设宽不设高就会随着页面等比例缩放
一般通过用创建的init方法来进行整体的初始化
-
forEach()是for的精简版用于循环次数未知,循环次数难计算的情况下
foreach不支持在循环中添加删除操作,因为在使用foreach循环的时候数组(集合)就已经被锁定不能被修改
array.forEach(function(currentValue, index, arr), thisValue)
-
splice()方法从数组中添加/删除项目,然后返回被删除的项目。该方法会改变原始数组
arrayObject.splice(index,howmany,item1,…,itemX)
-
Math.random(),表示产生0-1直接的一个随机数
-
Math.round(x),表示把x四舍五入为最近的整数
总结之贪吃蛇
复盘整个js文件
用面向对象进行编程,先用构造函数创建一个对象,然后给对象上面加上各种方法
先用HTML搭建好主体框架,然后把所有需要的样式书写好,然后书写js文件
先用构造函数创建了名为Square的对象,这个对象主要是设置了每一节贪吃蛇的大体需要的属性,例如蛇头,蛇的每一节身子
Snake对象就代表一条蛇所需要的基本属性,包括蛇头,蛇尾的信息,这两个其实就是Square对象,还储存了蛇每个身体的位置信息,方便后续判断游戏结束,和食物的创建,这个对象上还包含了当蛇往各个方向走的时候坐标和图片的变化
Snake的init的方法就是对蛇的初始化,创建一条蛇需要的一系列东西,并且用链表将蛇头和蛇身体以线性的关系连接起来,并且设置了蛇默认往右别走
Snake的getNextPos方法是用来判断蛇头的下一个位置是什么,然后选择具体行为,这里下一个位置的判断就用到了最开始创建的snake实例的head里面存储的蛇头信息,包括具体位置和下一个方向的位置相关变化,在这个里面用到了return,因为会有多种条件,一旦满足就结束函数的调用
Snake的strategies方法用来表示各种情况后要做的事,这个方法其实是一个对象,然后每一个属性值都绑定不一样的函数,这个里面包括move,eat,die,其中move是最重要的
move里面包括每次创建新蛇头,新身体,还有判断最后最后那个身体要不要删除(如果吃到食物就不删除,增长身体,否则删除,让蛇移动),move里面最重要的是新节点的创建,旧节点的删除,还有节点直接的联系要改变,还要更新蛇的坐标,包括蛇头蛇尾,这个也很重要,还有一个点很重要是里面this的指向,小心弄错
eat里面就是让蛇前进且增长,并且计算游戏得分
die即游戏结束,此处用了后面的游戏,直接让游戏结束
上述基本设置了一个贪吃蛇的基本信息,但是还缺食物的创建
接下来就写了一个创建食物的函数,函数内部首先让食物随机位置,将整个背景看做是一个二维数组,食物的位置不能是蛇,也不能跨越边界
然后生成食物,食物的生成也用到了最开始的Square,储存了食物的基础信息,在每一次食物被吃掉的时候,与其多创建新食物还不如直接在原本的食物上修改,说建议使用设计模式的单例模式,但是目前学的有限,于是就用一个if来判断,没有食物就创建食物,有就改变位置信息
此时就将贪吃蛇游戏的基本内容全部书写完毕
接下来是要创建游戏逻辑
创建游戏逻辑就是先创建一个对象,游戏对象里面有两个我们需要的属性值,一个是timer,就是定时器的返回值,还有一个是得分
然后是对于游戏的初始化,游戏的初始化最开始要对蛇进行初始化,然后创建食物,然后给键盘事件绑定具体操作函数,然后让游戏开始。
游戏开始又是一个方法,是一个定时器,每过200毫秒就让蛇运动,让蛇按照相应方向前进
还有一个方法是专门用来停止蛇的运动的
最后是一个游戏结束的方法,游戏结束首先是要弹出游戏结束和得分,再让蛇停止运动,然后清空父元素里面的所有东西,再创建一个新的蛇的实例,还有游戏的实例,让游戏恢复初始状态
最后剩一点游戏的完善,开始按钮的事件绑定,还有暂停按钮的事件绑定
心得
明白了一个游戏的制作流程,先构建对象,然后添加方法,先把静态的东西都准备好,然后再让游戏动起来
一步一步慢慢来,每一个都要创建相应的对象,然后添加相应的方法,再进行整体的初始化
感觉上周写的扫雷就是练习了打字速度orz, 吐血