www.webdeveloper.com
Results 1 to 1 of 1

Thread: Golf program with Javascript

  1. #1
    Join Date
    Nov 2010
    Posts
    21

    Smile Golf program with Javascript

    I almost got part of this one program to work. It is of a golf sign with a golf ball moving across and landing in the word Golf into the "o"
    When the ball lands in the o the sign of "your online source of golf equipment" appears after ball has landed and grows in size.

    right now the ball is what I have but I can not get my sign to appear.

    I use 2 external files

    I will post all the coding here

    here is my main file I worked on

    this is my golfpage.htm file

    Code:
    <html>
    <head>
    <!--
    New Perspectives on JavaScript
    Tutorial 4
    Case Problem 1

    The Golf Page
    Author:
    Date: 05 December 2010

    Filename: golfpage.htm
    Supporting files: ball.gif, clouds.jpg, golf.js, golfer.gif, styles.css
    -->
    <title>The Golf Page</title>
    <link href="styles.css" rel="stylesheet" type="text/css" />
    <script src="golf.js" type="text/javascript"></script>

    <script type="text/javascript">

    var x = new Array(-395, -389, -383, -377, -371, -365, -359, -353, -346,
    -340, -334, -328, -322, -316, -310, -304, -297, -291, -285, -279, -273,
    -267, -261, -255, -248, -242, -236, -230, -224, -218, -212, -206, -199,
    -193, -187, -181, -175, -169, -163, -157, -150, -144, -138, -132, -126,
    -120, -114, -108, -101, -95, -93, -91, -88, -86, -83, -81, -78, -76, -73,
    -71, -69, -66, -64, -61, -59, -56, -54, -51, -49, -47, -44, -42, -39, -37,
    -34, -32, -29, -27, -24, -22, -20, -17, -15, -12, -10, -7, -5, -2, 0);

    var y = new Array(-300, -300, -300, -299, -298, -297, -296, -294, -292,
    -290, -288, -285, -282, -279, -276, -272, -268, -264, -260, -255, -250,
    -245, -240, -234, -228, -222, -216, -209, -202, -195, -188, -180, -172,
    -164, -156, -147, -138, -129, -120, -110, -100, -90, -80, -69, -58, -47,
    -36, -24, -12, 0, -5, -10, -14, -18, -22, -25, -29, -32, -34, -37, -39,
    -41, -43, -45, -46, -47, -48, -48, -48, -48, -48, -48, -47, -46, -45, -43,
    -42, -40, -37, -35, -32, -29, -26, -23, -19, -15, -11, -6, 0);

    var index=0;
    var lastindex=x.length-1;
    // var fs=getFontSize("slogan");
    function moveBall() {

    if (index <= lastindex) {
    placeIt("Ball", x[index], y[index]);
    index++;
    setTimeout("moveBall()", 5);
    } else {
    setFontSize("slogan", 25);
    }
    }

    </script>

    </head>
    <body onload="moveBall()">
    <div id="Golfer" ><img src="golfer.gif" width="40px" alt="" /></div>
    <div id="Title">
    THE G<div style="display: inline; position: relative; background-color: black;"
    ><img id="Ball" src="ball.gif" alt="O"
    /></div>LF PAGE
    </div>
    <div id="box"
    style="">
    <span id="slogan">
    Your Online Source of Golf Equipment
    </span>
    </div>
    </body>
    </html>
    Here is one external file where I made some functions this is the golf.js file
    Code:
    New Perspectives on JavaScript
    Tutorial 4
    Case Problem 1

    The Golf Page
    Name:
    Date: 05 december 2010

    Function List:
    placeIt(id, x, y)
    Places the id object at the coordinates (x, y)

    showIt(id)
    Shows the id object by setting the object visibility to "visible"

    getFontSize(id)
    Retrieves the font size of the id object

    setFontSize(id, fs)
    Sets the font size of the id object to fs

    changeFontSize(id, dfs)
    Changes the font size of the id object by dfs
    */



    function showIt(id) {
    object=document.getElementById(id);
    object.style.visibility="visible";
    }

    function placeIt(id, x, y) {
    // Places the id object at the coordinates (x,y)
    object = document.getElementById(id);
    object.style.left = x + "px";
    object.style.top = y + "px";
    }

    function getFontSize(id) {
    // Returns the font size of the object with the value id
    object = document.getElementById(id);
    size = parseInt(object.style.fontSize);
    return (size);
    }
    function setFontSize(id, ptsize) {
    // Sets the font size of the object with the value id
    object = document.getElementById(id);
    object.style.fontSize = ptsize + "pt";
    }
    function changeFontSize(id, dfs) {
    // Returns the font size of the object with the value id
    fs = getFontSize(id);
    setFontSize(id, fs + dfs);
    }

    Here is the styles.css page

    Code:
    /*
    New Perspectives on JavaScript
    Tutorial 4
    Case Problem 1
    Filename: styles.css

    This file contains styles used in the golfpage.htm file
    */

    body {font-family:Arial, Helvetica, sans-serif; font-size: 18pt;
    color:blue; background-image: url(clouds.jpg)}

    #Title {position: absolute; left:395px; top:260px}

    #Ball {position:relative; top:0px; left:0px}

    #Ball img {border-width: 0px}

    #box {width:600px; height: 250px;
    border-style:solid; border-width:1 4 4 1; border-color:blue;
    background-color:rgb(0,255,0); text-align: center}

    #slogan {visibility: hidden; position: relative; top: 50px;
    color:black; font-family: Times New Roman, Times, serif;
    font-style:italic; font-weight:bold}

    What i am not able to get work i think is to call the changeFontSize() function to increase the size of the "sign"

    also an if statement to test value of fs variable is less then equal to 20

    how do i get my sign to appear on the output?
    thanks

    made function at the end

    in the golf.htm file after the moveBall function ()

    Code:
    function growText() {
    getFontSize("slogan", 25);
     if (fs <= 20) {
          } else {
    		changeFontSize("slogan"+1);
        	getFontSize("slogan", 20);
       }
    }
    but it is still not working, what seems to be situation

    i am to make a growText function

    so to grow text from 0 to 21 points.
    need to call cgetfontSize function as parameter to store value in variable named "fs"

    create an if statement that tests value of fs variable is less then or equal to 20
    if condition is met call change FontSize() function to increase size of slogan objact by 1
    rerun growText function after delay of 20 milliseconds.

    so if that is what is need what did i do wrong?
    Last edited by worldtraveller; 12-07-2010 at 02:18 PM.

Thread Information

Users Browsing this Thread

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

Tags for this Thread

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