Replacing Numbers Array With Images

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

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

#16 Dormilich  Icon User is online

  • 痛覚残留
  • member icon

Reputation: 3553
  • View blog
  • Posts: 10,332
  • Joined: 08-June 10

Re: Replacing Numbers Array With Images

Posted 16 October 2013 - 12:49 AM

hints:
- count is not a function
- defining setInterval() inside setInterval() will lead to an exploding chain reaction
- width/height are recommended image attributes
- the first setInterval() call is incomplete
Was This Post Helpful? 1
  • +
  • -

#17 EdNolan  Icon User is offline

  • D.I.C Regular

Reputation: 3
  • View blog
  • Posts: 366
  • Joined: 22-September 13

Re: Replacing Numbers Array With Images

Posted 17 October 2013 - 12:04 PM

Thanks Dormilich,

I played around with it for a few hours and this is what I came up with. It works like I want it too, but is definitely different then what I started with.

<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/";

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, 1000);
}

}

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


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



Was This Post Helpful? 0
  • +
  • -

#18 Dormilich  Icon User is online

  • 痛覚残留
  • member icon

Reputation: 3553
  • View blog
  • Posts: 10,332
  • Joined: 08-June 10

Re: Replacing Numbers Array With Images

Posted 17 October 2013 - 02:58 PM

- clearInterval() expects the interval identifyer as parameter.
- you have duplicate code for the image creation, consider putting that into a function.
- imgRandom() and picAgain() are in a race condition. picAgain() is called immediately while imgRandom() is called on load.
Was This Post Helpful? 0
  • +
  • -

#19 EdNolan  Icon User is offline

  • D.I.C Regular

Reputation: 3
  • View blog
  • Posts: 366
  • Joined: 22-September 13

Re: Replacing Numbers Array With Images

Posted 17 October 2013 - 03:16 PM

Everyone here has given me great clues and has helped me move along very nicely with coding my game. Even though I don't know much I have to say I am very pleased at how helpful everyone here has been. So, my next step now is two fold. I want to first check that I am not picking the same image twice, and the second is, I need to keep an ongoing record of every round played. So in this next code I built a new array called round_arr = []. I want to store all images for the first round in that array. Each round consists of a total of 37 images being displayed, and then a new round starts. So as you see I am almost ready to loop the entire code to produce consecutive rounds of play. The trouble I am having now is having that new array get filled with no dupes. Any clues?

<html>
    <head>
        <title>Some Game By Ed Nolan</title>
        <style>
            #tblGuess img {
                width: 36px; height: 48px;
            }
        </style>
    </head>
    <body>
        
<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(arr.length < 9){                          // -- new
        rand = imgArray[Math.floor(Math.random() * imgArray.length)];
        if(!found){round_arr[round_arr.length]=rand};  // -- new
        else if(unqiue_arr[i]==rand){found=true;       // -- new
        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>




I was also playing around with this trying to get it to at least put something into an empty new array, but nothing worked.

function imgRandom() {
    var i, rand, image;
    for (i = 1; i < 10; i++) {
        this.round = [];                  // -- new
        rand = imgArray[Math.floor(Math.random() * imgArray.length)];
        this.round.push(new Rand(imgArray[i]));    // -- new
        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);
    }


Was This Post Helpful? 0
  • +
  • -

#20 Dormilich  Icon User is online

  • 痛覚残留
  • member icon

Reputation: 3553
  • View blog
  • Posts: 10,332
  • Joined: 08-June 10

Re: Replacing Numbers Array With Images

Posted 17 October 2013 - 03:21 PM

an alternate way making use of objects:
// just put it before </body>
(function(){

var imgRandom = {
  delay: 1000,
  total: 37,
  basePath: '...',
  imgArray: [...],
  getImage: function() {
    var image = new Image;
    image.src = imgRandom.basePath + imgRandom.imgArray[Math.floor(Math.random() * imgRandom.imgArray.length)];
    image.alt = "..."; // alt is a required attribute!
    image.width  = 36;
    image.height = 48;
    imgRandom.total--;
    return image;
  },
  // generators would be ideal here, but their support is not ideal
  loopOut: function() {
    if (imgRandom.total) {
      setTimeout(imgRandom.render, imgRandom.delay);
    }
  },
  render: function() {
    document.body.appendChild(imgRandom.getImage());
  }
};
for (var i=9; i--; ) {
  imgRandom.render();
}
imgRandom.loopOut();
  
})();


Was This Post Helpful? 0
  • +
  • -

#21 EdNolan  Icon User is offline

  • D.I.C Regular

Reputation: 3
  • View blog
  • Posts: 366
  • Joined: 22-September 13

Re: Replacing Numbers Array With Images

Posted 17 October 2013 - 03:24 PM

View PostDormilich, on 17 October 2013 - 02:58 PM, said:

- you have duplicate code for the image creation, consider putting that into a function.
- imgRandom() and picAgain() are in a race condition. picAgain() is called immediately while imgRandom() is called on load.



I don't want to display them all at once.
Thanks for your help though. It looks like a mess but it works just like I want it too!. I want to display 9 and then display the rest over time.

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

Was This Post Helpful? 0
  • +
  • -

#22 Dormilich  Icon User is online

  • 痛覚残留
  • member icon

Reputation: 3553
  • View blog
  • Posts: 10,332
  • Joined: 08-June 10

Re: Replacing Numbers Array With Images

Posted 17 October 2013 - 03:30 PM

Quote

I was also playing around with this trying to get it to at least put something into an empty new array, but nothing worked.

you reset this.round with an empty array in each cycle.

Quote

So, my next step now is two fold. I want to first check that I am not picking the same image twice

copy the array (e.g. via .concat(), .slice()), shuffle it (.sort() with a randomising function) and then pop out (.pop()) the elements until the array is empty.

line #22, arr is not defined.
Was This Post Helpful? 0
  • +
  • -

#23 Dormilich  Icon User is online

  • 痛覚残留
  • member icon

Reputation: 3553
  • View blog
  • Posts: 10,332
  • Joined: 08-June 10

Re: Replacing Numbers Array With Images

Posted 17 October 2013 - 03:35 PM

View PostEdNolan, on 18 October 2013 - 12:24 AM, said:

View PostDormilich, on 17 October 2013 - 02:58 PM, said:

- you have duplicate code for the image creation, consider putting that into a function.
- imgRandom() and picAgain() are in a race condition. picAgain() is called immediately while imgRandom() is called on load.

I don't want to display them all at once.

thatís not what Iím saying. all Iím saying is, if loading the page takes longer than one second, the first image of picAgain() will show before the images of imgRandom() (for demonstration purposes, set the delay to 10 ms and load a big image into the page).
Was This Post Helpful? 0
  • +
  • -

#24 EdNolan  Icon User is offline

  • D.I.C Regular

Reputation: 3
  • View blog
  • Posts: 366
  • Joined: 22-September 13

Re: Replacing Numbers Array With Images

Posted 17 October 2013 - 03:45 PM

Line 22 defined ... wouldn't it be all of this?

while(arr.length < 9){                          // -- new
rand = imgArray[Math.floor(Math.random() * imgArray.length)];
if(!found){round_arr[round_arr.length]=rand};  // -- new
else if(unqiue_arr[i]==rand){found=true;       // -- new
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);
}



I'm getting confused. I don't want to empty this imgArray. I simply want to document the picture into a new array and not duplicate any pictures. Can't I just look at what Is currently added to the new array before adding any new pictures?

View PostDormilich, on 17 October 2013 - 03:35 PM, said:

View PostEdNolan, on 18 October 2013 - 12:24 AM, said:

View PostDormilich, on 17 October 2013 - 02:58 PM, said:

- you have duplicate code for the image creation, consider putting that into a function.
- imgRandom() and picAgain() are in a race condition. picAgain() is called immediately while imgRandom() is called on load.

I don't want to display them all at once.

thatís not what Iím saying. all Iím saying is, if loading the page takes longer than one second, the first image of picAgain() will show before the images of imgRandom() (for demonstration purposes, set the delay to 10 ms and load a big image into the page).



Sorry, I shortened the timed to speed up the process. I was checking to make sure everything worked correctly. Yhe timer is actually going to be set to 1 minute. 60000
Was This Post Helpful? 0
  • +
  • -

#25 Dormilich  Icon User is online

  • 痛覚残留
  • member icon

Reputation: 3553
  • View blog
  • Posts: 10,332
  • Joined: 08-June 10

Re: Replacing Numbers Array With Images

Posted 17 October 2013 - 03:49 PM

Quote

Line 22 defined ... wouldn't it be all of this?

your new array is named round_arr, not arr. Iíd expect that to throw a parser error (cannot call property length of undefined).
Was This Post Helpful? 0
  • +
  • -

#26 EdNolan  Icon User is offline

  • D.I.C Regular

Reputation: 3
  • View blog
  • Posts: 366
  • Joined: 22-September 13

Re: Replacing Numbers Array With Images

Posted 17 October 2013 - 03:58 PM

okay, I fixed the name of the array and updated the timer. I still get a blank page. Everything was good until I added the new stuff
<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 if(unqiue_arr[i]==rand){found=true;       // -- new
        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);
    } }   // --- I added one new / ---

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>


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

Was This Post Helpful? 0
  • +
  • -

#27 Dormilich  Icon User is online

  • 痛覚残留
  • member icon

Reputation: 3553
  • View blog
  • Posts: 10,332
  • Joined: 08-June 10

Re: Replacing Numbers Array With Images

Posted 17 October 2013 - 04:06 PM

anything in the Error Console (F12)?

unique_arr (line #14) ainít defined either.

and there are one or two } missing.

tip: use indenting properly, that will help prevent the brace issue.

just for demo:
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 if (unqiue_arr[i]==rand) {
                found=true;       // -- new
                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);
            } 
        }   // --- I added one new / ---




and while Iím at it: unexpected else after statement (i.e. a semi-colon too much)
Was This Post Helpful? 0
  • +
  • -

#28 EdNolan  Icon User is offline

  • D.I.C Regular

Reputation: 3
  • View blog
  • Posts: 366
  • Joined: 22-September 13

Re: Replacing Numbers Array With Images

Posted 17 October 2013 - 04:26 PM

Oh boy, I hope I'm not getting you upset. I am new to javascript. But I went ahead and made the changes you spoke about. I wastn't able to get anything as far as f12 from the browser. I am using Firefox. Here's the updated. I didn't want to use BREAK on the one line below. I want the script to keep running to output the image. I didn't know what else to put there so In order to help you help me I added the word break, if that makes sence!

<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 if(unqiue_arr[i]==rand){
        found=true; break};   // -- new
        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
  • +
  • -

#29 Dormilich  Icon User is online

  • 痛覚残留
  • member icon

Reputation: 3553
  • View blog
  • Posts: 10,332
  • Joined: 08-June 10

Re: Replacing Numbers Array With Images

Posted 17 October 2013 - 04:29 PM

the problem on line #16 remains.

break only makes sense in a loop or a switch() statement. cf. https://developer.mo...tatements/break

for Firefox, install FireBug.
Was This Post Helpful? 0
  • +
  • -

#30 EdNolan  Icon User is offline

  • D.I.C Regular

Reputation: 3
  • View blog
  • Posts: 366
  • Joined: 22-September 13

Re: Replacing Numbers Array With Images

Posted 17 October 2013 - 04:44 PM

I took a look at the link and took out the break since I didn't want it anyway. I tried to make more sence using the link and adjusted the script, but still not there. Does 16 make more sense now?

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 (unqiue_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()



CNTRL SHIFT J = [19:42:15.329] The character encoding of the HTML document was not declared. The document will render with garbled text in some browser configurations if the document contains characters from outside the US-ASCII range. The character encoding of the page must be declared in the document or in the transfer protocol. @ file:///C:/Users/Dads/Desktop/game/guess.html
Was This Post Helpful? 0
  • +
  • -

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