Hi there, I want to give a game on my web site for children through java script.My game is user have 5 types of fruits and have 5 boxes for 5 types of Season.when user drag the one fruit and drop it on any box and if that fruit match with that season.It will shows a "Congratulation message" and if it is not match with the season it will give a message "Try again".Can any one give me the code for that or give me the some links so that i can find the require code. Thanks in Advance Bikash
Rob Hunter
Ranch Hand
Joined: Apr 09, 2002
Posts: 788
posted
0
Do you want to actually drag the "fruit" image across to the actual "box"? OR do you simply want to select a fruit image and then one of the box images?
Bikash Paul
Ranch Hand
Joined: Dec 04, 2001
Posts: 342
posted
0
Hi Rob, First of all thanks for ur reply.I want to drag the fruit image and drop it on the box(Season box).Plz help me. Regards Bikash
Hi Charlie, Thanks for ur guide.I tried with my below codes but now iam facing problem if fruit does not match with the season box it should go it's original position when cursor is remove from this fruit and if it match it should remain in box.And i also want to give the scoring if matching of fruit and season correct user will get 1 point and in this way scroing will increase by 1 at every correct matching and when user click on score button user should see his/her score.can u plz tell me what will code for that.Plz help me.Below r my codes:- ------------------------------------------------ <html> <head> <title>Drag and Drop</title> <script language="JavaScript"> var x=y=o=null; if (document.layers) { window.captureEvents(Event.MOUSEDOWN | Event.MOUSEMOVE | Event.MOUSEUP); window.onmousedown=down, window.onmouseup=up, window.onmousemove=move; } else if (document.all) document.onmousedown=down, document.onmouseup=up, document.onmousemove=move; function down(e) { if (document.all && window.event.srcElement.parentElement) o=window.event.srcElement.parentElement, x=window.event.offsetX, y=window.event.offsetY; else { if (document.layers) { if (document.layers['o'+e.target.name]) { o=document.layers['o'+e.target.name], x=e.layerX, y=e.layerY; } else return true; } } return false; } function move(e) { if (document.all && o) o.style.posLeft=window.event.clientX-x, o.style.posTop=window.event.clientY-y; else if (document.layers && o) o.left=e.pageX-x, o.top=e.pageY-y; return false; } function up() { o=null; } //--></script> </head> <body> <span id="o0" style="position:absolute; left:50; top:50; width:50;"> <img src="Apple.jpg" name="0" width="50" height="50" alt="An image in a span"> </span> <div id="o1" style="position:absolute; left:200; top:50; width:75;"> <img src="banana.jpg" name="1" width="75" height="75" alt="An image in a div"> </div> <div id="o2" style="position:absolute; left:350; top:50; width:55;"> <img src="grapes.jpg" name="2" width="100" height="100" alt="An image in a div"> </div> <img src="Summer.gif" style="position:absolute;left:50; top:350;"> <img src="winter.gif" style="position:absolute;left:200; top:350;"> <img src="rainy.gif" style="position:absolute;left:350; top:350;"> </body> </html> ----------------------------------------------- Regards Bikash [ August 26, 2002: Message edited by: Bikash Paul ]
Charlie Sturman
Ranch Hand
Joined: Apr 04, 2002
Posts: 112
posted
0
I went ahead and did some stuff on of my own.Trying to learn how to move stuff around in the browser is interesting. I matched a fruit container to a movable fruit object.Sorry this is not what you wanted. The containers could be changed to seasons. Also a different window initialization for a season size window would be needed.Of course images could be put into the containers. Html dragNdrop: http://www21.brinkster.com/sturman/javaranch/dragNdrop.html [ August 27, 2002: Message edited by: Charlie Sturman ]
Bikash Paul
Ranch Hand
Joined: Dec 04, 2001
Posts: 342
posted
0
Hi charlie, It is close to what i want to do only thing is if fruit does not match with season box fruit should return its original position from where user drag it on the removal of mouse from it and show a alert message box "Try Again".And in case of matching it should show a alert message "Congratulation".Any way lot of thanks for ur help.My problem is now how I can return back the fruit it's original position in the case mismatch.Plz guide me. Regards Bikash
Bikash Paul
Ranch Hand
Joined: Dec 04, 2001
Posts: 342
posted
0
Hi Charlie, Your given example not working on my local machine when I tried to click on ur moving image for draging,it is giving me Runtime Error "Error: Object Expected"[ onmousedown="beginDrag(this, window.event)"].But it running fine on internet.I also tried it with IIS it is giving me same above mentioned error.I tried to find it out but could not.Can u tell me why it is? Regards Bikash
Charlie Sturman
Ranch Hand
Joined: Apr 04, 2002
Posts: 112
posted
0
Bikash, Local execution was not finding PortableDrag.js. I put PortableDrag.js file in the DragNDrop.html file. It will run locally with the .js file included in the html file.When you download the file view the src and check for the PortableDrag code in the html file http://www21.brinkster.com/sturman/javaranch/dragNdrop.html I will add a snap back to original positon when the answer is wrong and a Congratulation msg when correct. Cheers, Charlie [ August 27, 2002: Message edited by: Charlie Sturman ]
Hi Charlie, Lots of thanks for yours lots of help.One more help plz and this is my last request which i need from u in the case of mismatch it should show a message "Try Again" and it should deduct 10 points from score.And at the end of the game one "New Game" button should come for starting new game.So that user can start same game again by clicking on that button. Do You try it on Netscape browser I tried it on Netscape browser it is giving me Error ["document.getElementById is not a function"].I couldn't understand why it is giving this error. Thanks Bikash
Charlie Sturman
Ranch Hand
Joined: Apr 04, 2002
Posts: 112
posted
0
Hi Bikash, You are Welcome...good fun for me! The code works but I will be doing some re-organizing. Added: -a message "Try Again" and it should deduct 10 points -"New Game" button should come for starting new game -some moving around stuff Question o You try it on Netscape browser? Nope "only" compatable with ie and w3c/dom. http://www21.brinkster.com/sturman/javaranch/dragNdrop.html Charlie ps If you have any other small projects like this e-mail me
Bikash Paul
Ranch Hand
Joined: Dec 04, 2001
Posts: 342
posted
0
Hi Charlie, Thanks for ur another help.But when i start New game "target fruit windows" don't refresh means till it showing "Yummy!" message on the top of the every target fruit windows and also showing the fruit name in the middle of the every target fruit windows in Uppercase.It should Refresh the "target fruit windows" when I start New Game.But I can do it now by clicking on "Refresh" button of Browser window. Can u plz give this action in "New Game" button.Another thing is I want "Try Again" message should come just like "Congratulation" message not on the "moving fruit windows".Can You plz do that. Thanks Bikash [ August 28, 2002: Message edited by: Bikash Paul ]
Charlie Sturman
Ranch Hand
Joined: Apr 04, 2002
Posts: 112
posted
0
Good eyes Fixes: - New game "target fruit windows" don't refresh means till it showing "Yummy!" fixed - showing the fruit name in the middle of the every target fruit windows in Uppercase. fixed Change: -"Try Again" message should come just like "Congratulation" message added Good Idea! Cheers, Charlie http://www21.brinkster.com/sturman/javaranch/dragNdrop.html
Bikash Paul
Ranch Hand
Joined: Dec 04, 2001
Posts: 342
posted
0
Hi Charlie, You are really genious and so helpful.Lots of thanks for ur lots of help.If I will plan to do this type small project in future I will definitly contact you. Again Lots of thanks Bikash
Charlie Sturman
Ranch Hand
Joined: Apr 04, 2002
Posts: 112
posted
0
Bikash, Thanks,you are Welcome Charlie
Bikash Paul
Ranch Hand
Joined: Dec 04, 2001
Posts: 342
posted
0
Hi charlie, How r u.Is there any way so that Netscape also supports that game which u developed.Can You plz try for that. Regards Bikash
0
o You try it on Netscape browser?
