0
Dès que je divise mon fichier javascript en 2 fichiers séparés VScode intellisense me dit que toutes les variables et fonctions relatives au premier fichier sont indéfinies dans le second fichier, MAIS le script fonctionne bien dans le navigateur!Dans VScode, comment puis-je empêcher le contenu de certaines fonctions d'être indéfini lors de la séparation de fichiers .js?
Le fichier logic.js est une grande fonction appelée dans main.js.
Si je n'ai pas logic.js dans une fonction géante cela fonctionne, mais il doit être dans une fonction.
Si je ne fais que copier et coller le contenu de logic.js sur la fin de main.js c'est bien ... Je ne comprends pas ce qui se passe dans VScode.
J'appelle les scripts dans le corps (je l'ai essayé la tête avec les mêmes résultats)
<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>
je peux appeler les fichiers dans l'ordre inverse et la même chose se passe, le programme fonctionne bien, mais VSCode arrête intellisense travaillant à l'intérieur de l'énorme fonction qu'est logic.js.
mise à jour ici sont les 2 fichiers:
// FICHIER 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
// DOSSIER 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;
}
}
Peut-être que vous voulez envoyer votre code? Et je peux vous dire, qu'il ne s'agit pas de VSCode. – Kyon
Je pense qu'il doit être ouvert dans VSCode avec toute la structure de dossiers pour trouver ce qui se passe, il n'a pas de sens de poster tout le texte cette fois. Pouvez-vous le télécharger OK? – Sumomo
Faites-moi confiance, nous pouvons gérer, si vous venez de publier vos deux fichiers inline ici! – Kyon