javascript - 我无法从类中运行函数

标签 javascript canvas html5-canvas

每次我尝试向正确的方向移动桨时都会收到此错误!!

Uncaught TypeError: paddle.moveRight is not a function at HTMLDocument.InputHandler.document.addEventListener.event

//index.html

<html>
<head>title>Brick Breaker</title
    ><meta charset="UTF-8" />
</head>

<body>  
    <canvas id="gameScreen" width="800" height="600"></canvas>
    <script type="module" src="src/index.js"></script>
</body>

</html>

//index.js

import Paddle from './paddle.js'
import InputHandler from './input.js'
let canvas = document.getElementById("gameScreen");
let ctx = canvas.getContext("2d");

let paddle = new Paddle();
new InputHandler(Paddle)

function gameLoop() {

  ctx.clearRect(0, 0, 800, 600);

  paddle.update();
  paddle.draw(ctx);

  requestAnimationFrame(gameLoop);
}
gameLoop()

//paddle.js

    export default class Paddle {
  constructor(){
    this.width=150;
    this.height=30;

    this.maxSpeed =10;
    this.speed=0;

    this.position={
        x:300,
        y:500 
    }
}
  moveRight() {
    this.speed = this.maxSpeed;
  }

  draw(ctx) {
    ctx.fillStyle = "#0ff";
    ctx.fillRect(this.position.x, this.position.y, this.width, this.height);
  }

  update() {
    this.position.x += this.speed;
  }
}

//input.js

export default class InputHandler {
  constructor(paddle) {

    document.addEventListener("keydown", event => {

        if(event.keyCode ==37)
        paddle.moveRight();
    });
  }
}
<小时/>

当我按下右箭头按钮时,桨应该向右移动

最佳答案

let paddle = new Paddle();
new InputHandler(Paddle)

您正在将 Paddle 类传递到 InputHandler 的构造函数中。然后,您在该类上调用 moveLeft

您可能想传递该类的实例。

let paddle = new Paddle();
new InputHandler(paddle);

关于javascript - 我无法从类中运行函数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55319620/

相关文章:

javascript - 自由手绘,无重叠

javascript - 将 ImageData 对象(不是 Canvas )转换为图像数据 URL

javascript - 将 Canvas 中上传的图像保存到服务器

javascript - 如何将对象附加到现有对象 Angularjs

javascript - 为什么最后一个刻度没有值 - D3.js

javascript - Bootstrap Multiselect 插件和禁用/启用更改事件的复选框

javascript - 如何在不拆分单词的情况下设置 100 个字符限制?

javascript - Canvas drawImage 内联 svg 在 Firefox 上不起作用

java - 没有 awt/swing 类的 Canvas 到 base64 图像

javascript - 让 Canvas 充当按钮