zoukankan      html  css  js  c++  java
  • 飞机大作战游戏 2----(运用H5和Js制作)

    游戏加载中状态

    游戏加载中的图片

    用一个数组将图片装起来

    var loading=[];
                 loading[0]=new Image;
                 loading[0].src="img/game_loading1.png"
                 loading[1]=new Image;
                 loading[1].src="img/game_loading2.png"
                 loading[2]=new Image;
                 loading[2].src="img/game_loading3.png"
                 loading[3]=new Image;
                 loading[3].src="img/game_loading4.png"

    定义一个对象储存图片的数据

    var Loading={
                    img:loading,
                    length:loading.length,
                    186,
                    height:38
                }

    使用构造函数绘制加载中的图片

    函数中需要定义一个索引,再用paint的方法绘制图片,

    在step的方法中让索引每次都加1,让图片产生变化,当索引值对于数组的长度时将游戏状态定为RUNNING

    function jz(ld){
                     this.img=ld.img;
                     this.length=ld.length;
                     this.width=ld.width;
                     this.height=ld.height;
    //               定义一个索引,方面查找图片
                    this.starindex=0
    //               绘制图片的方法paint
                    this.paint=function(){
                      context.drawImage(this.img[this.starindex],0,HEIGHT-this.height);
                  }
    //              运动的方法step
                    this.time=0
                    this.step=function(){
                        this.time++
                        if(this.time%3==0){
                        this.starindex++}
                        if (this.starindex == this.length) {
                            start=RUNNING
                        }
                    }
                 }

     创建运动图片的对象

     var sky1=new jz(Loading)

    给canvas绑定点击事件
       当点击画布界面是进入START状态    

      canvas.onclick=function(){
                  if(start==START){
                   start=STARTING;
                  }
                 }

    定时器调用paint和step方法

  • 相关阅读:
    axios
    es6
    $route监听路由变化
    容易挂
    自定义全局组件/插件
    eslintrc.js
    dev-server.js
    webpack-dev-server.js
    怎么消除间隔间的空白字符
    es6语法
  • 原文地址:https://www.cnblogs.com/xuhanghang/p/10116043.html
Copyright © 2011-2022 走看看