小知识点 + 贪吃蛇 -- 大一下第十四周

  • 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, 吐血

猜你喜欢

转载自blog.csdn.net/weixin_50948265/article/details/117636450
今日推荐