JavaScript - Multiple Function And Array Using Random Integer

Hi,

I've got a game 99% finished, basically when the game start and the player clicks through to the game panel, there are 30 tiles (80x80px) each, and the object of the game is for the player to press the tile with the letter "X" on, the X can be on any 1 of 5 different coloured tiles at anyone time and of course there can be more than 1 tile having an X on it. The tiles currently are built via .css, and this works 100% perfectly. However now I want to use images, pulled in from my local website instead of tiles built via .css.

A demo of what I'm kinda of after is here > Edit fiddle - JSFiddle - if you press "run" the images will keep changing their order.

The code I currently have for the game is here..


//CODE//

var TheColorArray = ['red', 'yellow', 'green', 'blue', 'orange'],
TheScore = 0,
TimerLength = 2500,
GameTimer,
ScoreMap = {
'red': 500,
'yellow': 50,
'green': 30,
'blue': 20,
'orange': 5
};

function DrawRow() {

TheColorArray.sort(function () {
return .5 - Math.random();
});

var TheHTML = '<div class="row">';

var MagicColumn = Math.floor(Math.random() * 6);

for (var i = 0; i < 5; i++) {

if (i === MagicColumn) {

TheHTML = TheHTML + '<div class="GameTile ' + TheColorArray[i] + '">x</div>';

} else {

TheHTML = TheHTML + '<div class="GameTile ' + TheColorArray[i] + '">' + String.fromCharCode(97 + Math.floor(Math.random() * 26)) + '</div>';
}
}

TheHTML = TheHTML + '</div>';

return TheHTML;
}


You'll also see that "TheHTML = TheHTML + '<div class="GameTile ' + TheColorArray[i] + '">x</div>';" and "TheHTML = TheHTML + '<div class="GameTile ' + TheColorArray[i] + '">' + String.fromCharCode(97 + Math.floor(Math.random() * 26)) + '</div>';" both state that if X is pressed the game basically carries on. I need this to use a chosen image from my server, i.e. URL/apple.png ....

i have also managed to get to this point (with apples) but its just not working.. Edit fiddle - JSFiddle

Any help would be great..

Many thanks in advance!!!

I have a script which allows me to select random users from one select field to another and works like a charm, but...

I want to be able to get random users from one select field to multiple (lets say 2) other select fields...

So lets say that I have 5 users in the first field (select1):
James
Bill
Jennifer
Bob
Karen

Now when I press a button:
<input value="" type="button" onClick="randomusers();" />

2 users should be moved to select2 and other 2 users moved to select3.

My current script is as follows:
Code:

function randomusers(){
 
    var given = 2, used = {}, randnum, opts = $('#select1 option'), olen = opts.length, hiddiv = $('#hiddendiv');
    function ran() { // generate a unique random number
      randnum = Math.floor(Math.random() * olen);
      return used['u'+randnum] ? ran() : randnum;
    }
    for (var i = 0; i < given; i++) { // get the correct quantity of randoms
      used['u'+ran()] = true;
    }
    var players = opts.filter(function(index) { // remove all options that are not one of the randoms
      return !!used['u'+index];
    }).appendTo('#select2');
    
}

Hoping for help...

Thanks in advance :-)

Hi

I implemented some coding tor create a random image on the page with a corresponding 'alt' tag and all was fine for a while...

Then I got ambitions and modified the script to generate code that would generate two seperate sets of random image and associated 'alt' tag pairs.... and all seemed fine for a while....

... however after having used the code on my page for a while I notice that occasionally I get a broken file link to the image which then fails to show... and shows the 'alt' text of "undefined".

All the code links to images are correct and all images DO show from time to time with the tags.... only occasionally this extra blank/undefined pair is generated. Anyone have any ideas?

Here's the code...

Code:

		<SCRIPT LANGUAGE="JavaScript">
			<!-- Begin
			// Set up the image files to be used.
			var theImages = new Array() // do not change this
			// To add more image files, continue with the
			// pattern below, adding to the array.
			
			theImages[0] = 'images/240 Images/belmarsh-peat-240.jpg'
			theImages[1] = 'images/240 Images/98-florence-rd-maidstone240.jpg'
			theImages[2] = 'images/240 Images/boxgrove-biface-240.jpg'
			theImages[3] = 'images/240 Images/Fieldwalking2-240.jpg'
			theImages[4] = 'images/240 Images/Hawkinge-Pot-240.jpg'
			theImages[5] = 'images/240 Images/Justin_Barton-240.jpg'
			theImages[6] = 'images/240 Images/StaffPages/Hadrians-Wall.jpg'
			theImages[7] = 'images/240 Images/Chilley_Farm_Pevensey240.jpg'
			// do not edit anything below this line
			
			var theImages2 = new Array() // do not change this
			// To add more image files, continue with the
			// pattern below, adding to the array.
			
			theImages2[0] = 'images/LeafletImages/Fronts/Building/Building4.jpg'
			theImages2[1] = 'images/LeafletImages/Fronts/Fieldwork/Fieldwork4.jpg'
			theImages2[2] = 'images/LeafletImages/Fronts/Finds/Finds4.jpg'
			theImages2[3] = 'images/LeafletImages/Fronts/Forensic/Forensic4.jpg'
			theImages2[4] = 'images/LeafletImages/Fronts/GeoArch/GeoArch4.jpg'
			theImages2[5] = 'images/LeafletImages/Fronts/Heritage/Heritage4.jpg'
			theImages2[6] = 'images/LeafletImages/Fronts/Landscape/Landscape4.jpg'
			// do not edit anything below this line

			var theAlts = new Array() // do not change this
			// To add more image files, continue with the
			// pattern below, adding to the array.
			
			theAlts[0] = 'Peat bog excavations at Belmarsh Prison.'
			theAlts[1] = 'An archaeological watching brief underway in Maidstone, Kent.'
			theAlts[2] = 'A flint biface hand-axe the from Boxgrove excavations, West Sussex.'
			theAlts[3] = 'Fieldwalking.'
			theAlts[4] = 'Excavation of a cremation urn at Hawkinge, Kent.'
			theAlts[5] = 'An MA Student from University College London a records ceramic vessel.'
			theAlts[6] = 'The Hadrian’s Wall Management plan was prepared in consultation with Archaeology South-East (Copyright - Image by Simon Warner).'
			theAlts[7] = 'Historic Building Recording at Chilley Farm, Pevensey.'


			var theAlts2 = new Array() // do not change this
			// To add more image files, continue with the
			// pattern below, adding to the array.
			
			theAlts2[0] = 'Building Recording Services.'
			theAlts2[1] = 'Fieldwork Services.'
			theAlts2[2] = 'Finds and Environmental Specialist Services.'
			theAlts2[3] = 'Forensic Archaeology.'
			theAlts2[4] = 'Geoarchaeological Services.'
			theAlts2[5] = 'Heritage Management Services.'
			theAlts2[6] = 'Landscape Research Services.'
			
			var j = 0
			var p = theImages.length;
			var preBuffer = new Array()
			for (i = 0; i < p; i++){
			   preBuffer[i] = new Image()
			   preBuffer[i].src = theImages[i]
			}
			var whichImage = Math.round(Math.random()*(p-1));
			
			
			
			function showImage(){
			document.write('<img src="'+theImages[whichImage]+'" border="1" alt="'+theAlts[whichImage]+'">');
			}
			
			function showImage2(){
			document.write('<img src="'+theImages2[whichImage]+'" border="0" alt="'+theAlts2[whichImage]+'">');
			}

			//  End -->
		</script>

and its called by the code...

Code:

              <SCRIPT LANGUAGE="JavaScript">
	 		 <!-- Begin
	  			showImage(); 
	 		 //  End -->
	 	    </script>

and..

Code:

              <SCRIPT LANGUAGE="JavaScript">
	 		 <!-- Begin
	  			showImage2(); 
	 		 //  End -->
	 	    </script>

Many thanks in advance.

Hi, I'm currently trying to incorporate several random link generators on one page, each with different links to be directed to. However, at the minute all the links just direct me to the URLs of the most recent random link to be created. If someone could point me in the right direction to fixing this that would be great! The code I am currently using is:


Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<script type="text/javascript">
var movie=new Array()
movie[0]="http://bringbacktheoc.weebly.com"
movie[1]="http://allaboutkarl.weebly.com"
movie[2]="http://recipeshareonline.weebly.com"

