2017-09-03 51 views
0

只要我将我的JavaScript文件分成两个单独的文件VScode intellisense告诉我与第一个文件有关的所有变量和函数都未定义在第二个文件中,但脚本在浏览器中运行良好!在VScode中如何在分割.js文件时停止某些未定义函数的内容?

文件logic.js是一个在main.js中调用的大函数。

如果我没有在一个巨大的函数logic.js它的作品,但它需要在一个函数。

如果我只是将logic.js的内容复制并粘贴到main.js的末尾,那很好......我不明白VScode中发生了什么。

我所说的脚本在体内(我曾尝试用相同的结果头)

<body onload="mainLoop()"> 
<canvas id="canvas" width="650" height="650">Sorry, your browser can't display canvas!</canvas> 
<script src="logic.js"></script> 
<script src="main.js"></script> 

我可以调用这些文件以相反的顺序,同样的事情发生时,程序运行正常,但VSCode停止intellisense在logic.js这个巨大的函数中工作。这里

UPDATE是2个文件:

// FILE 1个main.js

"use strict"; 

// Set variables 

/** @type {HTMLCanvasElement} */ 
var canvas = document.getElementById("canvas"); 
var ctx = canvas.getContext("2d"); 

let rightPressed = false; 
let leftPressed = false; 

var heroRotation = 0; 
var bulletFired = false; 
var numberOfZombies = 20; 


/** 
* @description general purpose renderer 
* @param {*} state - the name of the object to act on 
*/ 

function render2(state) { 
    ctx.save(); 
    ctx.translate(state.xPosition, state.yPosition); 
    ctx.rotate(state.angle * Math.PI/180); 
    ctx.fillStyle = state.color; 
    ctx.fillRect(state.width/-2, state.height/-2, state.width, state.height); 
    ctx.restore(); 
} 


/** 
* @description fire the heros gun 
* @param {*} state 
*/ 

function fire(state) { 
    let fireangle = hero.angle; 
    // while (state.xPosition > 50 && state.xPosition < (canvas.width - 50) || state.yPosition > 50 && state.yPosition < (canvas.height - 50)) { 
    state.xPosition += 1 * Math.sin(fireangle); 
    state.yPosition -= 1 * Math.cos(fireangle); 
    // } 
} 


/** 
* @description Render the zombie objects 
*/ 

function renderZombies() { 
    for (let i = 0; i < allmyzombies.length; i++) { 
     render2(allmyzombies[i]); 
    } 
} 


/** 
* @description clear the canvas 
*/ 

function clearCanvas() { 
    ctx.clearRect(0, 0, canvas.width, canvas.height); 
} 

// Factory functions 

const createZombie = ({ 
    status = 1, 
    width = 10, 
    height = 10, 
    xPosition, 
    yPosition, 
    angle = 0, 
    color = "green" 
}) => ({ 
    status, 
    width, 
    height, 
    xPosition, 
    yPosition, 
    angle, 
    color 
}); 

const createHero = ({ 
    status = 1, 
    width = 25, 
    height = 50, 
    xPosition, 
    yPosition, 
    angle = 0, 
    color = "red" 
}) => ({ 
    status, 
    width, 
    height, 
    xPosition, 
    yPosition, 
    angle, 
    color 
}); 

const createBullet = ({ 
    status = 1, 
    width = 5, 
    height = 10, 
    xPosition, 
    yPosition, 
    angle = 0, 
    color = "white" 
}) => ({ 
    status, 
    width, 
    height, 
    xPosition, 
    yPosition, 
    angle, 
    color 
}); 


// Create the zombie objects using the factory function 
var allmyzombies = []; 

function createZombies(numberOfZombies) { 

    for (let i = 0; i < numberOfZombies; i++) { 

     let x = Math.floor(Math.random() * canvas.width); 

     if (x > (canvas.width/2)) { 
      x += (canvas.width/3); 
     } else { 
      x -= (canvas.width/3); 
     } 

     let y = Math.floor(Math.random() * canvas.height); 

     if (y > (canvas.height/2)) { 
      y += (canvas.width/3); 
     } else { 
      y -= (canvas.height/3); 
     } 

     allmyzombies[i] = createZombie({ 
      xPosition: x, 
      yPosition: y 
     }); 
    } 
} 

createZombies(numberOfZombies); 

// create the hero using the factory function 

const hero = createHero({ 
    xPosition: canvas.width/2, 
    yPosition: canvas.height/2 
}); 


// create the bullet using the factory function 
// HOW TO USE BULLET WIDTH TO GET IN THE MIDDLE BEFORE ITS MADE?! 

const bullet = createBullet({ 
    xPosition: (canvas.width + hero.width)/2, 
    yPosition: (canvas.height + hero.height)/2 
}); 


// Add event listener for keyboard handler 

document.addEventListener("keydown", keyDownHandler, false); 
document.addEventListener("keyup", keyUpHandler, false); 

/** 
* @description keyDownHandler 
* @param {*} event - the event from the eventListener 
*/ 

function keyDownHandler(event) { 

    switch (event.code) { 
     case "KeyF": 
      bulletFired = true; 
      break; 
     case "ArrowLeft": 
      leftPressed = true; 
      break; 
     case "ArrowRight": 
      rightPressed = true; 
      break; 
    } 
    event.preventDefault(); 
} 


