Question

我正在将一个jQuery游戏导入基于Angular 6的Ionic应用程序版本4。我能够将所有必需的js和css文件导入angular。但是随着游戏开始使用

game.onload（）

在Windows.load函数中的

，我在Angular 6中的ngInit（）中尝试过的一样。但是它不起作用！我该如何使用Angular 6调用在javascript变量中定义的函数。

我的JS代码是：

var game = {
    data: {
        score: 0,
        steps: 0,
        start: !1,
        newHiScore: !1,
        muted: !1
    },
    resources: [{
        name: "bg",
        type: "image",
        src: "../data/img/bg.png"
    }, {
        name: "clumsy",
        type: "image",
        src: "../data/img/clumsy.png"
    }, {
        name: "pipe",
        type: "image",
        src: "../data/img/pipe.png"
    }, {
        name: "logo",
        type: "image",
        src: "../data/img/logo.png"
    }, {
        name: "ground",
        type: "image",
        src: "../data/img/ground.png"
    }, {
        name: "gameover",
        type: "image",
        src: "../data/img/gameover.png"
    }, {
        name: "gameoverbg",
        type: "image",
        src: "../data/img/gameoverbg.png"
    }, {
        name: "hit",
        type: "image",
        src: "../data/img/hit.png"
    }, {
        name: "getready",
        type: "image",
        src: "../data/img/getready.png"
    }, {
        name: "new",
        type: "image",
        src: "../data/img/new.png"
    }, {
        name: "share",
        type: "image",
        src: "../data/img/share.png"
    }, {
        name: "tweet",
        type: "image",
        src: "../data/img/tweet.png"
    }, {
        name: "theme",
        type: "audio",
        src: "../data/bgm/"
    }, {
        name: "hit",
        type: "audio",
        src: "../data/sfx/"
    }, {
        name: "lose",
        type: "audio",
        src: "../data/sfx/"
    }, {
        name: "wing",
        type: "audio",
        src: "../data/sfx/"
    }],
    onload: function() {
        return me.video.init(900, 600, {
            wrapper: "screen",
            scale: "auto",
            scaleMethod: "fit"
        }) ? (me.audio.init("mp3,ogg"), void me.loader.preload(game.resources, this.loaded.bind(this))) : void alert("Your browser does not support HTML5 canvas.")
    },
    loaded: function() {
        me.state.set(me.state.MENU, new game.TitleScreen), me.state.set(me.state.PLAY, new game.PlayScreen), me.state.set(me.state.GAME_OVER, new game.GameOverScreen), me.input.bindKey(me.input.KEY.SPACE, "fly", !0), me.input.bindKey(me.input.KEY.M, "mute", !0), me.input.bindPointer(me.input.KEY.SPACE), me.pool.register("clumsy", game.BirdEntity), me.pool.register("pipe", game.PipeEntity, !0), me.pool.register("hit", game.HitEntity, !0), me.pool.register("ground", game.Ground, !0), me.state.change(me.state.MENU)
    }
};

我想在游戏变量中调用onload函数！

我的Angular代码是：

import { Component, OnInit } from '@angular/core';
import { NavParams  } from '@ionic/angular';
import { ActivatedRoute } from '@angular/router';
//declare function helloJS();
@Component({
  selector: 'app-test',
  templateUrl: './test.page.html',
  styleUrls: ['./test.page.scss'],
})
export class TestPage implements OnInit {
  id: string
  constructor(private route : ActivatedRoute) { 

  }

  ngOnInit() {
    game.onload();
  }
}

我通过以上代码尝试过！但是错误是cannot find name game。我知道，通常情况下，角游戏无法获得什么游戏！所以我怎么能调用那个函数！请帮帮我！

Answer 1

导出变量

Demo.js

 exports.game = {
        data: {
            score: 0,
            steps: 0,
            start: !1,
            newHiScore: !1,
            muted: !1
        },
        resources: [{
            name: "bg",
            type: "image",
            src: "../data/img/bg.png"
        }, {
            name: "clumsy",
            type: "image",
            src: "../data/img/clumsy.png"
        }, {
            name: "pipe",
            type: "image",
            src: "../data/img/pipe.png"
        }, {
            name: "logo",
            type: "image",
            src: "../data/img/logo.png"
        }, {
            name: "ground",
            type: "image",
            src: "../data/img/ground.png"
        }, {
            name: "gameover",
            type: "image",
            src: "../data/img/gameover.png"
        }, {
            name: "gameoverbg",
            type: "image",
            src: "../data/img/gameoverbg.png"
        }, {
            name: "hit",
            type: "image",
            src: "../data/img/hit.png"
        }, {
            name: "getready",
            type: "image",
            src: "../data/img/getready.png"
        }, {
            name: "new",
            type: "image",
            src: "../data/img/new.png"
        }, {
            name: "share",
            type: "image",
            src: "../data/img/share.png"
        }, {
            name: "tweet",
            type: "image",
            src: "../data/img/tweet.png"
        }, {
            name: "theme",
            type: "audio",
            src: "../data/bgm/"
        }, {
            name: "hit",
            type: "audio",
            src: "../data/sfx/"
        }, {
            name: "lose",
            type: "audio",
            src: "../data/sfx/"
        }, {
            name: "wing",
            type: "audio",
            src: "../data/sfx/"
        }],
        onload: function() {
            return me.video.init(900, 600, {
                wrapper: "screen",
                scale: "auto",
                scaleMethod: "fit"
            }) ? (me.audio.init("mp3,ogg"), void me.loader.preload(game.resources, this.loaded.bind(this))) : void alert("Your browser does not support HTML5 canvas.")
        },
        loaded: function() {
            me.state.set(me.state.MENU, new game.TitleScreen), me.state.set(me.state.PLAY, new game.PlayScreen), me.state.set(me.state.GAME_OVER, new game.GameOverScreen), me.input.bindKey(me.input.KEY.SPACE, "fly", !0), me.input.bindKey(me.input.KEY.M, "mute", !0), me.input.bindPointer(me.input.KEY.SPACE), me.pool.register("clumsy", game.BirdEntity), me.pool.register("pipe", game.PipeEntity, !0), me.pool.register("hit", game.HitEntity, !0), me.pool.register("ground", game.Ground, !0), me.state.change(me.state.MENU)
        }
    };

然后导入组件内部

import { Component } from '@angular/core';
import * as games from '../assets/demo';

ngOnInit() {
    games.game.onload();
  }

如何在Angular 6中的javascript中调用onload函数？

1 个答案: