只要我将我的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;
}
}
也许你想发布您的代码?我可以告诉你,这不是关于VSCode。 – Kyon
我认为需要在VSCode中用整个文件夹结构打开才能找到正在发生的事情,这次发布所有文本没有意义。你可以下载它吗? – Sumomo
相信我,我们可以处理,如果你只是在这里发布你的两个文件内联! – Kyon