Lesson 28 Create your own game

Link to the project or level: Game Lab - Code.org

What I expect to happen: This student wants to move the pawn across the board and once moves across the board, he has the option of making the new piece a queen. When he changes the pawn to a queen. He wants the queen to become draggagle, however it is not working.
What actually happens: The new queen is not draggable.
What I’ve tried: I’m at a loss on how to help him.

Greetings @troy,

The reason why you have this issue actually starts from the root of the dragging function.
There are many problems like how multiple sprites can get dragged in and if you drag too fast, it stops dragging.

Let’s start with the issue of the sprites being able to get dragged together. All you have to do is get the individual property (.dragging) of the sprite and make it so when it’s true, it drags only one sprite.

function handleDragging(sprite) {
  // Check if mouse is pressed over this specific sprite
  if (mouseIsOver(sprite) && mouseDown("leftButton")) { //if the mouse is pressed on the sprite, make the dragging true
    // Move the sprite to the mouse position
    sprite.dragging = true;
  }
  if (sprite.dragging == true) {sprite.x = World.mouseX;sprite.y = World.mouseY;} // if the sprite is being dragged, make it equal to the mouse coordinates
  if (mouseWentUp("leftButton")) { //if the mouse is up, sprite is no longer being dragged
    sprite.dragging = false;
  }
}

Now let’s tackle the second issue: dragging the mouse too fast can make the sprite stop dragging completely. All you have to do is set up a variable to detect if the mouse is being held down on a sprite or not.

var mouseDragging = false;
function handleDragging(sprite) {
  // Check if mouse is pressed over this specific sprite
  if (mouseIsOver(sprite) && mouseDown("leftButton") && mouseDragging === false) { //the mousedragging === false makes it so you can only drag on a sprite if the mouse isnt dragging anything yet
    // Move the sprite to the mouse position
    sprite.dragging = true;
    mouseDragging = true;
  }
  if (sprite.dragging == true) {sprite.x = World.mouseX;sprite.y = World.mouseY;}
  if (mouseWentUp("leftButton")) {
    sprite.dragging = false;
    mouseDragging = false;
  }
}

For the issue of your queen piece not moving after it’s because the handle dragging function for it is only being done once every time the players click the new queen; aka it’s not being looped. We would obviously move it out of the if statement to the draw loop, however it’d be out of scope.
My fix is that we instead declare the newQueen var outside of the draw loop and not when the words queen are pressed. We should instead assign the newQueen variable when the words queen are pressed.

var newQueen;
function draw() {

}

Then in the “at” function, simply just assign the newQueen var to a sprite var.

if(mousePressedOver(Queen)) {
      newQueen = createSprite(sprite.x, sprite.y);
      newQueen.setAnimation("Queenw");
      newQueen.scale = 0.12;
      sprite.x = 600;
      Rook.x = 700;
      Knight.x = 500;
      Queen.x = 700;
      Bishop.x = 500;
      white.x = 600;
}

Now we need to make it actually draggable, so we make it so if the newQueen var has a value (the sprite), make it draggable. Put this in the draw function with your other handleDragging().

function draw () {
...
if (newQueen) {handleDragging(newQueen);}
}

I’m sorry if I did a bad a time explaining this due to it’s various problems, however I have an example here you can use to reference: Game Lab - Code.org

Thank you! THank you! You’ve helped my student out tremendously. His level is way beyond mine!

1 Like