Replacing Numbers Array With Images

  • (5 Pages)
  • +
  • 1
  • 2
  • 3
  • 4
  • 5

60 Replies - 1971 Views - Last Post: 25 October 2013 - 08:32 PM

#31 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 3515
  • View blog
  • Posts: 10,146
  • Joined: 08-June 10

Re: Replacing Numbers Array With Images

Posted 17 October 2013 - 04:46 PM

Quote

Does 16 make more sense now?

nope, unique_arr (now on line #10) is still undefined.
Was This Post Helpful? 0
  • +
  • -

#32 EdNolan  Icon User is offline

  • D.I.C Regular

Reputation: 4
  • View blog
  • Posts: 280
  • Joined: 22-September 13

Re: Replacing Numbers Array With Images

Posted 17 October 2013 - 04:54 PM

checking out firebug

LOL I feel like an (*&@#(^R THE NAMES DON'T MATCH !!!! grrrrrr. lol

This post has been edited by EdNolan: 17 October 2013 - 04:56 PM

Was This Post Helpful? 0
  • +
  • -

#33 EdNolan  Icon User is offline

  • D.I.C Regular

Reputation: 4
  • View blog
  • Posts: 280
  • Joined: 22-September 13

Re: Replacing Numbers Array With Images

Posted 17 October 2013 - 05:05 PM

Wouldn't line 10 be defined by the lines that follow, At least that's what I want it do do?
function imgRandom() {
    var i, rand, image;
    for (i = 1; i < 10; i++) {
        var round_arr = []   // -- new
        while(round_arr.length < 9){                          // -- new
        rand = imgArray[Math.floor(Math.random() * imgArray.length)];
        if(!found){
        round_arr[round_arr.length]=rand
        };  // -- new
        else (round_arr[i]==rand){
        image = new Image();    // or new Image(72, 96);
        image.src = basePath + rand;
        image.width = 36;   // but preferably use css
        image.height = 48;
        document.body.appendChild(image);
    };
    }

picAgain()



Im getting closer ... Still not right though

<script type="text/javascript">

var imgArray = ["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"];
var basePath = "///C:/Users/Dads/Desktop/game/";


function imgRandom() {
    var i, rand, image;
    for (i = 1; i < 10; i++) {
        var round_arr = []   // -- new
        while(round_arr.length < 9){                          // -- new
        rand = imgArray[Math.floor(Math.random() * imgArray.length)];
        if(!found)round_arr[round_arr.length]=rand
        };  // -- new
        else (round_arr[i]==rand){
        image = new Image();    // or new Image(72, 96);
        image.src = basePath + rand;
        image.width = 36;   // but preferably use css
        image.height = 48;
        document.body.appendChild(image);
    };
    }

picAgain()

function picAgain(limit) {
    var count = 0;
    function liveCount() {
        var increment = count + 1;
        count = increment;
        if (count <= 28) {
        rand = imgArray[Math.floor(Math.random() * imgArray.length)];
        image = new Image();    // or new Image(72, 96);
        image.src = basePath + rand;
        image.width = 36;   // but preferably use css
        image.height = 48;
        document.body.appendChild(image);
        } else{
            clearInterval();
        }
    }
    var counter = setInterval(liveCount, 60000);
}


window.onload = imgRandom;      // wait for page to complete


        </script>



Was This Post Helpful? 0
  • +
  • -

#34 EdNolan  Icon User is offline

  • D.I.C Regular

Reputation: 4
  • View blog
  • Posts: 280
  • Joined: 22-September 13

Re: Replacing Numbers Array With Images

Posted 17 October 2013 - 05:15 PM

Still no

<script type="text/javascript">

var imgArray = ["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"];
var basePath = "///C:/Users/Dads/Desktop/game/";


function imgRandom() {
    var i, rand, image;
    for (i = 1; i < 10; i++) {
        var round_arr = []   // -- new
        while(round_arr.length < 10){                          // -- new
        rand = imgArray[Math.floor(Math.random() * imgArray.length)];
        var found = false;
        if(!found)round_arr[round_arr.length]=rand
        };  // -- new
        else (round_arr[i]==rand){found=true}
        image = new Image();    // or new Image(72, 96);
        image.src = basePath + rand;
        image.width = 36;   // but preferably use css
        image.height = 48;
        document.body.appendChild(image);
    }

picAgain()

function picAgain(limit) {
    var count = 0;
    function liveCount() {
        var increment = count + 1;
        count = increment;
        if (count <= 28) {
        rand = imgArray[Math.floor(Math.random() * imgArray.length)];
        image = new Image();    // or new Image(72, 96);
        image.src = basePath + rand;
        image.width = 36;   // but preferably use css
        image.height = 48;
        document.body.appendChild(image);
        } else{
            clearInterval();
        }
    }
    var counter = setInterval(liveCount, 60000);
}


window.onload = imgRandom;      // wait for page to complete


        </script>


Was This Post Helpful? 0
  • +
  • -

#35 EdNolan  Icon User is offline

  • D.I.C Regular

Reputation: 4
  • View blog
  • Posts: 280
  • Joined: 22-September 13

Re: Replacing Numbers Array With Images

Posted 17 October 2013 - 05:33 PM

Still nothing

        var round_arr = [];   // -- Added ;


Was This Post Helpful? 0
  • +
  • -

#36 EdNolan  Icon User is offline

  • D.I.C Regular

Reputation: 4
  • View blog
  • Posts: 280
  • Joined: 22-September 13

Re: Replacing Numbers Array With Images

Posted 17 October 2013 - 05:43 PM

Still trying ...
function imgRandom() {
    var i, rand, image;
    for (i = 1; i < 10; i++) {
        var found = false;
        var round_arr = [];   // -- new   Added ; to this.
        while(round_arr.length < 10){                          // -- new
        rand = imgArray[Math.floor(Math.random() * imgArray.length)];
        if(!found){round_arr[round_arr.length]=rand    // --- I added the { but still nothing.
        };  // -- new
        else (round_arr[i]==rand){found=true}
        image = new Image();    // or new Image(72, 96);
        image.src = basePath + rand;
        image.width = 36;   // but preferably use css
        image.height = 48;
        document.body.appendChild(image);
    }

picAgain()


Was This Post Helpful? 0
  • +
  • -

#37 EdNolan  Icon User is offline

  • D.I.C Regular

Reputation: 4
  • View blog
  • Posts: 280
  • Joined: 22-September 13

Re: Replacing Numbers Array With Images

Posted 17 October 2013 - 05:52 PM

maybe tmrw?
function imgRandom() {
    var i, rand, image;
    for (i = 1; i < 10; i++) {
        var found = false;
        var round_arr = [];   // -- new
        while(round_arr.length < 10){                          // -- new
        rand = imgArray[Math.floor(Math.random() * imgArray.length)];
        if(found = false){round_arr[round_arr.length]=rand
        }  // -- new
        else (round_arr[i]==rand){found=true}
        image = new Image();    // or new Image(72, 96);
        image.src = basePath + rand;
        image.width = 36;   // but preferably use css
        image.height = 48;
        document.body.appendChild(image);
    }

picAgain()


Was This Post Helpful? 0
  • +
  • -

#38 EdNolan  Icon User is offline

  • D.I.C Regular

Reputation: 4
  • View blog
  • Posts: 280
  • Joined: 22-September 13

Re: Replacing Numbers Array With Images

Posted 17 October 2013 - 06:01 PM

Dang it, lol. For sure Iwas hoping that was it ...
function imgRandom() {
    var i, rand, image;
    for (i = 1; i < 10; i++) {
        var found = false;
        var round_arr = [];   // -- new
        while(round_arr.length < 10){                          // -- new
        rand = imgArray[Math.floor(Math.random() * imgArray.length)];
        if(found = false){round_arr[round_arr.length]=rand
// ---        }  // -- new
        else (round_arr[i]==rand){found=true}
              }
        image = new Image();    // or new Image(72, 96);
        image.src = basePath + rand;
        image.width = 36;   // but preferably use css
        image.height = 48;
        document.body.appendChild(image);
    }

picAgain()


Was This Post Helpful? 0
  • +
  • -

#39 EdNolan  Icon User is offline

  • D.I.C Regular

Reputation: 4
  • View blog
  • Posts: 280
  • Joined: 22-September 13

Re: Replacing Numbers Array With Images

Posted 17 October 2013 - 06:14 PM

Do I have my true and false mixed up?
Was This Post Helpful? 0
  • +
  • -

#40 EdNolan  Icon User is offline

  • D.I.C Regular

Reputation: 4
  • View blog
  • Posts: 280
  • Joined: 22-September 13

Re: Replacing Numbers Array With Images

Posted 17 October 2013 - 07:15 PM

Okay I am separating the code. The code I am trying to come up with is now inside the <head></head>. The rest of the code in the body is good functional working code and works just like I want it too. I just need help with filling an empty array with the values from the random pics. I don't want to empty the imgArray at all! I simply want to make a copy of what was selected for the given round of play. Each round consists of 37 turns. The body completes the 37 turns ending one round of play. The new array will hold information is case of a dispute. The 2nd round of play also will have a copy of the values for that round of play. Please help me by fixing the code in the head section and then tell me If I need to make a function call, or if I can simply paste the code back into the body, inside the function imgRandom part of the code. Does it need push or is it okay the way it's written? It won't run!
<html>
    <head>
        <title>Title and DOCTYPE are Required</title>
<script>
        var round_arr = [];
        while(round_arr.length < 10){
        rand = imgArray[Math.floor(Math.random() * imgArray.length)];
        if(found = false){round_arr[round_arr.length]=rand}
        else (round_arr[i]==rand){found=true}
                                      }
</script>
        <style>
            #tblGuess img {
                width: 36px; height: 48px;
            }
        </style>
    </head>
    <body>
        
<script type="text/javascript">

var imgArray = ["one.png", "two.png", "three.png", "four.png"];
var basePath = "///C:/Users/Dads/Desktop/game/";

function imgRandom() {
    var i, rand, image;
    for (i = 1; i < 10; i++) {
        rand = imgArray[Math.floor(Math.random() * imgArray.length)];
        image = new Image();    // or new Image(72, 96);
        image.src = basePath + rand;
        image.width = 36;   // but preferably use css
        image.height = 48;
        document.body.appendChild(image);
    }

picAgain()

function picAgain(limit) {
    var count = 0;
    function liveCount() {
        var increment = count + 1;
        count = increment;
        if (count <= 28) {
        rand = imgArray[Math.floor(Math.random() * imgArray.length)];
        image = new Image();    // or new Image(72, 96);
        image.src = basePath + rand;
        image.width = 36;   // but preferably use css
        image.height = 48;
        document.body.appendChild(image);
        } else{
            clearInterval();
        }
    }
    var counter = setInterval(liveCount, 60000);
}

}

window.onload = imgRandom;      // wait for page to complete


        </script>
    </body>
</html>





This post has been edited by EdNolan: 17 October 2013 - 07:17 PM

Was This Post Helpful? 0
  • +
  • -

#41 EdNolan  Icon User is offline

  • D.I.C Regular

Reputation: 4
  • View blog
  • Posts: 280
  • Joined: 22-September 13

Re: Replacing Numbers Array With Images

Posted 17 October 2013 - 08:36 PM

okay, this did something and it wasn't pretty, LOL It paused my browser, it timed out, I had to stop the script, and then it showed a ton of pics on the screen. So the good news is it's at least doing something. Now If I can can get it to only post the 37 pics to the screen and then copy the pics to the round_arr. Please help !!!
<html>
    <head>
        <title>Title and DOCTYPE are Required</title>
        <style>
            #tblGuess img {
                width: 36px; height: 48px;
            }
        </style>
    </head>
    <body>
        
<script type="text/javascript">

var imgArray = ["one.png", "two.png", "three.png", "four.png"];
var basePath = "///C:/Users/Dads/Desktop/game/";
var round_arr = [];

function imgRandom() {
while(round_arr.length < 10){
    var i, rand, image;
        rand = imgArray[Math.floor(Math.random() * imgArray.length)];
  var found=false;



  for(i=0;i<10;i++){

    if(round_arr[i]==rand){found=true;break}
  }
  if(!found)round_arr[round_arr.length]=rand;


        image = new Image();    // or new Image(72, 96);
        image.src = basePath + rand;
        image.width = 36;   // but preferably use css
        image.height = 48;
        document.body.appendChild(image);
    }

picAgain()

function picAgain(limit) {
    var count = 0;
    function liveCount() {
        var increment = count + 1;
        count = increment;
        if (count <= 28) {
        rand = imgArray[Math.floor(Math.random() * imgArray.length)];
        image = new Image();    // or new Image(72, 96);
        image.src = basePath + rand;
        image.width = 36;   // but preferably use css
        image.height = 48;
        document.body.appendChild(image);
        } else{
            clearInterval();
        }
    }
    var counter = setInterval(liveCount, 1000);
}

}

window.onload = imgRandom;      // wait for page to complete


        </script>
    </body>
</html>





Was This Post Helpful? 0
  • +
  • -

#42 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 3515
  • View blog
  • Posts: 10,146
  • Joined: 08-June 10

Re: Replacing Numbers Array With Images

Posted 17 October 2013 - 10:56 PM

seems like we’re bach to square 2 ...

first, some comment, then some coffee and then we’ll try to get it working.
var imgArray = ["one.png", "two.png", "three.png", "four.png"];
// should be a server address later
var basePath = "///C:/Users/Dads/Desktop/game/";
var round_arr = [];

function imgRandom() {
while(round_arr.length < 10){
    var i, rand, image;
        // this is a global variable!
        rand = imgArray[Math.floor(Math.random() * imgArray.length)];
  // what is this variable supposed to do?
  var found=false;



  for(i=0;i<10;i++){
    // since round_arr is empty, this will never trigger
    if(round_arr[i]==rand){found=true;break}
  }
  // luckily found was not set to true
  // so we get at least one entry
  if(!found)round_arr[round_arr.length]=rand;


        image = new Image();    // or new Image(72, 96);
        image.src = basePath + rand;
        image.width = 36;   // but preferably use css
        image.height = 48;
        document.body.appendChild(image);
    }

picAgain()

// what's the limit parameter for? 
// you do not use it anywhere
function picAgain(limit) {
    var count = 0;
    function liveCount() {
        // a very complicated way to inrement count
        // just count += 1; will do the same
        var increment = count + 1;
        count = increment;
        if (count <= 28) {
        rand = imgArray[Math.floor(Math.random() * imgArray.length)];
        image = new Image();    // or new Image(72, 96);
        image.src = basePath + rand;
        image.width = 36;   // but preferably use css
        image.height = 48;
        document.body.appendChild(image);
        // parameter for clearInterval() missing
        } else{
            clearInterval();
        }
    }
    var counter = setInterval(liveCount, 1000);
}

}
// good thing that picAgain() has such a long timeout
window.onload = imgRandom;      // wait for page to complete


Quote

Now If I can can get it to only post the 37 pics to the screen and then copy the pics to the round_arr.

there are a lot of suggestions already made (esp. post #22)
a proof-of-concept (untested, though)
var imgRandom = {
  basePath: 'path/to/file',
  imgArray: [],
  logArray: [],
  getImage: function() {
    var image = new Image;
    var randItem = imgRandom.imgArray.pop();
    imgRandom.logArray.push(randItem);
    image.src = imgRandom.basePath + randItem;
    image.alt = "..."; // alt is a required attribute!
    image.width  = 36;
    image.height = 48;
    return image;
  },
  render: function() {
    document.body.appendChild(imgRandom.getImage());
  },
  reset: function(pics) {
    imgRandom.imgArray = pics.concat();
    imgRandom.imgArray.sort(...);  // insert randomiser function here
    console.log(imgRandom.logArray);
    imgRandom.logArray = [];
  }
};
// init
imgRandom.reset(original_image_array);
// choose 9 images up front
for (var i=9; i--; ) {
    imgRandom.render();
}
// set recursive interval and run immediately
(function picagain() {
  imgRandom.render();
  if (imgRandom.imgArray.length) {
    window.setTimeout(picagain, 1000);
  }
})();


Was This Post Helpful? 0
  • +
  • -

#43 EdNolan  Icon User is offline

  • D.I.C Regular

Reputation: 4
  • View blog
  • Posts: 280
  • Joined: 22-September 13

Re: Replacing Numbers Array With Images

Posted 19 October 2013 - 09:24 PM

That was a mouthful of code to digest. I learned a lot about splice, pop, push and after a whole day of trial and error and rewriting, I finally am at a point where I need some input again. The way the code is right now, it produces 10 very fast images. It's not pausing at 9 and waiting to give me the 10th. I don't think it is removing the images from the imgArray either, I keep getting duplicates within the first 9. Also, after it shows the first 10 it stops giving me images. It's suppose to give me a total of 37. I used imgRandom.imgArray.length-1 thinking it would keep checking and producing images for me but it's not. Is my code filling the shownImages = [] also? This code looks pretty lean now. :) Thanks for helping !!! If I change line 29 shownImages[0] to shownImages[] for some reason my html page displays continual groups of 9 images even though that line of code refers to the console.log so I'm confused there too.
<html>
    <head>
        <title>Title and DOCTYPE are Required</title>
<script>
function setTimeout() {
           imgRandom();
           if (imgRandom.imgArray.length-1) {
           var counter = setTimeout(picAgain, 60000);} // select 28 more times only !!!
}
</script>
        <style>
            #tblGuess img {
                width: 36px; height: 48px;
            }
        </style>
    </head>
    <body>
        
<script type="text/javascript">
var basePath = "///C:/Users/Dads/Desktop/game/";
function imgRandom() {
var imgArray = ["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"];
    var i, rand, image;
        rand = imgArray[Math.floor(Math.random() * imgArray.length)];
        image = new Image();    // or new Image(72, 96);
        image.src = basePath + rand;
        var shownImages = [];
        shownImages.push(imgArray.splice(rand,rand+1)); //record image in shownImages array, remove image from imgArray
        console.log(shownImages[0])
        image.width = 36;   // but preferably use css
        image.height = 48;
        document.body.appendChild(image);
}
for (i = 0; i < 9; i++) {
         imgRandom();
}
setTimeout()
        </script>

    </body>
</html>


This post has been edited by EdNolan: 19 October 2013 - 09:52 PM

Was This Post Helpful? 0
  • +
  • -

#44 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 3515
  • View blog
  • Posts: 10,146
  • Joined: 08-June 10

Re: Replacing Numbers Array With Images

Posted 20 October 2013 - 12:46 AM

on first glance: line #5. you redefine a system function!!! the setTimeout() of line #8 actually calls the custom function setTimeout() from line #5, not the system function setTimeout().

with regards to the duplicates. each time you call imgRandom() you create a new complete picure array. how should that prevent duplicates?

there was a reason why I used an object that holds both the image array to work on and the image choosing function together. so I could easily save state.
Was This Post Helpful? 1
  • +
  • -

#45 EdNolan  Icon User is offline

  • D.I.C Regular

Reputation: 4
  • View blog
  • Posts: 280
  • Joined: 22-September 13

Re: Replacing Numbers Array With Images

Posted 20 October 2013 - 08:49 AM

View PostDormilich, on 20 October 2013 - 12:46 AM, said:

1). with regards to the duplicates. each time you call imgRandom() you create a new complete picure array. how should that prevent duplicates?

2). there was a reason why I used an object that holds both the image array to work on and the image choosing function together. so I could easily save state.

I want to thank you for being so kind. You took a lot of time to help, and to continue helping me; and I want you to know I really appreciate your kindness. With me not knowing much about javascript, when I first attempted inserting your code it wouldn't run, not to mention I really didn't have a clue about the way some of your code was written, and still don't, like line 3,4,15 and 18. I guess I didn't want to bother you and ask about those lines. So I set out on an all day journey and tried to duplicate what you produced. I didn't know calling imgRandom over, and over would have the effect you mentioned. I simply seen that you called it, and figured it would work. In my excitedness in seeing progress, I neglected to study your code 18-23. I'm going to play with that today in between watching the football game and a recorded show. Thank you for all your help. I am miles ahead of where I was before I started and if I hadn't started, I would not have met such helpful people like what is here at DreamInCode! Lead me to the water ...
Line 20:
// insert randomiser function here,

would that be,
rand = imgArray[Math.floor(Math.random() * imgArray.length)];

? I don't know what to put here.

This post has been edited by andrewsw: 20 October 2013 - 10:48 AM

Was This Post Helpful? 0
  • +
  • -

  • (5 Pages)
  • +
  • 1
  • 2
  • 3
  • 4
  • 5