/** 
* @description keyUpHandler 
* @param {*} event - the event from the eventListener 
*/ 

function keyUpHandler(event) { 
    switch (event.code) { 
     case "ArrowLeft": 
      leftPressed = false; 
      break; 
     case "ArrowRight": 
      rightPressed = false; 
      break; 
    } 
    event.preventDefault(); 
} 

function mainLoop() { 
    clearCanvas(); 
    renderZombies(); 
    render2(hero); 
    render2(bullet); 
    logic(); 
    requestAnimationFrame(mainLoop); // keeps running draw 60fps on paint 
} 


mainLoop(); // Call main loop function 

// FILE 2 Logic.js

/** 
* @description game logic 
*/ 

function logic() { 
    for (let zombie of allmyzombies) { 

     function moveZombieUp() { 
      zombie.yPosition -= ZombieSpeed; 
     } 

     function moveZombieDown() { 
      zombie.yPosition += ZombieSpeed; 
     } 

     function moveZombieLeft() { 
      zombie.xPosition -= ZombieSpeed; 
     } 

     function moveZombieRight() { 
      zombie.xPosition += ZombieSpeed; 
     } 

     let zombieStupidity = Math.random(); 
     let zombieStupidityThreshold = 0.75; 

     if (zombieStupidity > zombieStupidityThreshold) { 
      var zombieIsStupid = true; 
     } else { 
      var zombieIsStupid = false; 
     } 

     let ZombieSpeed = (Math.random() * 0.5); 
     let zombieIsRightOfHero = zombie.xPosition > hero.xPosition; 
     let zombieIsLeftOfHero = zombie.xPosition < hero.xPosition; 
     let zombieIsBelowHero = zombie.yPosition > hero.yPosition; 
     let zombieIsAboveHero = zombie.yPosition < hero.yPosition; 

     if (zombieIsRightOfHero) { 
      if (zombieIsStupid) { 
       moveZombieRight(); 
      } else { 
       moveZombieLeft(); 
      } 
     } 
     if (zombieIsLeftOfHero) { 
      if (zombieIsStupid) { 
       moveZombieLeft(); 
      } else 
       moveZombieRight(); 
     } 
     if (zombieIsBelowHero) { 
      if (zombieIsStupid) { 
       moveZombieDown(); 
      } else 
       moveZombieUp(); 
     } 
     if (zombieIsAboveHero) { 
      if (zombieIsStupid) { 
       moveZombieUp(); 
      } else 
       moveZombieDown(); 
     } 
     // detect zombie hero collision 
     if (zombie.xPosition < hero.xPosition + hero.width && 
      zombie.xPosition + zombie.width > hero.xPosition && 
      zombie.yPosition < hero.yPosition + hero.height && 
      zombie.height + zombie.yPosition > hero.yPosition) { 
      throw new Error("You died!"); 
     } 
     // detect zombie bullet collision 
     if (zombie.xPosition < bullet.xPosition + bullet.width && 
      zombie.xPosition + zombie.width > bullet.xPosition && 
      zombie.yPosition < bullet.yPosition + bullet.height && 
      zombie.height + zombie.yPosition > bullet.yPosition) { 
      throw new Error("You killed a zombie!"); 
     } 
    } 

    if (bulletFired) { 
     fire(bullet); 
    } 

    if (bullet.yPosition < 50 || bullet.yPosition > (canvas.height - 50)) { 
     bulletFired = false; 
    } 

    // act on keypress controller info to rotate hero 
    if (rightPressed) { 
     hero.angle += 1; 
    } else if (leftPressed) { 
     hero.angle -= 1; 
    } 
} 
+1

也许你想发布您的代码?我可以告诉你,这不是关于VSCode。 – Kyon

+0

我认为需要在VSCode中用整个文件夹结构打开才能找到正在发生的事情,这次发布所有文本没有意义。你可以下载它吗? – Sumomo

+0

相信我,我们可以处理,如果你只是在这里发布你的两个文件内联! – Kyon

回答

0

它不涉及到VS码。

的第一个文件对HTML载入可以通过文件 后确认你的情况logic.js功能和增值经销商可用于main.js

所以,你需要将它们正确排序,并确保不存在双向依赖关系。如main.js调用logic.js函数和logic.js调用main.js函数。

您需要按照依赖性顺序在html中订购js文件。 它会更容易给出一个具体的例子,如果你想发布您的代码

提示: 从线

如果我只是复制和粘贴logic.js的内容上的主要结束.js很好...

我知道logic.js函数使用main.js数据。 如果是这样,你需要重新对html中的js加载进行排序。 ```

```

+0

我上传了这些文件,请再次检查我的问题。谢谢! – Sumomo

+0

简单看看我的手机中的代码,似乎logic.js应该出现在html – Itamar

+0

的main.js之后,我按照现在的建议交换了顺序,它说逻辑没有在控制台中定义。这是奇怪的,因为它似乎在我交换订单之前工作?!那么它是如何在main.js之后立即加载的呢?我如何从main.js调用文件logic.js中的函数logic()? – Sumomo

相关问题