Not able to type in text in TEXTAREA

Question

I can't seem to be able to type in any text in the TEXTAREA box, i tried manually creating an input box, but still it doesnt work. I have been trying to figure out where is the problem and I tried googling for the whole day. Thank you for your help!! Please tell me where I go wrong

var myGamePiece;
var myObstacle;
var myObstacle2;
var myObstacle3;
var myObstacle4;
var myNPC1;
var status = 0;
var modal = document.getElementById('id01');

function startGame() {
  myGamePiece = new component(30, 30, "red", 0, 500);
  myObstacle = new component(60, 30, "green", 0, 450);
  myObstacle2 = new component(30, 60, "green", 120, 540);
  myObstacle3 = new component(30, 60, "green", 120, 420);
  myObstacle4 = new component(60, 30, "green", 105, 380);
  myObstacle5 = new component(30, 30, "green", 60, 380);
  myNPC1 = new component(30, 30, "black", 0, 300);
  yellowBox = new component(30, 30, "yellow", 0, 200);
  myGameArea.start();
}

var myGameArea = {
  canvas: document.createElement("canvas"),
  start: function() {
    this.canvas.width = 960;
    this.canvas.height = 540;
    this.context = this.canvas.getContext("2d");
    document.body.insertBefore(this.canvas, document.body.childNodes[0]);
    this.frameNo = 0;
    this.interval = setInterval(updateGameArea, 20);
    window.addEventListener('keydown', function(e) {
      e.preventDefault();
      myGameArea.keys = (myGameArea.keys || []);
      myGameArea.keys[e.keyCode] = (e.type == "keydown");
    })
    window.addEventListener('keyup', function(e) {
      myGameArea.keys[e.keyCode] = (e.type == "keydown");
    })
  },
  stop: function() {
    clearInterval(this.interval);
  },
  clear: function() {
    this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
  }
}

function component(width, height, color, x, y, type) {
  this.type = type;
  this.width = width;
  this.height = height;
  this.speed = 0;
  this.angle = 0;
  this.moveAngle = 0;
  this.x = x;
  this.y = y;
  let shouldHandleKeyDown = true;
  this.update = function() {
    if (this.x < 30) {
      this.x = 30;
    }
    if (this.y < 30) {
      this.y = 30;
    }
    if (this.x + this.width > myGameArea.canvas.width) {
      this.x = myGameArea.canvas.width - this.width;
    }
    if (this.y + this.height > myGameArea.canvas.height) {
      this.y = myGameArea.canvas.height - this.height;
    }
    ctx = myGameArea.context;
    ctx.save();
    ctx.translate(this.x, this.y);
    ctx.rotate(this.angle);
    ctx.fillStyle = color;
    ctx.fillRect(this.width / -2, this.height / -2, this.width, this.height);
    ctx.restore();
  }
  this.newPos = function() {
    this.angle += (this.moveAngle * 3) * Math.PI / 180;
    this.x += (this.speed * 3) * Math.sin(this.angle);
    this.y -= (this.speed * 3) * Math.cos(this.angle);
  }
  this.collison = function(obj) {
    let rect1 = this;
    if (rect1.x + rect1.width < obj.x || rect1.x > obj.x + obj.width || rect1.y + rect1.height < obj.y || rect1.y > obj.y + obj.height) {
      return;
    }
    let playerTop_ObjBottom = Math.abs(rect1.y - (obj.y + obj.height));
    let playerRight_ObjLeft = Math.abs((rect1.x + rect1.width) - obj.x);
    let playerLeft_ObjRight = Math.abs(rect1.x - (obj.x + obj.width));
    let playerBottom_ObjTop = Math.abs((rect1.y + rect1.height) - obj.y);
    if ((rect1.y <= obj.y + obj.height && rect1.y + rect1.height > obj.y + obj.height) && (playerTop_ObjBottom < playerRight_ObjLeft && playerTop_ObjBottom < playerLeft_ObjRight)) {
      rect1.y = obj.y + obj.height;
      rect1.vy = 0;
    }
    if ((rect1.y + rect1.height >= obj.y && rect1.y < obj.y) && (playerBottom_ObjTop < playerRight_ObjLeft && playerBottom_ObjTop < playerLeft_ObjRight)) {
      rect1.y = obj.y - rect1.height;
      rect1.vy = 0;
    }
    if ((rect1.x + rect1.width >= obj.x && rect1.x < obj.x) && (playerRight_ObjLeft < playerTop_ObjBottom && playerRight_ObjLeft < playerBottom_ObjTop)) {
      rect1.x = obj.x - rect1.width;
      rect1.vx = 0;
    }
    if ((rect1.x <= obj.x + obj.width && rect1.x + rect1.width > obj.x + obj.width) && (playerLeft_ObjRight < playerTop_ObjBottom && playerLeft_ObjRight < playerBottom_ObjTop)) {
      rect1.x = obj.x + obj.width;
      rect1.vx = 0;
    }
  }
  this.chat = function(NPC) {
    let player = this;
    if (NPC == myNPC1) {
      document.addEventListener('keydown', function(e) {
        if (e.keyCode == 32 && status == 0) {
          if (player.x + player.width < NPC.x || player.x > NPC.x + NPC.width || player.y + player.height < NPC.y || player.y > NPC.y + NPC.height) {
            return;
          }
          if (!shouldHandleKeyDown) {
            return;
          }
          shouldHandleKeyDown = false;
          console.log("Chatted with NPC");
          var x = document.createElement("TEXTAREA");
          var t = document.createTextNode("At w3schools.com you will learn how to make a website.");
          x.appendChild(t);
          document.body.appendChild(x);
          //document.getElementById("QuestBox").innerHTML = "";
          //TODO create a new box for user to enter code
          //document.getElementById('id01').style.display='block';
          //let inputfield = document.getElementById('userinput');
          //inputfield.focus();


          //TODO button to submit, reset code
          //TODO run the code
          //TODO if wrong, prompt the user to do it again
          //TODO if correct, set status = 1;
          //status = 1;
        }
      });
      document.addEventListener('keyup', function() {
        shouldHandleKeyDown = true;
      });
    }
  }
}

function updateGameArea() {
  myGameArea.clear();
  myGamePiece.moveAngle = 0;
  myGamePiece.speed = 0;
  if (document.activeElement.nodeName == 'TEXTAREA') {
    myGameArea.stop();
    console.log("inside input");
  } else {
//    console.log("1");
    if (myGameArea.keys && myGameArea.keys[65]) {
//      console.log("2");
      myGamePiece.moveAngle = -1;
    }
    if (myGameArea.keys && myGameArea.keys[68]) {
      myGamePiece.moveAngle = 1;
    }
    if (myGameArea.keys && myGameArea.keys[87]) {
      myGamePiece.speed = 1;
    }
    if (myGameArea.keys && myGameArea.keys[83]) {
      myGamePiece.speed = -1;
    }
    if (myGameArea.keys && myGameArea.keys[32]) {
      myGamePiece.chat(myNPC1);
    }
  }


  myGamePiece.newPos();
  myGamePiece.update();

  myNPC1.update();
  myObstacle.update();
  myObstacle2.update();
  myObstacle3.update();
  myObstacle4.update();
  myObstacle5.update();
  yellowBox.update();

  myGamePiece.collison(myNPC1);
  myGamePiece.collison(myObstacle);
  myGamePiece.collison(myObstacle2);
  myGamePiece.collison(myObstacle3);
  myGamePiece.collison(myObstacle4);
  myGamePiece.collison(myObstacle5);
  myGamePiece.collison(yellowBox);
}

Not able to type in text in TEXTAREA

Answers (1)

Related Questions