This week's book giveaways are in the Java EE and JavaScript forums.
We're giving away four copies each of The Java EE 7 Tutorial Volume 1 or Volume 2(winners choice) and jQuery UI in Action and have the authors on-line!
See this thread and this one for details.
The moose likes HTML, CSS and JavaScript and the fly likes Game Script?? Big Moose Saloon
  Search | Java FAQ | Recent Topics | Flagged Topics | Hot Topics | Zero Replies
Register / Login


Win a copy of The Java EE 7 Tutorial Volume 1 or Volume 2 this week in the Java EE forum
or jQuery UI in Action in the JavaScript forum!
JavaRanch » Java Forums » Engineering » HTML, CSS and JavaScript
Bookmark "Game Script??" Watch "Game Script??" New topic
Author

Game Script??

Bikash Paul
Ranch Hand

Joined: Dec 04, 2001
Posts: 342
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: 818
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
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
Charlie Sturman
Ranch Hand

Joined: Apr 04, 2002
Posts: 112
It is relatively ez to do simple D&D in Dhtml.Dynamic HTML the definitive guide has an execellent example that is browser neutral.
book:
http://safari.oreilly.com/main.asp?bookname=dhtmlref
exact ref:
http://safari.oreilly.com/main.asp?bookname=dhtmlref&snode=64
New edition avail in sept:
http://www.oreilly.com/catalog/dhtmlref2/
You might consider a simpler user interface for kids.A highlight source then click on destination.
An example I am working on is placing letters on a board.You click on the letter in the top left field then click where on the board you want to put the letter...this is just a prototype:
http://www21.brinkster.com/sturman/scrabble/scrabble.html
Bikash Paul
Ranch Hand

Joined: Dec 04, 2001
Posts: 342
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
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
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
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
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 ]
Charlie Sturman
Ranch Hand

Joined: Apr 04, 2002
Posts: 112
Added the snap back when wrong and congratulation msg when right.
http://www21.brinkster.com/sturman/javaranch/dragNdrop.html
Cheers,
Charlie
Bikash Paul
Ranch Hand

Joined: Dec 04, 2001
Posts: 342
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
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
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
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
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
Bikash,
Thanks,you are Welcome
Charlie
Bikash Paul
Ranch Hand

Joined: Dec 04, 2001
Posts: 342
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
 
With a little knowledge, a cast iron skillet is non-stick and lasts a lifetime.
 
subject: Game Script??