【js小游戏&案例】纯前端实现飞机大战,附带源码

技能:

使用html js css实现飞机大战小游戏

需求:

我军飞机左右移动,并且按空格 可以发射炮弹,敌方飞机从上往下飞,接触到我方炮弹 飞机被歼灭,我军接触到敌军飞机也将会被歼灭,我方飞机吃到道具可以增加弹道

思路:

初始化:初始创建我方飞机,用定时器定时创建敌方飞机,敌方飞机位置由random()随机生成

移动:飞机样式使用position: absolute,然后监听键盘被按事件 用left位置来移动我方飞机,敌军飞机也有定时器 定时向下移动

发射炮弹:创建炮弹跟创建敌军类似,区别是炮弹的位置是根据我方飞机的位置进行初始化的,而敌军飞机位置是随机的

敌军歼灭:通过getBoundingClientRect()获取位置信息 来判断是否接触到;我军歼灭类似

能量小球:产生小球跟敌军类似,休改下样式就好了

效果图:

【js小游戏&案例】纯前端实现飞机大战,附带源码_第1张图片

 全部代码:





    飞机大战
    



    
分数: 0

有其他问题 欢迎大家评论留言

你可能感兴趣的:(html5,&&,css3,&&,浏览器,Javascript与ES6~,javascript,开发语言,ecmascript)