1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Increasing "Box Size" Javascript

Discussion in 'JavaScript' started by briguy, Nov 28, 2016.

0
  1. #1
    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
     
    briguy, Nov 28, 2016 IP
  2. qwikad.com

    qwikad.com Illustrious Member Affiliate Manager

    Messages:
    7,151
    Likes Received:
    1,656
    Best Answers:
    29
    Trophy Points:
    475
    #2
    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):
     
    Last edited: Nov 29, 2016
    qwikad.com, Nov 29, 2016 IP
  3. briguy

    briguy Well-Known Member

    Messages:
    691
    Likes Received:
    46
    Best Answers:
    0
    Trophy Points:
    170
    #3
    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

    Cube game (MyWay2fortune.info).png
    Is it possible , make the space the same size as the "horizontal" space?
    hanks
     
    briguy, Nov 29, 2016 IP
  4. qwikad.com

    qwikad.com Illustrious Member Affiliate Manager

    Messages:
    7,151
    Likes Received:
    1,656
    Best Answers:
    29
    Trophy Points:
    475
    #4
    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.
     
    qwikad.com, Nov 29, 2016 IP
    briguy likes this.
  5. briguy

    briguy Well-Known Member

    Messages:
    691
    Likes Received:
    46
    Best Answers:
    0
    Trophy Points:
    170
    #5
    Thanks again. Not a problem cleaning up the "html" codes that I am familiar with (<br>).
    It the JavaScript . .quite the learning curve!
     
    briguy, Nov 29, 2016 IP
  6. briguy

    briguy Well-Known Member

    Messages:
    691
    Likes Received:
    46
    Best Answers:
    0
    Trophy Points:
    170
    #6
    Just a update...been changing the "margin" and nothing has changed
    Any other suggestions?
     
    briguy, Nov 29, 2016 IP
  7. qwikad.com

    qwikad.com Illustrious Member Affiliate Manager

    Messages:
    7,151
    Likes Received:
    1,656
    Best Answers:
    29
    Trophy Points:
    475
    #7
    Can you post the link of the page it is on?
     
    qwikad.com, Nov 29, 2016 IP
  8. briguy

    briguy Well-Known Member

    Messages:
    691
    Likes Received:
    46
    Best Answers:
    0
    Trophy Points:
    170
    #8
    briguy, Nov 29, 2016 IP
  9. qwikad.com

    qwikad.com Illustrious Member Affiliate Manager

    Messages:
    7,151
    Likes Received:
    1,656
    Best Answers:
    29
    Trophy Points:
    475
    #9
    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, Nov 29, 2016 IP
  10. briguy

    briguy Well-Known Member

    Messages:
    691
    Likes Received:
    46
    Best Answers:
    0
    Trophy Points:
    170
    #10
    @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..?
     
    briguy, Nov 29, 2016 IP
  11. qwikad.com

    qwikad.com Illustrious Member Affiliate Manager

    Messages:
    7,151
    Likes Received:
    1,656
    Best Answers:
    29
    Trophy Points:
    475
    #11
    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.
     
    qwikad.com, Nov 29, 2016 IP
    briguy likes this.