h5练手项目--简易版"雷霆战机"

项目初衷:看了萧井陌的游戏直播后自己也尝试写过两款游戏(贪吃蛇,俄罗斯方块--没写完hhh).
但总感觉效果不是很好,于是这次就再写了小时候喜欢玩的打飞机..游戏

就以编码过程中遇到的问题来写这篇blog吧

1. setInterval函数--有两个参数。第一个参数是一个由于interval的函数,第二个参数是时间间隔。需要注意的是以函数作为参数,则作为参数的函数不能加括号(暂时还不理解原因)。当然调用函数的时候肯定要加括号

2.关于canvas的加载图片。加载图片首先得先创建一个image对象 如:var enemy=new Image(). image对象有src属性.值得一提的是在一个js文件中第一个image对象需要调用onload属性去draw。其他图片则不需要。还需要考虑的是如何加载多张相同图片(这个问题困扰了一个晚上hhh).其实并不难.在需要创建或者使用该图片的时候创建对象然后push进数组。同时可以在另一个数组中保存该对象需要出现的坐标。。当然我写的时候就是直接遍历5次,创建5个对象。push10次。。。

3.对于数组的使用.以往博主常常使用二维数组--[[],[]]。但是这种使用并不巧妙也不直观。于是博主使用了对象数组[{x:1,y:2},{x:3,y:4}]这种形式。好处是在遍历的过程中不用去记位置,直接使用键即可

3.关于draw()函数  首先需要了解的是每次draw都需要clearrectangle.

4.添加元素.分为三步.第一步:create该元素 例如`var news=document.createElement("p")` 第二步:createTextNode(文本内容)第三布:添加 `news.appendChild(content)`

5.这次写"雷霆战机"做的好的地方.想到了设置了一个sortit()函数 --将不用的‘飞机子弹 敌机子弹 clear 掉’

6.不足之处.........其实概括起来就是缺少大局观,也就是写到哪想到哪(虽然我每次都是这样)。这样做的结果就是缺少大局观。以这个项目举例:刚开始就只是想将飞船和敌船画出来.实现碰撞.没有想过去set reward 以及 improve difficulty。就导致编写的代码很难维护.即使我后来加上 reward 以及 improve difficult 依然局限颇多(写到最后,发现难度的挑战每一次需要重新写代码。这种做法很弱智,但因为之前的原因。也不可改变).

7.下次我将这么写.敌机 ,飞船为一个对象。再set一个game对象--利用其中的属性监听--以便及时改变reward 以及improve difficulty...提升难度的函数我将这么写→以grade属性作为监听标准每到一个坎(如20 40 60 80)等improve 改变的机制就是change 飞船对象和敌机对象的属性。例如子弹的速度。子弹的半径--这就需要change 碰撞函数了(直接将子弹的半径作为碰撞函数的一个参数即可)....又想到一个问题.增加敌机生命值的函数如何写?→需要注意的是一开始就应该set函数当hp=0结束。

这样才能构建起一个可玩性强的游戏。。立个flag:以后把这个项目从写一次


项目地址:https://github.com/dongdaxiaodong/airportgame/

你可能感兴趣的:(前端)