function randomLinks(elem)
{
	var randomLink=Math.floor(Math.random()*2);
	elem.href=movie[randomLink];
	elem.target = "_blank";
}
</script>
<a href="#" onclick="randomLinks(this)"<p><font size="20" > 1 </font><p> </a>
</body>
</html>

Thanks!

hi,

I am now building my website as a final project for my year. I am doing graphic design, so the website is actually some kind of portfolio. The idea of this website (which is not yet online) is this : it is some kind of big pasteboard on which i will display all the work i have done in my academy since a couple of years. The pasteboard is at the moment a background image/color field of given dimension (i figure that was the only way to do what i wanted...see further)

Every works/image load on a random place and then can be dragged, and dropped (this part i already figured out). At the moment, every image (for every project), is inside a <div>.

What i need help for is this:
at the moment, my function successfully load 1 element at random position.
I now want this function to work separately, for every <div>, so that every image is randomly placed on load, on the background image (and not the browser window, which is smaller).

Here is the code i have for the moment (sorry for the mess, i really am just beginning! and truely, i don't get half of this, i just know it is working at the moment):


Code:

<head>

	<!--// function random start position-->
<script>

var aDOM = 0, ieDOM = 0, nsDOM = 0; var stdDOM = document.getElementById; if (stdDOM) aDOM = 1; else {ieDOM = document.all; if (ieDOM) aDOM = 1; else { var nsDOM = ((navigator.appName.indexOf('Netscape') != -1) && (parseInt(navigator.appVersion) ==4)); if (nsDOM) aDOM = 1;}}
function xDOM(objectId, wS) { if (stdDOM) return wS ? document.getElementById(objectId).style: document.getElementById(objectId); if (ieDOM) return wS ? document.all[objectId].style: document.all[objectId]; if (nsDOM) return document.layers[objectId]; }

// More Object Functions
function setObjVis(objectID,vis) {var objs = xDOM(objectID,1); objs.visibility = vis;}
function moveObjTo(objectID,x,y) {var objs = xDOM(objectID,1); objs.left = x; objs.top = y;}

// Browser Window Size and Position
function pageWidth() {return window.innerWidth != null? window.innerWidth: document.body != null? document.body.clientWidth:null;}
function pageHeight() {return window.innerHeight != null? window.innerHeight: document.body != null? document.body.clientHeight:null;}
function posLeft() {return typeof window.pageXOffset != 'undefined' ? window.pageXOffset:document.documentElement.scrollLeft? document.documentElement.scrollLeft:document.body.scrollLeft? document.body.scrollLeft:0;}
function posTop() {return typeof window.pageYOffset != 'undefined' ? window.pageYOffset:document.documentElement.scrollTop? document.documentElement.scrollTop: document.body.scrollTop?document.body.scrollTop:0;}

// Random Position Script

var xxx = Math.floor(Math.random()* (pageWidth()-230));
var yyy = Math.floor(Math.random()* (pageHeight()-50));

function start() 
{var x = (posLeft()+xxx) + 'px'; 
var y = (posTop()+yyy) + 'px'; 
moveObjTo('myobj',x,y); 
setObjVis('myobj','visible');}
window.onload = start;
window.onscroll = start;// JavaScript Document

</script>
</head>

<body bgcolor="#9A9B95" background="../website/background.jpg">


<div id="myobj" style="position:absolute" >
	<img src="oblique strategies holes.jpg" width="595" height="842" style="position:absolute" class="dragme"/>
</div>

<div id="div2">
  <img src="oblique strategies choices.jpg" width="842" height="595" style="position:absolute" class="dragme" />
</div>

</body>

now, what i really want is this function to work for every <div>

but i know there are also some flaws (that i'm unfortunately unable to fix myself):
the integers "230 and 50" in the "random position script" should be replaced byt the width and heigh of the image/div (so i guess i should find a function that can get those numbers, name them "ImgWeidth" and "ImgHeigh" so that those integer can be called in this "random position" function.
also, once the div 'myobj' is loaded, randomly, it behaves like if position=fixed (so stays on the spot when i scroll down the window). I think this is because it calculates the position according to the browser window and not my background. this has be fixed, because i don't want all my images to load only in the browser window (but on the whole pasteboard/background image).

well, i guess this is already 3 questions in one. so i will let it like that for the moment. Sorry if i'm saying too much/not enough... beginners mistake!:confused:

thanks in advance for any help you will give me!

***I need to randomise the order of some questions that are in this format. Any ideas? Thank you!***

<CODE>

<!---Question4--->

<form name="form4" method="post" action="">

<h3><p>First One</p></h3>

<p>
<label><input type="radio" name="q4" id="w1" value="1" </label>
<label><input type="radio" name="q4" id="w2" value="2" </label>
<label><input type="radio" name="q4" id="w3" value="2" </label>
</p>

</form

</CODE>

Hey all,

I have a sentence generator running on a site. I am using sort to shuffle the array and pop to return the item. All is well, except Safari does not shuffle the array.

Here is the technique I am using:
Code:

<script type = "text/javascript">
var adj=["invisible", "running", "eating", "mad", "talking", "jumping", "living", "weird", "super"];
for (i = 1; i <= 4; i++){
adj.sort(function(){return Math.round(Math.random());});
document.write( [
 "Bob is" + " " + adj.pop() + "." + "<br>"
]);
}
</script>

In most browsers it generates 4 unique sentences. But in Safari it does not shuffle the array so it will always output:

Bob is super.
Bob is weird.
Bob is living.
Bob is jumping.

Any ideas as to what is happening?

I've a list of questions and i want them to appear in random order but I'm unable to do so at the moment. Is there a way of randomizing them by ID name or similar seem as each Question has Three answers via radio buttons and I've them grouped together by ID name?

What I am doing is working on a shooting app that will randomly call out different targets to shoot. I have it so it will randomly organize them but I need it so it pulls a single one. Any help would be appreciated!

Code:

<html>
<body>

<p id="demo">Click the Button to Call out a target</p>

<button onclick="myFunction()">Call Out</button>

<script type="text/javascript">
function myFunction()
{
var myarray=["red","blue", "yellow", "orange"]
myarray.sort(function() {return 0.5 - Math.random()})
var x=document.getElementById("demo");
x.innerHTML=myarray;
}
</script>

</body>
</html>

Hi,

please look at: http://bit.ly/hO5VBE
then click 'play app match'

you'll see the images are taken from the first 15 in an array, then doubled and randomized.

however, i want the the images taken to be a random selection from an array of 15+ images. so the array would be e.g. 25 images, and i want any 15 of those 25 to be chosen (then doubled and randomized) rather than the first 15 taken.

any help would be great!

James

p.s. if you load the main page while hovering over an icon, its tooltip will be "undefined".. any ideas to stop this?
Thanks!

Hi there!

I'm trying to retrieve the integer value in the string: #10
So I'm using the JS Split function

Code:

<script type="text/javascript">

var str="#10";
document.write(str.split("#"));

</script>

Is the code I'm using, but I keep getting a comma before my result..
in this case, my result is ",10"

What should I do?
Thanks!

Kind Regards
Matthew

P.S. I know that it's an array, but is there still anyway for me to get rid of the comma?

I need help adding an additional function to some existing java script code I already have. In addition to the functions already on this js, I want make it so the banner displays one of the images randomly on each new page load. I have an external js file that this page also links too. Not sure if I need to post that also. I was hoping to just add to this code. Any help is greatly appreciated

<script type="text/javascript" src="js/homepage-banners/simplegallery.js">
</script>

<script type="text/javascript">

var mygallery=new simpleGallery({
wrapperid: "simplegallery1",
dimensions: [250, 180],
imagearray: [
["img/headers/automotive.jpg", "http://www.visionsystem.com/applications/automotive_metal.php", "", ""],
["img/headers/electrical.jpg", "http://www.visionsystem.com/applications/electronics.php", "", ""],
["img/headers/food-packaging.jpg", "http://www.visionsystem.com/applications/food_pharmaceutical.php", "", ""],
["img/headers/medical-pharmaceutical.jpg", "http://www.visionsystem.com/applications/food_pharmaceutical.php", "", ""],
["img/headers/semiconductor.jpg", "http://www.visionsystem.com/applications/electronics.php", "", ""],
["img/headers/automation.jpg", "http://www.visionsystem.com/applications/food_pharmaceutical.php", "", ""]
],

autoplay: [false, 2500, 2],
persist: false,
fadeduration: 500,
oninit:function(){
},
onslide:function(curslide, i){
}
})

</script>

Found this random background img code that works great:



Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
	<title>Untitled</title>
	<script  type="text/javascript">
		function changeImg(imgNumber)	{
			var myImages = ["images/image0.jpg", "images/image1.jpg", "images/image2.jpg", "images/image3.jpg"]; 
			var imgShown = document.body.style.backgroundImage;
			var newImgNumber =Math.floor(Math.random()*myImages.length);
			document.body.style.backgroundImage = 'url('+myImages[newImgNumber]+')';
		}
		window.onload=changeImg;
	</script>
	<style type="text/css">
		.bg {background-attachment:fixed; background-repeat: no-repeat; background-position:0% 0%;}

	</style>
</head>
<body class="bg">
	<p>Some text</p>
	<!-- put a lot text lines here to see that the background stays fixed. -->
	<p>Some text</p>
</body>

The only problem i have is making the background image width and height 100% so that the entire image fills in the screen and fills in on resize of window. Please Help...thanks in advance

Hello,

I have an array containing 100 different values.

How would I randomly pick 25 of them for display?

For now I do:
PHP Code:
for (var i=0; i<markers.length && i<25; i++) {

html += markers[i].name + '<br />';

} 


Which of course returns 25 values but always in the same order which is not what I want.

Thanks in advance!

PS. My array could also contain only 20 values, in which case I would like the function to display the 20 values randomly sorted.

I am taking a Javascript class and the teacher assigned this:

Quote:
Write a script that uses a random number generation to create sentences and name it sentences.html. Use five arrays of strings called: uppercase article (uarticle), noun, verb, lowercase article (larticle), and preposition. You will need to use the correct case for the article arrays.

Create a sentence by selecting a word at random from each array in the following order: uarticle, noun, verb, preposition, larticle, noun. You can find examples of generating random numbers in both Fig. 8.6 (dice-rolling) and Fig. 8.7 (random image) of Chapter 8.

The arrays should be filled at minimum, as follows: the article array(s) should contain the articles: the, a, one, some and any. The noun array should contain the nouns: boy, girl, dog, town and car. The verb array should contain the verbs: drove, jumped, ran, walked, and skipped. The preposition array should contain the prepositions: to, from, over, under and on. If you would like to add more words, adjust the arrays appropriately.

As each word is picked, concatenate it to the previous words in the sentence. The words should be separated by spaces. When the final sentence is output, it should start with a capital letter and end with a period. The program should generate 20 sentences and output them to the screen (document.write or document.writeln). You should use a for loop similarly to the one used in Fig. 8.6 in order to get it to print 20 times.

I haven't gotten to the loop yet, I'm just working on the random sentence first. Here is what I have:

Code:

 <script type="text/javascript"> 
<!-- 

uarticle = new Array("The", "A", "One", "Some", "Any"); 
noun = new Array("boy", "girl", "dog", "town", "car"); 
verb = new Array("drove", "jumped", "ran", "walked", "skipped"); 
larticle = new Array("the", "a", "one", "some", "any"); 
preposition = new Array("to", "from", "over", "under", "on"); 

var rand1 = [Math.floor ( Math.random() * uarticle.length )]; 
var rand2 = [Math.floor ( Math.random() * noun.length )]; 
var rand3 = [Math.floor ( Math.random() * verb.length )]; 
var rand4 = [Math.floor ( Math.random() * larticle.length )]; 
var rand5 = [Math.floor ( Math.random() * preposition.length )]; 

document.write(uarticle[rand2] + " " + noun[rand2] + " " + verb[rand3] + " " + preposition[rand1] + " " + larticle[rand4] + " " + noun[rand2] + "."); 


--> 
</script>

Am I on the right track? How would I loop the sentences using a for statement?