• js实现飞机大战小游戏


    一开始先定义一个变量state记录游戏的状态

    预备

    游戏开始前的准备界面的内容

    画布的宽高

    游戏的各种状态  自定义的规则,定义常量来实现  

    绘制不断运动的背景图片,

    创建图片对象,给定图片的src属性  加载图片

    设置背景图片对象的详细信息,宽度,高度,图片对象,

    自定义构造函数

    设置基本的数据

    设置绘图的需要的坐标  --两张图片需要不断的运动    0,0,0,-this.height

    绘制图片的方法 ----两张图片

    图片运动的方法---两张图片的y坐标不断的更改---判断临界点

    实例化背景图片的对象   通过构造函数实例化

    游戏的logo

    直接在画布中绘制logo  state == START

    点击画布  STARTING

    我方飞机出场阶段  游戏过渡阶段

    飞机出场

    准备好飞机出场的所有图片 数组  宽高一致,只是飞机在图片中的位置不一样而已

    设置加载图片的信息,这是个对象  有哪些图片  属性imgs:LOADINGS  宽 高 

    记录了加载的图片数量

    自定义的动画效果构造函数

    基本数据  -----  上面的对象数据都要包含

    索引 ----- 记录当前绘制第几张图片

    绘制图片  坐标固定  :0,画布高度-图片的高度

    速度的属性

    运动的方法  每一次增加这个速度,当这个数去取某个数的余数等于0的时候

    切换索引 --- 索引值+1

    如果所有的图片都绘制了,表示需要切换游戏状态为RUNNING

    实例化动画效果的对象

    开始游戏

    我方飞机加载完成以后,直接进入游戏开始阶段

    敌方飞机进场   我方飞机发射子弹

    记录分数  生命值的变化

    具体的步骤和前面的步骤

    构造函数 创建对象完成

    暂停游戏

    游戏中,如果鼠标出了画布,就暂停游戏

    鼠标再次进入时,恢复游戏

    结束游戏

    当生命值为0的时候,结束游戏

    启动游戏

    通过定时器调用函数

    任何时候都需要绘制背景图片

    在START状态下绘制logo

    在STARTING状态下绘制  动画效果的绘制方法以及运动方法

    总结:做这个小游戏之前需要先分析每个游戏状态下要做的事情,

    通过构造函数来绘制我方飞机,子弹,敌方飞机等,

    最后通过定时器来调用各个函数。

  • 相关阅读:
    丑数(摘)
    queue 之团队队列(摘)
    stack 集合栈计算机 (摘)
    反片语(map)
    stl的集合set——安迪的第一个字典(摘)
    stringstream函数(i o)
    T
    S
    R
    java面试题
  • 原文地址:https://www.cnblogs.com/hyh888/p/11587316.html
Copyright © 2020-2023  润新知