Hey there, came across this old javascript game code <!-- THREE STEPS TO INSTALL MAGIC SQUARES: 1. Paste the coding into the HEAD of your HTML document 2. Put the onLoad event handler in the BODY tag 3. Add the last code into the BODY of your HTML document --> <!-- STEP ONE: Copy this code into the HEAD of your HTML document --> <HEAD> <SCRIPT LANGUAGE="JavaScript"> <!-- Original: Roger Zeitel (rzeitel@mars.superlink.net) --> <!-- Web Site: http://mars.superlink.net/rzeitel/games.html --> <!-- This script and many more are available free online at --> <!-- The JavaScript Source!! http://javascript.internet.com --> <!-- Begin function initArray() { this.length = initArray.arguments.length for (var i = 0; i < this.length; i++) this[i+1] = initArray.arguments[i] } var pos = new initArray(9,9,9,9,9,9,9,9,9); var nummoves= 0; function random() { today = new Date(); num = today.getTime(); num = Math.round(Math.abs(Math.sin (num)*1000000)) % 9; return num; } function display(pos) { for (var i=0; i<9; i++) { document.forms[0].elements[i].value = pos[i]; } document.forms[0].moves.value= nummoves; win(); } function move(num) { if (num < 8 && pos[num+1]==0) { pos[num+1]= pos[num]; pos[num]= 0; nummoves++; } else if (num > 0 && pos[num-1]==0) { pos[num-1]= pos[num]; pos[num]= 0; nummoves++; } else if (num > 2 && pos[num-3]==0) { pos[num-3]= pos[num]; pos[num]= 0; nummoves++; } else if (num < 6 && pos[num+3]==0 ) { pos[num+3]= pos[num]; pos[num]= 0; nummoves++; } display(pos); } function win() { if (pos[0]== 1 & pos[1]== 2 & pos[2]== 3 & pos[3]== 4 & pos[4]== 5 & pos[5]== 6 & pos[6]== 7 & pos[7]== 8 & pos[8]== 0) { if (confirm('You did it! Do you want to restart?')) newgame(); } } function newgame() { var x=1; for (var i=0; i<9; i++) { pos[i]=9; } for (var i=0; i<9;i++) { randomnum=random(); if (randomnum==9) randomnum=8; x=1; for (var j=0; j<9; j++) { if (j==i) continue; if (randomnum==pos[j]) { x=0; break; } } if (x==0) { i--; continue; } pos[i]=randomnum; } nummoves=0; display(pos); } // End --> </SCRIPT> </HEAD> <!-- STEP TWO: Put this onLoad event handler in the BODY tag --> <BODY onLoad="window.newgame()"> <!-- STEP THREE: Add the last coding to the BODY of your HTML document --> <CENTER> <h1 align=center>Magic Squares</h1><p> <FORM> <table border=0 celpadding=0 cellspacing=10> <tr><td> <input type="button" value=" 1 " onClick="window.move(0)"> <input type="button" value=" 2 " onClick="window.move(1)"> <input type="button" value=" 3 " onClick="window.move(2)"><br> <input type="button" value=" 4 " onClick="window.move(3)"> <input type="button" value=" 5 " onClick="window.move(4)"> <input type="button" value=" 6 " onClick="window.move(5)"><br> <input type="button" value=" 7 " onClick="window.move(6)"> <input type="button" value=" 8 " onClick="window.move(7)"> <input type="button" value=" 0 " onClick="window.move(8)"><p> </td></td> <td valign=top> Put the numbers in order so that they read 1-8. <br> The 0 is the 'empty' place. Click on any number <br> next to 0 and they will switch places. </td> </tr> <tr><td align=center> # of moves:<br> <input name="moves" size=7 value="0"> <p> </td> <td align=center><br> <input type="submit" value="New Game" onClick="window.newgame()"> </td> </tr> </table> </FORM> </CENTER> <p><center> <font face="arial, helvetica" size="-2">Free JavaScripts provided<br> by <a href="http://javascriptsource.com">The JavaScript Source</a></font> </center><p> <!-- Script Size: 3.34 KB --> Code (JavaScript): via http://www.javascriptsource.com/games/magic-squares-883471.html Now my question is... s it possible to increase the size of the "boxes and numbers" in this code? Thanks
Just give them classes: https://jsfiddle.net/5Lbrv9eL/2/ <!-- THREE STEPS TO INSTALL MAGIC SQUARES: 1. Paste the coding into the HEAD of your HTML document 2. Put the onLoad event handler in the BODY tag 3. Add the last code into the BODY of your HTML document --> <!-- STEP ONE: Copy this code into the HEAD of your HTML document --> <HEAD> <style> .myButton { display: inline-block; border: 0.1em solid #0000FF; background-color: #0000FF; color: #FFFFFF; font-size: 1.2em; margin: 0 0 0.2em 0; } .myBox { padding: 0.1em; font-size: 1.5em; } </style> <SCRIPT LANGUAGE="JavaScript"> <!-- Original: Roger Zeitel (rzeitel@mars.superlink.net) --> <!-- Web Site: http://mars.superlink.net/rzeitel/games.html --> <!-- This script and many more are available free online at --> <!-- The JavaScript Source!! http://javascript.internet.com --> <!-- Begin function initArray() { this.length = initArray.arguments.length for (var i = 0; i < this.length; i++) this[i+1] = initArray.arguments[i] } var pos = new initArray(9,9,9,9,9,9,9,9,9); var nummoves= 0; function random() { today = new Date(); num = today.getTime(); num = Math.round(Math.abs(Math.sin (num)*1000000)) % 9; return num; } function display(pos) { for (var i=0; i<9; i++) { document.forms[0].elements[i].value = pos[i]; } document.forms[0].moves.value= nummoves; win(); } function move(num) { if (num < 8 && pos[num+1]==0) { pos[num+1]= pos[num]; pos[num]= 0; nummoves++; } else if (num > 0 && pos[num-1]==0) { pos[num-1]= pos[num]; pos[num]= 0; nummoves++; } else if (num > 2 && pos[num-3]==0) { pos[num-3]= pos[num]; pos[num]= 0; nummoves++; } else if (num < 6 && pos[num+3]==0 ) { pos[num+3]= pos[num]; pos[num]= 0; nummoves++; } display(pos); } function win() { if (pos[0]== 1 & pos[1]== 2 & pos[2]== 3 & pos[3]== 4 & pos[4]== 5 & pos[5]== 6 & pos[6]== 7 & pos[7]== 8 & pos[8]== 0) { if (confirm('You did it! Do you want to restart?')) newgame(); } } function newgame() { var x=1; for (var i=0; i<9; i++) { pos[i]=9; } for (var i=0; i<9;i++) { randomnum=random(); if (randomnum==9) randomnum=8; x=1; for (var j=0; j<9; j++) { if (j==i) continue; if (randomnum==pos[j]) { x=0; break; } } if (x==0) { i--; continue; } pos[i]=randomnum; } nummoves=0; display(pos); } // End --> </SCRIPT> </HEAD> <!-- STEP TWO: Put this onLoad event handler in the BODY tag --> <BODY onLoad="window.newgame()"> <!-- STEP THREE: Add the last coding to the BODY of your HTML document --> <CENTER> <h1 align=center>Magic Squares</h1><p> <FORM> <table border=0 celpadding=0 cellspacing=10> <tr><td> <input type="button" value=" 1 " onClick="window.move(0)" class="myButton"> <input type="button" value=" 2 " onClick="window.move(1)" class="myButton"> <input type="button" value=" 3 " onClick="window.move(2)" class="myButton"><br> <input type="button" value=" 4 " onClick="window.move(3)" class="myButton"> <input type="button" value=" 5 " onClick="window.move(4)" class="myButton"> <input type="button" value=" 6 " onClick="window.move(5)" class="myButton"><br> <input type="button" value=" 7 " onClick="window.move(6)" class="myButton"> <input type="button" value=" 8 " onClick="window.move(7)" class="myButton"> <input type="button" value=" 0 " onClick="window.move(8)" class="myButton"><p> </td></td> <td valign=top> Put the numbers in order so that they read 1-8. <br> The 0 is the 'empty' place. Click on any number <br> next to 0 and they will switch places. </td> </tr> <tr><td align=center> # of moves:<br> <input name="moves" size=7 value="0" class="myBox"> <p> </td> <td align=center><br> <input type="submit" value="New Game" onClick="window.newgame()" class="myButton"> </td> </tr> </table> </FORM> </CENTER> <p><center> <font face="arial, helvetica" size="-2">Free JavaScripts provided<br> by <a href="http://javascriptsource.com">The JavaScript Source</a></font> </center><p> <!-- Script Size: 3.34 KB --> Code (markup):
Thanks @qwikad.com Been adapting that code. Just so I understand correctly changes the size of number in box. Thing is once I change the font size, the "vertical" space between the boxes disappeared Is it possible , make the space the same size as the "horizontal" space? hanks
Change margin: 0 0 0.2em 0; to something like margin: 0 0 1em 0; see if that helps. Ideally, you need to clean that code up, since it's using classes along with <br> and whatnot. Or you can leave it the way it is.
Thanks again. Not a problem cleaning up the "html" codes that I am familiar with (<br>). It the JavaScript . .quite the learning curve!
@qwilad.com Sure just temporarily on http://myway2fortune.info/a4.html please check on mobile...looks awful as a webpage! So concentrating on mobile thanks
You have an extra 0 in your margin: margin: 0 0 0.2em 0; 0 What is it doing there? It's messing up the margin. Remove that 0. It should look like this: margin: 0 0 0.2em 0; Then try to change it to whatever you want. You can even set it to an equal on all sides margin: margin: 0.2em; Personally, I would not set that font to 6.2em. It's HUGE. Set it to 4em and it will be just about right.
@qwikad.com tried everything in the margin and no change.. even tried this <table border=0 celpadding=0 cellspacing=10> <tr><td> <input type="button" value=" 1 " onClick="window.move(0)" class="myButton"> <input type="button" value=" 2 " onClick="window.move(1)" class="myButton"> <input type="button" value=" 3 " onClick="window.move(2)" class="myButton"> <br /><HR COLOR="yellow" WIDTH="50%" /> <input type="button" value=" 4 " onClick="window.move(3)" class="myButton"> <input type="button" value=" 5 " onClick="window.move(4)" class="myButton"> <input type="button" value=" 6 " onClick="window.move(5)" class="myButton"><br /><HR COLOR="yellow" WIDTH="50%" /> <input type="button" value=" 7 " onClick="window.move(6)" class="myButton"> <input type="button" value=" 8 " onClick="window.move(7)" class="myButton"> <input type="button" value=" 0 " onClick="window.move(8)" class="myButton"><p> </td></td> Code (markup): using the "HR COLOR="yellow" WIDTH="50%" seems to give me a vertical division but now the Horizonal (up and down) is thinner..?
Copy and paste this whole thing into your page, see if it looks more or less the way you want it: <html> <HEAD><meta name="keywords" content="make free money now,free,now,fast,cash,money,survey,honest,online"> <meta name="description" content="Looking for free money now? This site can help you earn extra free money today without investing anything, scam free. Everything is that is listed here is free!"> <link rel="shortcut icon" href="/favicon.ico"> <link rel="stylesheet" href="http://myway2fortune.info/style1.css" media="screen,projection,tv"> <title>Cuber!</title> <style> .myButton { display: inline-block; border: 0.1em solid #0000FF; background-color: #0000FF; color: #FFFFFF; font-size: 4.2em; margin: 0.1em 0.1em 0.2em 0.1em; cursor: pointer; } .myBox { padding: 0.1em; font-size: 2.5em; } .mySubmit { display: inline-block; border: 0.1em solid #0000FF; background-color: #0000FF; color: #FFFFFF; font-size: 2.2em; margin: 1.5em 0 0 0; cursor: pointer; } .myTable { width: 20em; margin: 0 auto 0 auto; } .myFooter { font-size: 0.8em; text-align: center; } </style> <SCRIPT LANGUAGE="JavaScript"> <!-- Original: Roger Zeitel (rzeitel@mars.superlink.net) --> <!-- Web Site: http://mars.superlink.net/rzeitel/games.html --> <!-- This script and many more are available free online at --> <!-- The JavaScript Source!! http://javascript.internet.com --> <!-- Begin function initArray() { this.length = initArray.arguments.length for (var i = 0; i < this.length; i++) this[i+1] = initArray.arguments[i] } var pos = new initArray(9,9,9,9,9,9,9,9,9); var nummoves= 0; function random() { today = new Date(); num = today.getTime(); num = Math.round(Math.abs(Math.sin (num)*1000000)) % 9; return num; } function display(pos) { for (var i=0; i<9; i++) { document.forms[0].elements[i].value = pos[i]; } document.forms[0].moves.value= nummoves; win(); } function move(num) { if (num < 8 && pos[num+1]==0) { pos[num+1]= pos[num]; pos[num]= 0; nummoves++; } else if (num > 0 && pos[num-1]==0) { pos[num-1]= pos[num]; pos[num]= 0; nummoves++; } else if (num > 2 && pos[num-3]==0) { pos[num-3]= pos[num]; pos[num]= 0; nummoves++; } else if (num < 6 && pos[num+3]==0 ) { pos[num+3]= pos[num]; pos[num]= 0; nummoves++; } display(pos); } function win() { if (pos[0]== 1 & pos[1]== 2 & pos[2]== 3 & pos[3]== 4 & pos[4]== 5 & pos[5]== 6 & pos[6]== 7 & pos[7]== 8 & pos[8]== 0) { if (confirm('You did it! Do you want to restart?')) newgame(); } } function newgame() { var x=1; for (var i=0; i<9; i++) { pos[i]=9; } for (var i=0; i<9;i++) { randomnum=random(); if (randomnum==9) randomnum=8; x=1; for (var j=0; j<9; j++) { if (j==i) continue; if (randomnum==pos[j]) { x=0; break; } } if (x==0) { i--; continue; } pos[i]=randomnum; } nummoves=0; display(pos); } // End --> </SCRIPT> </HEAD> <BODY onLoad="window.newgame()"> <h1>Magic Boxes</h1><p> <p><h2>The object of this challenging game is to try to place the numbers in order so that they read 1-8. <br /><br /> The 0 is the 'empty' place.<br /> <br />Click on any number next to 0 and they will switch places.</h2></p> <FORM> <table border="0" class="myTable"> <tr><td> <input type="button" value=" 1 " onClick="window.move(0)" class="myButton"> <input type="button" value=" 2 " onClick="window.move(1)" class="myButton"> <input type="button" value=" 3 " onClick="window.move(2)" class="myButton"><br/> <input type="button" value=" 4 " onClick="window.move(3)" class="myButton"> <input type="button" value=" 5 " onClick="window.move(4)" class="myButton"> <input type="button" value=" 6 " onClick="window.move(5)" class="myButton"><br/> <input type="button" value=" 7 " onClick="window.move(6)" class="myButton"> <input type="button" value=" 8 " onClick="window.move(7)" class="myButton"> <input type="button" value=" 0 " onClick="window.move(8)" class="myButton"> </td></td> <tr><td><br /> <h2># of moves:</h2> <input name="moves" size=7 value="0" class="myBox"> <p> </td> <td align=center><br /> <input type="submit" value="New Game" onClick="window.newgame()" class="mySubmit"> </td> </tr> </table> </FORM> <div class="myFooter"> Free JavaScripts provided<br /> by http://javascriptsource.com </div> </body> </html> Code (markup): I had to remove some deprecated HTML from it that nobody uses anymore (<center></center> etc.). PS I am pretty sure somebody else may / will contribute to your code. The whole thing needs to be re-written to be honest, but I have neither time nor desire at the moment.