Question

我已经在外部js中编写了函数loja（）。在另一个html文件中，在文件末尾，我已将其链接到外部js，然后在html文件的主体中，我创建了一个div，然后onclick它将调用函数loja（）。一切正常，但问题是javascript函数不是在div内而是在页面末尾加载。您能帮帮我吗？这是来自html文件。

<div class="section-title" onclick="loja()">Luaj
            </div>

这是javascript文件。

  // Create our 'main' state that will contain the game


function loja(){
var mainState = {
   preload: function() { 
    game.load.image('bird', 'assets/car.png'); 
    game.load.image('pipe', 'assets/pipe.png');
    game.load.audio('jump', 'assets/jump.wav'); 
    game.load.image('background', 'assets/background.png'); 
},




create: function() { 
   game.add.tileSprite(0, 0, 1000, 600, 'background'); 


    // Set the physics system
    game.physics.startSystem(Phaser.Physics.ARCADE);

    // Display the bird at the position x=100 and y=245
    this.bird = game.add.sprite(100, 245, 'bird');

    // Add physics to the bird
    // Needed for: movements, gravity, collisions, etc.
    game.physics.arcade.enable(this.bird);

    // Add gravity to the bird to make it fall
    this.bird.body.gravity.y = 1000;  

    // Call the 'jump' function when the spacekey is hit
    var spaceKey = game.input.keyboard.addKey(
                    Phaser.Keyboard.SPACEBAR);
    spaceKey.onDown.add(this.jump, this);  


    // Create an empty group
this.pipes = game.add.group();   

this.timer = game.time.events.loop(1500, this.addRowOfPipes, this);


this.score = 0;
this.labelScore = game.add.text(20, 20, "0", 
    { font: "30px Arial", fill: "#ffffff" });

     // Move the anchor to the left and downward
this.bird.anchor.setTo(-0.2, 0.5);   

this.jumpSound = game.add.audio('jump'); 

},





update: function() {
    // If the bird is out of the screen (too high or too low)
    // Call the 'restartGame' function
    if (this.bird.y < 0 || this.bird.y > 490)
        this.restartGame();

   game.physics.arcade.overlap(
    this.bird, this.pipes, this.hitPipe, null, this); 
    if (this.bird.angle < 20)
    this.bird.angle += 1; 
},




// Make the bird jump 
jump: function() {
    // Add a vertical velocity to the bird
    this.bird.body.velocity.y = -300;

    // Create an animation on the bird
var animation = game.add.tween(this.bird);

// Change the angle of the bird to -20° in 100 milliseconds
animation.to({angle: -20}, 100);

// And start the animation
animation.start(); 

if (this.bird.alive == false)
    return; 

    this.jumpSound.play();  
},

// Restart the game
restartGame: function() {
    // Start the 'main' state, which restarts the game
    game.state.start('main');
},


addOnePipe: function(x, y) {
    // Create a pipe at the position x and y
    var pipe = game.add.sprite(x, y, 'pipe');

    // Add the pipe to our previously created group
    this.pipes.add(pipe);

    // Enable physics on the pipe 
    game.physics.arcade.enable(pipe);

    // Add velocity to the pipe to make it move left
    pipe.body.velocity.x = -200; 

    // Automatically kill the pipe when it's no longer visible 
    pipe.checkWorldBounds = true;
    pipe.outOfBoundsKill = true;
},



addRowOfPipes: function() {
    // Randomly pick a number between 1 and 5
    // This will be the hole position
    var hole = Math.floor(Math.random() * 5) + 1;

    // Add the 6 pipes 
    // With one big hole at position 'hole' and 'hole + 1'
    for (var i = 0; i < 8; i++)
        if (i != hole && i != hole + 1) 
            this.addOnePipe(400, i * 60 + 10); 

    this.score += 1;
this.labelScore.text = this.score;          
},

hitPipe: function() {
    // If the bird has already hit a pipe, do nothing
    // It means the bird is already falling off the screen
    if (this.bird.alive == false)
        return;

    // Set the alive property of the bird to false
    this.bird.alive = false;

    // Prevent new pipes from appearing
    game.time.events.remove(this.timer);

    // Go through all the pipes, and stop their movement
    this.pipes.forEach(function(p){
        p.body.velocity.x = 0;
    }, this);
},
};
// Initialize Phaser, and create a 400px by 490px game
var game = new Phaser.Game(600, 800);

// Add the 'mainState' and call it 'main'
game.state.add('main', mainState); 

// Start the state to actually start the game
game.state.start('main');
}

Answer 1

在这种情况下，页面中出现javascript代码的地方似乎不合适。您在文件末尾链接了它吗？比它会出现在文件末尾。

我了解您想要的是您的代码与html文件结构的某些部分（称为DOM）进行交互，尤其是某些DIV标记。

您需要使用Javascript与该DIV节点进行交互。可能在其中渲染您的游戏。

在您的JS文件中，我仅看到定义和一些方法调用。我看不到将某些内容呈现到DOM中的部分。

总结：您的javascript方法定义所在的位置与那些方法的执行效果将出现的位置不同。

Answer 2

您似乎正在尝试实施开源的Phaser游戏（https://github.com/photonstorm/phaser/blob/v2.4.4/src/core/Game.js）

由于您的问题是有关该框架的功能，因此这应该是您获取信息的起点。同样，在寻求帮助时，您也不应该遗漏重要信息，例如正在使用的任何框架（尤其是在这种情况下，问题仅在于您没有正确使用它）。

如果您查看第四个参数，它实际上允许您指定DOM父级，它接受ID或元素本身。因此，您可以在ID为http://main-domain.com/的HTML中插入另一个元素后，执行以下操作：

pgame

外部Javascript将在div外部执行

2 个答案: