11 Replies - 990 Views - Last Post: 27 May 2016 - 09:25 AM

#1 Jhosef07   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 33
  • Joined: 26-September 14

Image Rotation or Slot Machine Effect Problem

Posted 25 May 2016 - 05:14 AM

Hi Guys I need a Help in my program i cannot do the Slot Machine Effect in this Code

here is my code

when i click that must be seen the random image like in the slot machine before it stop

please help me thanks in advance

<html>
<head>
<title> Smart Ka-Partner </title>
</head>
<BODY  background="BG.jpg">
<br><br><br><br><br><br><br><br><br><br><br><br>
<form name="imageForm">
  <center><table border=0>
   <tr align="center">
    <td>
      <input onclick="displayImage();" type=button value="Click Here" style="opacity: 0.1;">
    </td>
  </tr>
  <tr>
    <td>
      <img src="0.png" name="canvas" />
    </td>
  </tr>
  </table></center>
</form>


<script language="javascript">

var imagesArray = [
'1.png',
'2.png',
'3.png',
'4.png',
'5.png',
'6.png',
'7.png',
'8.png',
'9.png',
'10.png',
'11.png',
'12.png',
'13.png',
'14.png',
'15.png',
'16.png',
'17.png',
'18.png',
'19.png',
'20.png',
'21.png',
'22.png',
'23.png',
'24.png',
'25.png',
'26.png',
'27.png',
'28.png',
'29.png',
'30.png',
'31.png',
'32.png',
'33.png',
'34.png',
'35.png',
'36.png',
'37.png',
'38.png',
'39.png',
'40.png',
'41.png',
'42.png',
'43.png',
'44.png',
'45.png',
'46.png',
'47.png',
'48.png',
'49.png',
'50.png',
'51.png',
'52.png',
'53.png',
'54.png',
'55.png',
'56.png',
'57.png',
'58.png',
'59.png',
'60.png',
'61.png',
'62.png',
'63.png',
'64.png',
'65.png',
'66.png',
'67.png',
'68.png',
'69.png',
'70.png',
'71.png',
'72.png',
'73.png',
'74.png',
'75.png'
];

var usedImages = {};
var usedImagesCount = 0;

function displayImage(){

    var num = Math.floor(Math.random() * (imagesArray.length));
    if (!usedImages[num]){
      
        document.canvas.src = imagesArray[num];
        usedImages[num] = true;
        usedImagesCount++;
        if (usedImagesCount === imagesArray.length){
            usedImagesCount = 0;
            usedImages = {};
        }
    } else {
        displayImage();
    }
}

</script>
</td></tr></Br></Br></Br></Br></Br></table></form></BODY></html>


Is This A Good Question/Topic? 0
  • +

Replies To: Image Rotation or Slot Machine Effect Problem

#2 astonecipher   User is offline

  • Senior Systems Engineer
  • member icon

Reputation: 2559
  • View blog
  • Posts: 10,277
  • Joined: 03-December 12

Re: Image Rotation or Slot Machine Effect Problem

Posted 25 May 2016 - 05:16 AM

Nothing to do with PHP. Moving to Javascript.
Was This Post Helpful? 0
  • +
  • -

#3 ArtificialSoldier   User is offline

  • D.I.C Lover
  • member icon

Reputation: 2041
  • View blog
  • Posts: 6,264
  • Joined: 15-January 14

Re: Image Rotation or Slot Machine Effect Problem

Posted 25 May 2016 - 10:01 AM

That's some seriously old code you've got there. What happens when you run that?
Was This Post Helpful? 0
  • +
  • -

#4 Jhosef07   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 33
  • Joined: 26-September 14

Re: Image Rotation or Slot Machine Effect Problem

Posted 25 May 2016 - 12:28 PM

@artificial

it will choose picture randomly.. then it will not choose that pic again until all the picture will be choosen
Was This Post Helpful? 0
  • +
  • -

#5 Jhosef07   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 33
  • Joined: 26-September 14

Re: Image Rotation or Slot Machine Effect Problem

Posted 25 May 2016 - 12:56 PM

I tried this one but nothing happens

<BODY  background="BG.jpg">
<form name=slots onsubmit="rollem(); return false;">
<table border=0 cellpadding=3 cellspacing=1 width=300 align="center">
<br><Br><br><Br><br><Br><br><Br><br><Br>
<tr><th colspan=2></th></tr>
<tr><th align=right></th>  <td align=left><input type=box size=5 name=gold READONLY value=25 hidden=""></td></tr>
<tr><th align=right></th>  <td align=left><input type=box size=5 name=bet hidden=""></td></tr>
<tr><td colspan=2><input type="image" value="Spin the slots" src="power.png" style="opacity: .05;">
  <center>
  <table cellspacing=5 cellpadding=2 border=0><tr>
  <td><img src=1.png name=slot1></td>
</tr>
</table>
  <input type=text readonly size=33 name=banner hidden="">
</td></tr>
</table></center>
</form>
<script>

slotitem = new Array(
	'1','2','3','4','5');





function rollem () {

counter=0;

spinem();

}



function spinem () {

turns1=5+Math.floor((Math.random() * 5))

for (a=0;a<turns1;a++)

  { 
  	document.slots.slot1.src=""+slotitem[a % 5]+".png"; 
  	splice(document.slots.slot1.src,1);
  }

counter++;

if (counter<30) {setTimeout("spinem(counter);",20);

} else {checkmatch();}

}

