www.webdeveloper.com
Results 1 to 2 of 2

Thread: Adding links/events to images in javascript

Hybrid View

  1. #1
    Join Date
    May 2013
    Posts
    1

    Adding links/events to images in javascript

    Ok let me preface this by stating that I know virtually nothing about Javascript - I just completed codeacademy.com course and it has not done nearly enough to teach me.

    Onto my program - I am trying to develop the game 1-4, 24 (Here's a video example of the game) using Javascript. For those of you
    who do not know the game is a dice game where you roll a total of 6, six-sided dice and try to get the highest number possible, the maximum being 24. You may roll the dice as many times as you like, but each time you roll you must take at least one die. In addition, you need a 1 and a 4 to qualify. The 1 and the 4 do not count to your total score. So, a perfect roll looks like 1, 4, 6, 6, 6, 6... 1 and 4 qualify you. 6 + 6 + 6 + 6 = 24. If you do not qualify you automatically lose the game.

    So far in my script I have been able to randomly generate six dice and produce images of those dice. I cannot however, figure out how to make these images 'clickable' so that the player of the game can choose to 'keep' a dice. I have tried using onClick but am either using it incorrectly or it is just the wrong thing to use.

    Here's my code so far:

    Code:
    <html>
    <body>
    
    <script>
    
    // Reusable function to display images
    
    function image(src, width, height, hspace, link) {
    var img = document.createElement("img");
    img.src = src;
    img.width = width;
    img.height = height;
    img.hspace = hspace;
    
    document.body.appendChild(img);
    
    };
    
    
    // set diceLeft
    
    diceLeft = 6;
    
    // create an array called rolls
    
    var rolls = [];
    
    // rolls dice based on diceLeft
    
    function rollDice() {
    
    	// rolls the amount of dice left (i.e. 6), then stores dice in rolls
    	for (var i = 0; i < diceLeft; i++) {
    		rolls[i] = 1 + Math.floor(Math.random() * 6);
    			// displays an image based on the die rolls
    			switch(rolls[i]) {
    			case 1: image("dice-1.png", 100, 100, 5);
    			break;
    			case 2: image("dice-2.png", 100, 100, 5);
    			break;
    			case 3: image("dice-3.png", 100, 100, 5);
    			break;
    			case 4: image("dice-4.png", 100, 100, 5);
    			break;
    			case 5: image("dice-5.png", 100, 100, 5);
    			break;
    			case 6: image("dice-6.png", 100, 100, 5);
    			break;
    
    			}
    		}
    
    
    }
    
    rollDice();

  2. #2
    Join Date
    Jun 2004
    Location
    Portsmouth UK
    Posts
    2,681
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    </head>
    
    <body>
    <html>
    <body>
    <div id="tst" ></div>
    Image index<input id="ip" />
    Image Value<input id="iv" />
    
    <script>
    
    // Reusable function to display images
    function keep(img) {
     for (var i=[],v=[],z0=0;z0<image.ary.length;z0++){
      if (image.ary[z0][0]==img&&!image.ary[z0][3]){
       image.ary[z0][3]=true;
      }
      if (image.ary[z0][3]){
       i.push(image.ary[z0][1]);
       v.push(image.ary[z0][2]);
      }
     }
     document.getElementById('ip').value=i;
     document.getElementById('iv').value=v;
    
    }
    
    function image(src, width, height, hspace, link,nu) {
    var img = document.createElement("img");
    img.src = src;
    img.width = width;
    img.height = height;
    img.hspace = hspace;
    image.ary.push([img,link,nu]);
    img.onmouseup=function(){ keep(this); }
    document.getElementById('tst').appendChild(img);
    
    };
    
    
    // set diceLeft
    
    diceLeft = 6;
    
    // create an array called rolls
    
    var rolls = [];
    
    // rolls dice based on diceLeft
    
    function rollDice() {
    document.getElementById('tst').innerHTML='';
        image.ary=[];
    	// rolls the amount of dice left (i.e. 6), then stores dice in rolls
    	for (var i = 0; i < diceLeft; i++) {
    		rolls[i] = 1 + Math.floor(Math.random() * 6);
    			// displays an image based on the die rolls
    			switch(rolls[i]) {
    			case 1: image("http://www.vicsjavascripts.org.uk/StdImages/1.gif", 100, 100, 5,i,1);
    			break;
    			case 2: image("http://www.vicsjavascripts.org.uk/StdImages/2.gif", 100, 100, 5,i,2);
    			break;
    			case 3: image("http://www.vicsjavascripts.org.uk/StdImages/3.gif", 100, 100, 5,i,3);
    			break;
    			case 4: image("http://www.vicsjavascripts.org.uk/StdImages/4.gif", 100, 100, 5,i,4);
    			break;
    			case 5: image("http://www.vicsjavascripts.org.uk/StdImages/5.gif", 100, 100, 5,i,5);
    			break;
    			case 6: image("http://www.vicsjavascripts.org.uk/StdImages/6.gif", 100, 100, 5,i,6);
    			break;
    
    			}
    		}
    
    
    }
    
    rollDice();
    
    </script>
    </body>
    
    </html>
    Vic

    God loves you and will never love you less.

    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles