Jump to content

Drag Drop in Javascript


JimTEFL
 Share

Recommended Posts

Thanks to W3Schools I have been able to create a small board game called "Papillon" very loosely based on the film of the same name. The purpose of the game is for green to reach the top of the board and for the reds to prevent this. Green should try to force the reds to bend or break their line and the reds should try to keep a straight horizontal line across the board.

 

It needs four refinements:

 

1) a counter modulus to regulate the order of the moves between green and red:- green/red/green......

I have tried to insert this into the drag/drop functions but with no success.

 

2) a random device to position the green on any one of squares 29, 30, 31 or 32 at the start of the game.

I tried to juggle the div id = dr5 into one of these but again without success.

 

3) control of the extent of moves by green (green can move x and y + or - one square width) and red (red can

only move x + or - one square width and y + one square width)

I tried to set up variables to identify the start location of any piece to compare it with the target location. No

matter how I tried I simply could not identify any start location of any piece. The target location is easy to

identify.

 

4) Preventing a move onto a square already occupied.

I confess not having tried very hard with this point.

 

I have constructed simple card and board games in VB6. Perhaps it is Vb6 thinking that prevents me from

solving these JavaScript problems.

 

I look forward to any effective help, please.

 

 

 

butterfly.html

Link to comment
Share on other sites

If your counter has only 2 states then you can use a boolean variable. e.g.:

 

 

var red_turn = true; ... if (red_turn) { ...}else { ,,,} red_turn = !red_turn;

 

If it has more than 2 states then just use an incremented numeric counter, and use modulus with the number of states to figure out which state you're on now.

 

 

 

a random device to position the green on any one of squares 29, 30, 31 or 32 at the start of the game.

You can use Math.random to generate a random number and go from there:

 

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random

 

 

 

control of the extent of moves by green (green can move x and y + or - one square width) and red (red can

only move x + or - one square width and y + one square width)

I tried to set up variables to identify the start location of any piece to compare it with the target location. No

matter how I tried I simply could not identify any start location of any piece. The target location is easy to

identify.

If you can't figure out where the pieces currently are then that sounds like a problem with the design of your game, you'll need to show the relevant code for us to help with that. Every piece needs to have its position tracked, there's no other way to do something like this. Ideally each piece would be represented by a Javascript object, and the object would include properties like the position, color, etc.

 

Preventing a move onto a square already occupied.

I confess not having tried very hard with this point.

Once you're tracking the position of each piece then it shouldn't be difficult to determine if a piece is on a given square. Ideally the squares would also be represented by Javascript objects, and the properties of each square would include the coordinates of the square and the piece (if any) which occupies it.

Is the attached code all you have so far? There isn't much there except a few event handlers for the drag and drop events.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...