</script>
</td></tr></Br></Br></Br></Br></Br></table></form></BODY></html>

Was This Post Helpful? 0
  • +
  • -

#6 ArtificialSoldier   User is offline

  • D.I.C Lover
  • member icon

Reputation: 2041
  • View blog
  • Posts: 6,264
  • Joined: 15-January 14

Re: Image Rotation or Slot Machine Effect Problem

Posted 25 May 2016 - 02:41 PM

Look at your browser's developer console for Javascript error messages. All modern browsers have developer tools, you'll need to learn how to use those to help figure out what the problem is. These are some issues I see with that code:

The body element's background attribute is outdated, you should use CSS to declare a background image.

Using event attributes (like the form's onsubmit attribute) is also old and outdated, it's better to attach events in Javascript using addEventListener.

You've got a ton of br elements, you should use CSS margins and padding to position elements. You also put those br elements inside a table element. The only things that go inside a table element are thead, tbody, and tr elements.

You shouldn't use table elements for positioning at all, tables should only be used to display data like in a spreadsheet. CSS is for positioning elements and creating a layout.

Attributes like border, width, align, etc, and tags like center and font, should be replaced with CSS.

"Box" is not a valid value for an input type. The default is "text". "Hidden" is not a valid attribute for inputs either.

Instead of referring to elements like document.slots.slot1, you should give the elements an ID and use document.getElementById.

Your spinem function tries to call a checkmatch function which doesn't exist.

You may find other error messages in your browser's developer console.
Was This Post Helpful? 0
  • +
  • -

#7 Jhosef07   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 33
  • Joined: 26-September 14

Re: Image Rotation or Slot Machine Effect Problem

Posted 25 May 2016 - 03:09 PM

Yes i will put it in css when i already finish this...

What is wrongnin that program ? Pls i really Need this :(
Was This Post Helpful? 0
  • +
  • -

#8 ArtificialSoldier   User is offline

  • D.I.C Lover
  • member icon

Reputation: 2041
  • View blog
  • Posts: 6,264
  • Joined: 15-January 14

Re: Image Rotation or Slot Machine Effect Problem

Posted 25 May 2016 - 03:10 PM

Like I said, go to your developer console and look for error messages. I'm not going to run the code and look for you, you're the developer, you can do that part. I also pointed out the missing function.
Was This Post Helpful? 0
  • +
  • -

#9 Jhosef07   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 33
  • Joined: 26-September 14

Re: Image Rotation or Slot Machine Effect Problem

Posted 25 May 2016 - 06:57 PM

i've already clean up and update the codes and here it is.. but nothing happen

:(/>


here is the code
<html>
<head>
<title> Smart Ka-Partner </title>
</head>
<BODY  background="BG.jpg">
<form name=slots onsubmit="rollem(); return false;">
<table border=0 cellpadding=3 cellspacing=1 width=300 align="center">
<br><Br><br><Br><br><Br><br><Br><br><Br>
<tr><th colspan=2></th></tr>
<tr><td colspan=2><input type="image" value="Spin the slots" src="power.png" style="opacity: .05;">
  <center>
  <table cellspacing=5 cellpadding=2 border=0><tr>
  <td><img src=1.png name=slot1></td>
</tr>
</table>
</td></tr>
</table></center>
</form>
<script>

var slotitem = new Array(
	'1','2','3','4','5');

function rollem () {

counter=0;
spinem();

}



function spinem () {

var turns1=5+Math.floor((Math.random() * slotitem.lenght))

for (a=0;a<turns1;a++)

  { 
  	document.getElementById("slot1").src = ""+slotitem[a % turns1]+".png";
  }

counter++;
		
if (counter<30) {
	setTimeout("spinem(counter);",20);
} 
}

</script>
</td></tr></table></form></BODY></html>

This post has been edited by Jhosef07: 25 May 2016 - 07:09 PM

Was This Post Helpful? 0
  • +
  • -

#10 ArtificialSoldier   User is offline

  • D.I.C Lover
  • member icon

Reputation: 2041
  • View blog
  • Posts: 6,264
  • Joined: 15-January 14

Re: Image Rotation or Slot Machine Effect Problem

Posted 26 May 2016 - 09:31 AM

Add some alert or console.log statements to verify that your functions are running. If you use console.log then you'll see it output messages in the developer console. One thing that I'll point out is that your for loop is not going to cause the image to change where you see it changing, it's not going to animate through a bunch of images. It's going to loop through that as fast as possible and you're only going to see whatever it got set to last. If you want to animate it you need a different approach. You also have a typo in your spinem function, use console.log(turns1) and see what it's set to.
Was This Post Helpful? 0
  • +
  • -

#11 Jhosef07   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 33
  • Joined: 26-September 14

Re: Image Rotation or Slot Machine Effect Problem

Posted 26 May 2016 - 10:32 PM

@artificial

what can you suggest or help me how to do it ?

im having a hard time to do that :(

please please
Was This Post Helpful? 0
  • +
  • -

#12 ArtificialSoldier   User is offline

  • D.I.C Lover
  • member icon

Reputation: 2041
  • View blog
  • Posts: 6,264
  • Joined: 15-January 14

Re: Image Rotation or Slot Machine Effect Problem

Posted 27 May 2016 - 09:25 AM

To do what? If you want to show the image changing several times then you need to use setTimeout or setInterval to run a function after a certain number of milliseconds to change it to the next image.

http://www.w3schools...s/js_timing.asp
https://developer.mo...mers/setTimeout
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1