Question

myjs.js：61 Uncaught TypeError：datRed.newPos不是一个函数在updateGameArea（myjs.js：61）

为什么会出现错误？它阻止了我制作HTML游戏。 datRed.newPos();行似乎是导致这种情况的原因，如果我将其注释掉，游戏将没有任何错误，但datRed组件将无法移动

我尝试调试。我想不出什么了。检查代码是否存在拼写错误。没事

这是我的js文件

var datRed;
var daBlueCheese;


function startGame() {
    // component creations
    datRed = new component(30, 30, "red", 10, 250 - 15);
    daBlueCheese = new component(120, 40, "blue", 10, 375 - 15);
    myGameArea.start();

}
// the game area
var myGameArea = {
    canvas: document.createElement("canvas"),
    start: function() {
        this.canvas.width = 680;
        this.canvas.height = 500;
        this.context = this.canvas.getContext("2d");
        document.body.insertBefore(this.canvas, document.body.childNodes[0]);
        this.interval = setInterval(updateGameArea, 20);
    },
    clear: function() {
        this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
    }
}

// componenet constructor
function component(width, height, color, x, y) {
    this.width = width;
    this.height = height;
    this.speedX = 0;
    this.speedY = 0;
    this.x = x;
    this.y = y;
    this.update = function() {
        ctx = myGameArea.context;
        ctx.fillStyle = color;
        ctx.fillRect(this.x, this.y, this.width, this.height);
    }
}


// the function that is called to
//change the movement properties for components
function newPos() {
    this.x += this.speedX;
    this.y += this.speedY;
};





// where the game area gets updated
function updateGameArea() {


    myGameArea.clear();


    datRed.newPos();
    datRed.update();

    daBlueCheese.newPos();
    daBlueCheese.update();
}


// movement for the componenets for each direction
function moveup() {
    datRed.speedY -= 1;
    daBlueCheese.speedY -= 1;
}

function movedown() {
    datRed.speedY += 1;
    daBlueCheese.speedY += 1;
}

function moveleft() {
    datRed.speedX -= 1;
    daBlueCheese.speedX -= 1;
}

function moveright() {
    datRed.speedX += 1;
    daBlueCheese.speedX += 1;
}

这是我的html文件

<!doctype html>

<html lang="en">

<head>
    <meta charset="utf-8">

    <title>Ahmed's game</title>
    <meta name="description" content="Game, HTML game, JS game">
    <meta name="author" content="Ahmed">
    <meta name="viewport" content="width=device-width, inital-scale= 1.0">



    <link rel="stylesheet" href="mycss.css">
    <script src="myjs.js"></script>



</head>

<body onload="startGame()">



    <button onclick="moveup()">UP</button>
    <button onclick="movedown()">DOWN</button>
    <button onclick="moveleft()">LEFT</button>
    <button onclick="moveright()">RIGHT</button>






</body>

</html>

这是我的css文件

canvas {
    border: 3px solid red;
    background-color: #f1f1f1;
}

我希望能够正确使用newPos函数

Answer 1

datRed初始化为：

datRed = new component(30, 30, "red", 10, 250 - 15);

component中没有引用newPos，因此datRed和newPost之间没有任何联系。

newPost只是您可以直接调用的函数，如：

newPos();

但是，如果您这样做了，它就不会做您想要的事情，因为该函数内的this可能没有引用您想要的内容。

要纠正此问题，您需要像这样使newPos成为datRed的成员：

datRed.newPos = function(){
  this.x += this.speedX;
  this.y += this.speedY;
}

然后，由于datRed是从new component()返回的实例，因此this将引用该实例。

Answer 2

您正在全局声明newPos，但试图像访问它的组件一样访问它。

不是在全局声明newPos，而是在您的component()构造函数中定义它：

function component(text) {
    this.example =  text;
    
    this.newPos = function() {
      console.log("newPos called on " + this.example);
    }
};

var datRed = new component("datRed");
datRed.newPos();

var daBlueCheese = new component("daBlueCheese");
daBlueCheese.newPos();

我添加了其他几行内容，以使其成为一个简短但可验证的演示。

为什么我收到类型错误：“ function_name”不是位于的函数

2 个答案: