我是javascript和nodejs的新手,我正在使用这个项目来发展我的技能并学习新技术。目前,我的项目使用多个彼此依赖的类。类文件位于不同的目录中,我目前正在尝试使用export和require语句来允许在其他文件中引用类。我也在使用browserify和watchify将所有文件捆绑在一起,以简化html脚本标记。
此处的项目布局(JavaScript文件夹)
-Base (Folder)
--Game.js (Class)
--Player.js (Class)
--Ball.js (Class)
-Helpers (Folder)
--Draw.js (Class)
--Helper.js (Class)
-GameType (Folder)
--Game1.js (Class)
彼此依赖的类如下。
Game is Dependent on
--Draw.js
--Helper.js
Player and Ball are Dependent on
--Helper.js
Game1
--Game.js
--Ball.js
--Player.js
项目在app.js文件中加载,并需要game1文件。目前我正在尝试测试并获取所有需求和导出语句。目前在app.js文件中我能够创建一个game1对象,但我无法访问其中的变量和方法。我可以控制日志对象并且它具有所有正确的变量和方法,因此它正确地创建了game1对象,但是我无法访问它的任何部分。我不确定我目前是否正在使用ES6类表示法的require和export语句,或者我的代码是否有其他问题。我是否正确使用了需求和导出语句?
以下是类和app.js文件的片段。一些方法 在几个类中需要完成,但我试图添加require和export功能,以便更好地导航我的代码。我希望你能帮助我找到解决问题的方法。
app.js
const Game1 = require('./GameType/game1.js');
window.onload = function(){
console.log("Test Started");
console.log();
var canvasLocator = document.querySelector("#gameCanvas");
var canvasContext = canvasLocator.getContext("2d");
var game1 = new Game1();
//Prints out the correct object in the console
console.log(game1);
game1.draw();
//Returns an empty array of objects
//In my test is should return a draw obj
}
Game1.js
const Game = require('../Base/Game.js');
const Ball = require('../Base/Ball.js');
const Player = require('../Base/Player.js');
class Game1 extends Game{
constructor(){
super();
this.ball = new Ball(400, 300);
this.player1 = new Player("User", 15, 275, "blue");
this.player2 = new Player("AI", 775, 275, "blue");
this.mouseYPos;
}
refresh(){
//Needs to be implemented
}
draw(){
console.log("Super Draw: " + this.ball);
}
moveEverything(){
//Needs to be implemented
}
}
module.exports = Pong;
Game.js作为界面工作,并且还具有所有游戏所需的变量
'use strict';
const Helper = require('../Helpers/Helper.js');
const Draw = require('../Helpers/Draw.js');
class Game{
constructor(){
this.interval;
this.started = false;
this.framesPerSecond = 30;
this.drawObj = new Draw();
this.helper = new Helper();
}
//Each game needs to implement
draw(){
console.log("draw() not implemented in child class!");
}
moveEverything(){
console.log("moveEverything() not implemented in child class!");
}
refresh(){
console.log("refresh() not implemented in child class!");
}
};
module.exports = Game
球
const Helper = require('../Helpers/Helper.js')
class Ball{
constructor(x, y){
this.ballX = x;
this.ballY = y;
this.ballSpeedX;
this.ballSpeedY;
this.ballSpeedXChange;
this.ballSpeedYChange;
this.helper = new Helper();
}
move(x,y){
this.ballX = this.ballX + x;
this.ballY = this.ballY + y;
}
increaseSpeed(speedX, speedY){
this.ballSpeedX = this.ballSpeedX + speedX;
this.ballSpeedY = this.ballSpeedY + speedY;
}
reflectBall(player, drawObj){
}
reflect(ptOfContact, paddleSpeed){
}
setBallDifficulty(difficulty){
switch(difficulty){
case "Easy":
this.ballSpeedXChange = -1;
this.ballSpeedYChange = 1;
break;
case "Medium":
this.ballSpeedXChange = -1.5;
this.ballSpeedYChange = 1.5;
break;
case "Hard":
this.ballSpeedXChange = -2;
this.ballSpeedYChange = 2;
break;
default:
console.log("No difficulty Found");
}
}
}
module.exports = Ball
播放器
const Helper = require('../Helpers/Helper.js');
class Player{
constructor(input, x, y, color){
//Boolean value for AI or Actual Player
this.inputType = this.inputType(input);
this.playerX = x;
this.playerY = y;
this.playerSpeed;
this.playerScore = 0;
this.paddleWidth = 10;
this.paddleHeight = 50;
this.color = color;
this.helper = new Helper();
}
move(drawObj){
//True: User Input
//False: AI Input
if(this.inputType){
this.movePlayerInYDir(drawObj);
}
else{
this.movePlayerAIInYDir(drawObj);
}
}
movePlayerInYDir(drawObj){
let before = this.playerY;
this.playerY = this.helper.playerInput(drawObj);
this.playerSpeed = this.playerY - before;
if((this.playerY + this.paddleHeight) >= (drawObj.getBaseHeight())){
this.playerY = (drawObj.getBaseHeight() - this.paddleHeight);
}
}
movePlayerAIInYDir(drawObj){
this.playerSpeed = this.setBotDifficulty("Easy");
this.playerY = this.playerY + this.playerSpeed;
if(this.playe2Y <= 0){
//Hits Top
this.playerSpeed = (this.playerSpeed) * -1;
}
else if((this.playerY + this.paddleHeight) >= drawObj.getBaseHeight()){
//Hits Bottom
this.playerSpeed = (this.playerSpeed) * -1;
}
}
setAIDifficulty(difficulty){
switch(difficulty){
case "Easy":
//TODO
break;
case "Medium":
//TODO
break;
case "Hard":
//TODO
break;
case "Practice":
//Unbeatable Mode
break;
default:
console.log("No difficulty Found");
}
}
//Helper
inputType(type){
//True: Real Input
//False: AI
switch(type){
case "User":
return true;
case "AI":
return false;
default:
console.log("Type not recognized");
}
}
}
module.exports = Player
辅助
class Helper{
constructor(){
this.gameType;
this.canvasLocator = document.querySelector("#gameCanvas");
this.canvasContext = this.canvasLocator.getContext("2d");
this.mouseXPos;
this.mouseYPos;
}
getMouseYPos(canvas, evt) {
var rect = canvas.getBoundingClientRect();
return (evt.clientY - rect.top);
}
playerInput(drawObj){
let c = this.canvasLocator;
let helper = this;
//let game = this;
//let mouseYPos;
//console.log(game);
c.addEventListener("mousemove", function(evt){
helper.mouseYPos = helper.getMouseYPos(c, evt);
}
, false);
//console.log(game.mouseYPos);
return helper.mouseYPos;
}
change(speed){
//Ball Function for reflection
if(speed > 8 || speed < -8){
return 2;
}
return (Math.abs(1/8 * speed) + 1);
}
randomIntNumber(min, max){
min = Math.ceil(min);
max = Math.floor(max);
return Math.floor(Math.random() * (max - min)) + min;
}
randomSpeed(){
if(this.randomIntNumber(0, 100) % 2 == 0){
return this.randomIntNumber(-7, -9);
}
else{
return this.randomIntNumber(7, 9);
}
}
randomNumber(min, max){
return (Math.random() * (max - min)) + min;
}
}
module.exports = Helper
感谢您的帮助。
答案 0 :(得分:0)
对于初学者,您询问了如何在ES6中导入和导出。在我解决之前,重要的是要注意ES6模块的语法与Node.JS导入模块的方式不同。您的示例使用Node.JS Common.js样式模块加载。
在ES6中,您可以导入类似的模块......
import jquery from 'jquery';
或者如果你正在加载node_modules文件夹之外的东西......
import myClass from './path/to/where/the/file/is';
我刚刚提供的两个示例是如何将整个文件作为依赖项加载。
现在,如果你只想导入一个单独的功能,你也可以使用ES6。
test.js
const myFunction = () => { alert("hello world") };
export { myFunction }
现在你可以像我这样只导入myFunction ......
import { myFunction } from './path/to/test.js';
所有这些都说明了,您需要记住的一件事是本机浏览器还没有能够导入JavaScript模块。因此,为了解决这个问题,我们需要使用像Webpack这样的东西来提供使用ES6导入和导出模块的能力。