im pretty new to javascript and im creating a program that allows the user to move images between 6 squares, only 1 image can be in a square at a time, and i need to count how many moves they have made<br> <br> my problem is that i cannot find a way trap the images in a square and center them within this square, i think this will make the number of moves easier to count, any help please!!!! <br>
<br> ps sorry if this posts as a mess but not 100% sure how to format the text with html, not great at that, sorry folks <br> <br> <code> import java.applet.*;<br> import java.awt.*;<br> import java.awt.event.*;<br> import java.awt.image.*;<br> <br>
public class program extends Applet implements<br> MouseListener, MouseMotionListener {<br> private Point counter1, counter2, counter3, counter4, counter5, mouse;<br> private int select;<br> private Image cabinet, bookcase, wardrobe, piano, chest;<br> <br> public void init() {<br> this.addMouseMotionListener (this);<br> this.addMouseListener (this);<br> select = 0;<br> cabinet = getImage (getDocumentBase(), "cabinet.jpg") ;<br> bookcase = getImage (getDocumentBase(), "bookcase.jpg");<br> wardrobe = getImage (getDocumentBase(), "wardrobe.jpg");<br> piano = getImage (getDocumentBase(), "piano.jpg") ;<br> chest = getImage (getDocumentBase(), "chest.jpg");<br> counter1 = new Point(17, 24);<br> counter2 = new Point(155, 130);<br> counter3 = new Point(85, 130);<br> counter4 = new Point(155, 24);<br> counter5 = new Point(17, 130);<br> mouse = new Point();<br> }<br> <br> public void paint (Graphics g) {<br> drawBox (g);<br> g.drawImage (cabinet, counter1.x, counter1.y, 60, 60, this); <br> g.drawImage (bookcase, counter2.x, counter2.y, 60, 60, this);<br> g.drawImage (wardrobe, counter3.x, counter3.y, 60, 60, this);<br> g.drawImage (piano, counter4.x, counter4.y, 60, 60, this);<br> g.drawImage (chest, counter5.x, counter5.y, 60, 60, this);<br> g.drawString ("1", 42, 113); g.drawString ("2", 113, 113);<br> g.drawString ("3", 180, 113);<br> g.drawString ("4", 42, 216);<br> g.drawString ("5", 113, 216);<br> g.drawString ("6", 180, 216); <br> }<br> <br> public void mouseDragged (MouseEvent e) {<br> mouse = e.getPoint();<br> //continuously change the coordinates of the selected counter<br> if (select ==1) counter1 = mouse;<br> if (select ==2) counter2 = mouse;<br> if (select ==3) counter3 = mouse;<br> if (select ==4) counter4 = mouse;<br> if (select ==5) counter5 = mouse;<br> repaint();<br> }<br> <br> public void mouseMoved (MouseEvent e) {} //required for the interface<br> public void mousePressed (MouseEvent e) { //select a counter using the mouse<br> mouse = e.getPoint();<br> if (mouse.x > counter1.x - 60 && mouse.x < counter1.x +60 && mouse.y > counter1.y - 60 && mouse.y < counter1.y +60) select = 1;<br> if (mouse.x > counter2.x - 60 && mouse.x < counter2.x +60 && mouse.y >counter2.y - 60 && mouse.y < counter2.y +60) select = 2;<br> if (mouse.x > counter3.x - 60 && mouse.x < counter3.x +60 && mouse.y >counter3.y - 60 && mouse.y < counter3.y +60) select = 3;<br> if (mouse.x > counter4.x - 60 && mouse.x < counter4.x +60 && mouse.y >counter4.y - 60 && mouse.y < counter4.y +60) select = 4;<br> if (mouse.x > counter5.x - 60 && mouse.x < counter5.x +60 && mouse.y >counter5.y - 60 && mouse.y < counter5.y +60) select = 5;<br> }//required for the interface<br> <br> public void mouseClicked (MouseEvent e){}<br> public void mouseReleased (MouseEvent e) {}<br> public void mouseEntered (MouseEvent e) {}<br> public void mouseExited (MouseEvent e){}<br> public void drawBox (Graphics g) {<br> for (int i = 10; i <= 220; i += 105) {<br> g.drawLine (10, i, 220, i);<br> }<br> <br> for (int l = 10; l <= 220; l += 70) {<br> g.drawLine (l, 10, l, 220);<br>}<br> }<br> } </code>