javascript - 为什么我的代码告诉我 .draw 不是函数？

Question

我创建了这个游戏，玩家控制一个篮子来捕捉随机水果。

我的代码告诉我 .draw 最初不是一个函数。 (正在绘制数组中的第一个水果)，我在为水果创建一个类后创建了一个绘制函数。所以我不太确定我必须做什么来解决这个问题。

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

var basket = new Image();
basket.src = "basket.png";

var basketHeight = 50;
var basketWidth = 100;
var basketX = 200;
var basketY = canvas.height-50;
var basketSpeed = 5; //vary with superpowers

var rightPressed = false;
var leftPressed = false;

var score = 10;

var strawberry = new Image();
strawberry.src = "strawberry.png";

var banana = new Image();
banana.src = "banana.png";

var orange = new Image();
orange.src = "orange.png";


class Fruit{

  constructor(fruitX, fruitY, fruitType){
    this.fruitX = fruitX;//each fruit has a x
    this.fruitY = fruitY;//each fruit has a y
    this.fruitWidth = 100;//each fruit has a width of 100
    this.fruitHeight = 50;//each fruit has a height of 50
    this.isVisible = true;//fruit is visible
    this.fruitSpeed = 1;//fruit moves by 1 
    this.fruitType = fruitType;//fruit type
    this.fruitImage = new Image();//fruit image


    if(fruitType == strawberry){//if the fruittype (comparing it with funciton randomfruit) is a strawberry, then make the image a strawberry
        fruitImage= 'Images/strawberry.png';
    }
    else if(fruitType == banana){
      fruitImage = 'Images/banana.png';
    }
    else if(fruitType == orange){
      fruitImage = 'Images/orange.png';
    }
  }

  draw(){
     ctx.drawImage(this.fruitImage, this.fruitX, this.fruitY, this.fruitWidth, this.fruitHeight);
  }
}

function randomFruit(){//function is to generate a random fruit

  var fruitchoices = ['strawberry', 'banana', 'orange'];
  //array has strawberry, banana, orange
  var fruit = fruitchoices[Math.floor(Math.random() * fruitchoices.length)]// choose random element from above

  var fruitX = Math.random() * (480-0);//declaring the variables so that we don't have to copy and paste this each time into the fruitX value since it will be the same for every fruit initally
  var fruitY = 0//set the y value of the fruit to 0
//compares the selected fruit with these statements
  if(fruit == 'strawberry'){
     new Fruit(fruitX,fruitY, 'strawberry');//if fruit is strawberry, make the fruit a strawberry 
  }
  else if(fruit == 'banana'){
    new Fruit(fruitX, fruitY, 'banana');
  }
  else if(fruit == 'orange'){
    new Fruit(fruitX, fruitY, 'orange');
  }    
  return fruit;//returns fruit value 
  }



//function for the fruits to move down the screen
function moveFruit(){ 
  fruits[i].Y += fruits[i].fruitSpeed;//the y value of the fruits in the array will be added by the fruit speed
}



document.addEventListener("keydown", keyDownHandler, false);  // arguments "keydown" is the event
document.addEventListener("keyup", keyUpHandler, false);    //  keyDownHandler is the function that gets called



                                // when the event occurs
function keyDownHandler(e){
    if(e.key == "Right" || e.key == "ArrowRight") {
        rightPressed = true;
    }
    else if(e.key == "Left" || e.key == "ArrowLeft") {
        leftPressed = true;
    }
}

function keyUpHandler(e){
  if(e.key == "Right" || e.key == "ArrowRight") {
        rightPressed = false;
    }
    else if(e.key == "Left" || e.key == "ArrowLeft") {
        leftPressed = false;
    }
}



function drawScore() {
   ctx.font = "16px Arial";
    ctx.fillStyle = "#0095DD";
    ctx.fillText("Score:" + score, canvas.width - 100, 20);
}



//drawing the game onto the screen
function drawGame() {
  ctx.clearRect(0, 0, canvas.width, canvas.height); // clears top left to bottom right
  drawScore();

  //update basket position/controlling basket movement
  if(rightPressed) {
    basketX += basketSpeed;

    if(basketX + basketWidth > canvas.width){
      basketX = canvas.width - basketWidth;
    }

  }

  else if (leftPressed) {
    basketX -= basketSpeed;

    if(basketX < 0){
      basketX = 0;
    }
  }


  // loop thru each fruit
  for(var i = 0; i < fruits.length; i++){
    // check each fruit y value. if it is less than ?? draw new random fruit
  }


  moveFruit();

}


var first = randomFruit(); //variable first is set to a randomfruit from the function randomfruit
first.draw();//drawing the first fruit
fruits.add(first);//adding the first fruit to array so that we can keep track of it for the purpose of creating our second fruit image since we want a new fruit when the first fruit passes a certain y value

var interval = setInterval(drawGame, 10);//drawing whatever is in the function drawGame every 10 milliseconds 

first.draw 不工作

var first = randomFruit(); //variable first is set to a randomfruit from the function randomfruit
first.draw();//drawing the first fruit
fruits.add(first);//adding the first fruit to array so that we can keep track of it for the purpose of creating our second fruit image since we want a new fruit when the first fruit passes a certain y value

Answer 1

在您的randomFruit函数中

function randomFruit(){//function is to generate a random fruit

  var fruitchoices = ['strawberry', 'banana', 'orange'];
  //array has strawberry, banana, orange
  var fruit = fruitchoices[Math.floor(Math.random() * fruitchoices.length)]// choose random element from above

  var fruitX = Math.random() * (480-0);//declaring the variables so that we don't have to copy and paste this each time into the fruitX value since it will be the same for every fruit initally
  var fruitY = 0//set the y value of the fruit to 0
//compares the selected fruit with these statements
  if(fruit == 'strawberry'){
     new Fruit(fruitX,fruitY, 'strawberry');//if fruit is strawberry, make the fruit a strawberry 
  }
  else if(fruit == 'banana'){
    new Fruit(fruitX, fruitY, 'banana');
  }
  else if(fruit == 'orange'){
    new Fruit(fruitX, fruitY, 'orange');
  }    
  return fruit;//returns fruit value 
}

您实例化了 Fruit 对象，但返回了水果字符串(如“orange”)而不是实例化的对象。因此

var first = randomFruit();
first.draw();

first 是一个字符串，String.draw 不是一个函数。

试试这个:

function randomFruit(){//function is to generate a random fruit

  var fruitchoices = ['strawberry', 'banana', 'orange'];
  //array has strawberry, banana, orange
  var fruit = fruitchoices[Math.floor(Math.random() * fruitchoices.length)]// choose random element from above

  var fruitX = Math.random() * (480-0);//declaring the variables so that we don't have to copy and paste this each time into the fruitX value since it will be the same for every fruit initally
  var fruitY = 0//set the y value of the fruit to 0
//compares the selected fruit with these statements
  if(fruit == 'strawberry'){
     return new Fruit(fruitX,fruitY, 'strawberry');//if fruit is strawberry, make the fruit a strawberry 
  }
  else if(fruit == 'banana'){
    return new Fruit(fruitX, fruitY, 'banana');
  }
  else if(fruit == 'orange'){
    return new Fruit(fruitX, fruitY, 'orange');
  }    
  throw new Error('unexpected fruit');
}