Results 1 to 18 of 18

Thread: [RESOLVED] First HTML5 game and having some issues

  1. #1

    Thread Starter
    Super Moderator dday9's Avatar
    Join Date
    Mar 2011
    Location
    South Louisiana
    Posts
    11,715

    Resolved [RESOLVED] First HTML5 game and having some issues

    So I'm trying to create my first HTML5 game, a very simple tic-tac-toe. The way that I want it to look is like this:
    Name:  foo.png
Views: 365
Size:  4.6 KB

    The first issue that I'm having is with the CSS. What's happening is with the grid of tic-tac-toe tiles, they are spaced apart and only one column is showing up:
    Name:  foo1.png
Views: 377
Size:  1.6 KB

    The second issue that I'm having is with the JavaScript. I'm trying to set up the click event for the tic-tac-toe tiles. Whenever I click on the elements, nothing happens which tells me that the click event is not being generated.

    Here are my three code files:
    HTML Code:
    <!DOCTYPE html>
    <html>
    
      <head>
        <link rel="stylesheet" type="text/css" href="index.css">
        <meta content='Dday9' name='author' />
        <meta content='Play Tic-Tac-Toe online with the power of HTML5' name='description' />
        <meta content='tic-tac-toe, html5, free, online, game' name='keywords' />
        <script src="index.js"></script>
        <title>Tic Tac Toe</title>
      </head>
      
      <body>
    
        <!-- Win/Lose information -->
        <div id='summary'>
          <span id='wins'>0 Wins</span>
          <span id='loses'>0 Loses</span>
        </div>
    
        <div id='grid'>  
          <div id='topRow'>
            <canvas class='tic_tac_toe' height='50' id='00' width='50'/>
            <canvas class='tic_tac_toe' height='50' id='01' width='50'/>
            <canvas class='tic_tac_toe' height='50' id='02' width='50'/>
          </div>
        
          <div id='midRow'>
            <canvas class='tic_tac_toe' height='50' id='10' width='50'/>
            <canvas class='tic_tac_toe' height='50' id='11' width='50'/>
            <canvas class='tic_tac_toe' height='50' id='12' width='50'/>
          </div>
        
          <div id='botRow'>
            <canvas class='tic_tac_toe' height='50' id='20' width='50'/>
            <canvas class='tic_tac_toe' height='50' id='21' width='50'/>
            <canvas class='tic_tac_toe' height='50' id='22' width='50'/>
          </div>
        </grid>
      
      </body>
    
    </html>
    Code:
    /* This represents the wins and loses */
    #summary {
    	display: inline-block;
    	width: 100%;
    }
    
    #wins {
    	float: left;
    }
    
    #loses {
    	float: right;
    }
    
    /* This represents the tic-tac-toe tiles */
    
    #grid {
    	display: inline-block;
    	margin: 0px;
    	padding: 0px;
    	width: 100%;
    }
    
    .tic_tac_toe {
    	border: 1px solid black;
    	position: relative;
    }
    
    #topRow {
    	left: 0px;
    	top: 10px;
    }
    
    #midRow {
    	left: 0px;
    	top: 60px;
    }
    
    #botRow {
    	left: 0px;
    	top: 110px;
    }
    
    #01 {
    	left: 60px;
    }
    
    #02 {
    	left: 110px;
    }
    
    #11 {
    	left: 60px;
    }
    
    #12 {
    	left: 110px;
    }
    
    #21 {
    	left: 60px;
    }
    
    #22 {
    	left: 110px;
    }
    Code:
    // Something to keep track of who's turn it is
    var playerTurn;
    
    window.onload = function() {
    	// Setup handlers for the controls
    	// Upper row
    	document.getElementById("00").onclick = canvas_Click(document.getElementById("00"));
    	document.getElementById("01").onclick = canvas_Click(document.getElementById("01"));
    	document.getElementById("02").onclick = canvas_Click(document.getElementById("02"));
    
    	// Middle row
    	document.getElementById("10").onclick = canvas_Click(document.getElementById("10"));
    	document.getElementById("11").onclick = canvas_Click(document.getElementById("11"));
    	document.getElementById("12").onclick = canvas_Click(document.getElementById("12"));
    
    	// Bottom row
    	document.getElementById("20").onclick = canvas_Click(document.getElementById("20"));
    	document.getElementById("21").onclick = canvas_Click(document.getElementById("21"));
    	document.getElementById("22").onclick = canvas_Click(document.getElementById("22"));
    
    	// Start a new game
    	NewGame();
    }
    
    function canvas_Click(sender) {
    	var context = sender.getContext('2d');
    	ctx.fillStyle = "#FF0000";
    	ctx.fillRect(0,0,sender.Width,sender.Height);
    }
    
    function ClearCanvas(sender) {
    	var context = sender.getContext('2d');
    	context.clearRect(0, 0, sender.width, sender.height);
    }
    
    function ChangeTurn() {
    	playerTurn = Not playerTurn;
    }
    
    function NewGame() {
    	playerTurn = True;
    }
    What am I doing wrong because it's not apparent to me.
    "Code is like humor. When you have to explain it, it is bad." - Cory House
    VbLessons | Code Tags | Sword of Fury - Jameram

  2. #2
    PowerPoster Nightwalker83's Avatar
    Join Date
    Dec 2001
    Location
    Adelaide, Australia
    Posts
    13,344

    Re: First HTML5 game and having some issues

    Are you using the tools in the editor to design the layout or just coding the layout from scratch? I would use the tools to first design the layout so it displays correctly then worry about putting it in a cascading style sheet, etc.
    when you quote a post could you please do it via the "Reply With Quote" button or if it multiple post click the "''+" button then "Reply With Quote" button.
    If this thread is finished with please mark it "Resolved" by selecting "Mark thread resolved" from the "Thread tools" drop-down menu.
    https://get.cryptobrowser.site/30/4111672

  3. #3

    Thread Starter
    Super Moderator dday9's Avatar
    Join Date
    Mar 2011
    Location
    South Louisiana
    Posts
    11,715

    Re: First HTML5 game and having some issues

    Right now I'm making everything from scratch. What editor are you referring to?
    "Code is like humor. When you have to explain it, it is bad." - Cory House
    VbLessons | Code Tags | Sword of Fury - Jameram

  4. #4
    PowerPoster Nightwalker83's Avatar
    Join Date
    Dec 2001
    Location
    Adelaide, Australia
    Posts
    13,344

    Re: First HTML5 game and having some issues

    Any WYSIWYG Editor that can handle HTML5. I have never done HTML5 before so I would not know what editors for HTML 5 are available.
    when you quote a post could you please do it via the "Reply With Quote" button or if it multiple post click the "''+" button then "Reply With Quote" button.
    If this thread is finished with please mark it "Resolved" by selecting "Mark thread resolved" from the "Thread tools" drop-down menu.
    https://get.cryptobrowser.site/30/4111672

  5. #5
    PowerPoster kfcSmitty's Avatar
    Join Date
    May 2005
    Posts
    2,248

    Re: First HTML5 game and having some issues

    So a couple issues.

    #1 Canvas needs to have a closing </canvas> tag. You can't use an inline closing (<canvas />).
    #2 The canvas is, by default, display: inline and vertical-align: baseline. Setting it to vertical-align:top or vertical-align:bottom will remove your extra space at the bottom

    I'm not sure how to get rid of the right-side padding, but if you float the canvases left, and make their wrapper div 160px, it will achieve the effect you're looking for.

    I would imagine #1 is the reason your javascript isn't working

    I would also get rid of the styling for each wrapper div. It is redundant to hard-code their position from the top. Simply float the elements and with the width of the parent set, it will wrap them appropriately.

    So my end result was:
    HTML:
    Code:
    <!DOCTYPE html>
    <html>
        
        <head>
            <link rel="stylesheet" type="text/css" href="index.css">
                <meta content='Dday9' name='author' />
                <meta content='Play Tic-Tac-Toe online with the power of HTML5' name='description' />
                <meta content='tic-tac-toe, html5, free, online, game' name='keywords' />
                <script src="index.js"></script>
                <title>Tic Tac Toe</title>
                </head>
        
        <body>
            
            <!-- Win/Lose information -->
            <div id='summary'>
                <span id='wins'>0 Wins</span>
                <span id='loses'>0 Loses</span>
            </div>
            
            <div id='grid'>
                <div>
                    <canvas id='00' width='50' height='50'></canvas>
                    <canvas id='01' width='50' height='50'></canvas>
                    <canvas id='02' width='50' height='50'></canvas>
                </div>
                
                <div>
                    <canvas id='10' width='50' height='50'></canvas>
                    <canvas id='11' width='50' height='50'></canvas>
                    <canvas id='12' width='50' height='50'></canvas>
                </div>
                
                <div>
                    <canvas id='20' width='50' height='50'></canvas>
                    <canvas id='21' width='50' height='50'></canvas>
                    <canvas id='22' width='50' height='50'></canvas>
                </div>
            </div>
        </body>
    </html>
    CSS:
    Code:
    /* This represents the wins and loses */
    #summary {
    	display: inline-block;
    	width: 100%;
    }
    
    #wins {
    	float: left;
    }
    
    #loses {
    	float: right;
    }
    
    /* This represents the tic-tac-toe tiles */
    
    #grid {
    	display: inline-block;
    	margin: 0px;
    	padding: 0px;
    	width: 100%;
    }
    
    #grid div{
      width: 160px;
    }
    
    #grid canvas{
      width: 50px;
      height: 50px;
      border: 1px solid black;
      float: left;
    }
    Last edited by kfcSmitty; Jul 26th, 2014 at 01:34 PM.

  6. #6
    PowerPoster Nightwalker83's Avatar
    Join Date
    Dec 2001
    Location
    Adelaide, Australia
    Posts
    13,344

    Re: First HTML5 game and having some issues

    Quote Originally Posted by kfcSmitty View Post
    So a couple issues.
    I would remove

    HTML Code:
    width='50' height='50'
    from the canvas tags to so the above tags would become

    HTML Code:
    <canvas id='22'></canvas>
    the height and width information could go in the style section.

    Edit:

    HTML:

    HTML Code:
    <!DOCTYPE html>
    <html>
        
        <head>
            <link rel="stylesheet" type="text/css" href="index.css">
                <meta content='Dday9' name='author' />
                <meta content='Play Tic-Tac-Toe online with the power of HTML5' name='description' />
                <meta content='tic-tac-toe, html5, free, online, game' name='keywords' />
                <script src="index.js"></script>
                <title>Tic Tac Toe</title>
                </head>
        
        <body>
            
            <!-- Win/Lose information -->
            <div id='summary'>
                <span id='wins'>0 Wins</span>
                <span id='loses'>0 Loses</span>
            </div>
            
            <div id='grid'>
                <div>
                    <canvas id='00'></canvas>
               <canvas id='01'></canvas>
                <canvas id='02'></canvas>
                </div>
                
                <div>
                  <canvas id='10'></canvas>
                  <canvas id='11'></canvas>
                  <canvas id='12'></canvas>
                </div>
                
                <div>
                    <canvas id='20'></canvas>
                 <canvas id='21'></canvas>
                  <canvas id='22'></canvas>
                </div>
            </div>
        </body>
    </html>
    CSS:

    Code:
    ]
    <style>
            /* This represents the wins and loses */
            #summary {
            	display: inline-block;
            	width: 100%;
            }
    
            #wins {
            	float: left;
            }
    
            #loses {
            	float: right;
            }
    
            /* This represents the tic-tac-toe tiles */
    
            #grid {
            	display: inline-block;
            	margin: 0px;
            	padding: 0px;
            	width: 100%;
            }
    
            #grid div{
              width: 160px;
            }
    
            #grid canvas{
              width: 50px;
              height: 50px;
              border: 1px solid black;
              float: left;
            }
    </style>
    Last edited by Nightwalker83; Jul 26th, 2014 at 08:47 PM. Reason: Adding more!
    when you quote a post could you please do it via the "Reply With Quote" button or if it multiple post click the "''+" button then "Reply With Quote" button.
    If this thread is finished with please mark it "Resolved" by selecting "Mark thread resolved" from the "Thread tools" drop-down menu.
    https://get.cryptobrowser.site/30/4111672

  7. #7
    PowerPoster kfcSmitty's Avatar
    Join Date
    May 2005
    Posts
    2,248

    Re: First HTML5 game and having some issues

    Quote Originally Posted by Nightwalker83 View Post
    I would remove

    HTML Code:
    width='50' height='50'
    from the canvas tags to so the above tags would become
    Actually, from what I've read, you can't do that with canvas. While using CSS to set the width and height makes it look proper, you need to explicitly set the width and height per canvas object otherwise, programmatically, things won't work as expected.

    If what I found was wrong, then you are correct, you should set it via CSS only.

  8. #8
    King of sapila
    Join Date
    Oct 2006
    Location
    Greece
    Posts
    6,597

    Re: First HTML5 game and having some issues

    Is there an MS MVC WYSIWYG Editor? Lol.
    ἄνδρα μοι ἔννεπε, μοῦσα, πολύτροπον, ὃς μάλα πολλὰ
    πλάγχθη, ἐπεὶ Τροίης ἱερὸν πτολίεθρον ἔπερσεν·

  9. #9
    Frenzied Member tr333's Avatar
    Join Date
    Nov 2004
    Location
    /dev/st0
    Posts
    1,605

    Re: First HTML5 game and having some issues

    FYI: http://dochub.io/#html/canvas
    The displayed size of the canvas can be changed using a stylesheet. The image is scaled during rendering to fit the styled size.
    Example: http://codepen.io/anon/pen/Gclmw
    Last edited by tr333; Jul 27th, 2014 at 07:57 PM.
    CSS layout comes in to the 21st century with flexbox!
    Just another Perl hacker,

  10. #10
    PowerPoster kfcSmitty's Avatar
    Join Date
    May 2005
    Posts
    2,248

    Re: First HTML5 game and having some issues

    Ah, what I read is actually the same thing, but a little different.

    If you only use CSS, it will set the canvas width and height to match the CSS. However, if you set the size on the canvas itself as well as through CSS, it scales the content.

    Example: http://jsfiddle.net/9bheb/5/

  11. #11
    PowerPoster Nightwalker83's Avatar
    Join Date
    Dec 2001
    Location
    Adelaide, Australia
    Posts
    13,344

    Re: First HTML5 game and having some issues

    Quote Originally Posted by kfcSmitty View Post
    Actually, from what I've read, you can't do that with canvas. While using CSS to set the width and height makes it look proper, you need to explicitly set the width and height per canvas object otherwise, programmatically, things won't work as expected.
    The code I posted seemed to display correctly even though I removed the high and width data from the tags only leaving the style data in place.
    when you quote a post could you please do it via the "Reply With Quote" button or if it multiple post click the "''+" button then "Reply With Quote" button.
    If this thread is finished with please mark it "Resolved" by selecting "Mark thread resolved" from the "Thread tools" drop-down menu.
    https://get.cryptobrowser.site/30/4111672

  12. #12

    Thread Starter
    Super Moderator dday9's Avatar
    Join Date
    Mar 2011
    Location
    South Louisiana
    Posts
    11,715

    Re: First HTML5 game and having some issues

    Sorry for the late reply, I've been visiting the in-laws and haven't had time to work on my little project. Here is my updated code:
    HTML Code:
    <!DOCTYPE html>
    <html>
    
    	<head>
    		<link rel="stylesheet" type="text/css" href="index.css">
    		<meta content='Dday9' name='author' />
    		<meta content='Play Tic-Tac-Toe online with the power of HTML5' name='description' />
    		<meta content='tic-tac-toe, html5, free, online, game' name='keywords' />
    		<script src="index.js"></script>
    		<title>Tic Tac Toe</title>
    	</head>
    
    	<body>
    
    		<!-- Win/Lose information -->
    		<div id='summary'>
    			<h3 id='wins'><span id='playerWins'></span> Wins</h3>
    			<h3 id='loses'><span id='cpuWins'></span> Loses</h3>
    		</div>
    
    		<!-- Tic-Tac-Toe grid -->
    		<div id='grid'>
    			<div>
    				<canvas class='column0 row0' id='00'></canvas>
    				<canvas class='column1 row0' id='01'></canvas>
    				<canvas class='column2 row0' id='02'></canvas>
    			</div>
    
    			<div>
    				<canvas class='column0 row1' id='10'></canvas>
    				<canvas class='column1 row1' id='11'></canvas>
    				<canvas class='column2 row1' id='12'></canvas>
    			</div>
    
    			<div>
    				<canvas class='column0 row2' id='20'></canvas>
    				<canvas class='column1 row2' id='21'></canvas>
    				<canvas class='column2 row2' id='22'></canvas>
    			</div>
    		</div>
    	</body>
    </html>
    Code:
    /* This represents the wins and loses */
    #summary {
    	display: inline-block;
    	width: 100%;
    }
    
    #wins, #loses {
    	float: left;
    	padding-left: 10px;
    }
    
    /* This represents the tic-tac-toe tiles */
    #grid {
    	display: inline-block;
    	margin: 0px;
    	padding: 0px;
    	width: 100%;
    }
    
    
    #grid div{
    	width: 160px;
    }
    
    #grid canvas{
    	width: 50px;
    	height: 50px;
    	float: left;
    }
    
    /* Columns */
    .column0
    {
    	border-bottom-style: none;
    	border-bottom-width: 0px;
    	border-left-style: none;
    	border-left-width: 0px;
    	border-right-style: solid;
    	border-right-width: 1px;
    	border-top-style: none;
    	border-top-width: 0px;
    }
    
    .column1 {
    	border-bottom-style: none;
    	border-bottom-width: 0px;
    	border-left-style: solid;
    	border-left-width: 1px;
    	border-right-style: solid;
    	border-right-width: 1px;
    	border-top-style: none;
    	border-top-width: 0px;
    }
    
    .column2 {
    	border-bottom-style: none;
    	border-bottom-width: 0px;
    	border-left-style: solid;
    	border-left-width: 1px;
    	border-right-style: none;
    	border-right-width: 0px;
    	border-top-style: none;
    	border-top-width: 0px;
    }
    
    /* Rows */
    .row0 {
    	border-bottom-style: solid;
    	border-bottom-width: 1px;
    	border-left-style: none;
    	border-left-width: 0px;
    	border-right-style: none;
    	border-right-width: 0px;
    	border-top-style: none;
    	border-top-width: 0px;
    }
    
    .row1 {
    	border-bottom-style: solid;
    	border-bottom-width: 1px;
    	border-left-style: none;
    	border-left-width: 0px;
    	border-right-style: none;
    	border-right-width: 0px;
    	border-top-style: solid;
    	border-top-width: 1px;
    }
    
    .row2 {
    	border-bottom-style: none;
    	border-bottom-width: 0px;
    	border-left-style: none;
    	border-left-width: 0px;
    	border-right-style: none;
    	border-right-width: 0px;
    	border-top-style: solid;
    	border-top-width: 1px;
    }
    It works for the most part with the exception of the styling of the grid. I've tried to change it to where instead of the tic-tac-toe grid having borders on all sides, it actually resembles a tic-tac-toe grid. What's happening is that it only shows the borders for the row classes, however whenever I comment out the row classes in my CSS file, the column classes do style correctly. Why would it behave like that?
    Last edited by dday9; Jul 28th, 2014 at 10:20 AM.
    "Code is like humor. When you have to explain it, it is bad." - Cory House
    VbLessons | Code Tags | Sword of Fury - Jameram

  13. #13
    PowerPoster kfcSmitty's Avatar
    Join Date
    May 2005
    Posts
    2,248

    Re: First HTML5 game and having some issues

    You're overcomplicating things by trying to always add borders to sections. Just add them where you need them.

    Try this:

    Code:
    <!DOCTYPE html>
    <html>
    
    	<head>
    		<link rel="stylesheet" type="text/css" href="index.css">
    		<meta content='Dday9' name='author' />
    		<meta content='Play Tic-Tac-Toe online with the power of HTML5' name='description' />
    		<meta content='tic-tac-toe, html5, free, online, game' name='keywords' />
    		<script src="index.js"></script>
    		<title>Tic Tac Toe</title>
    	</head>
    
    	<body>
    
    		<!-- Win/Lose information -->
    		<div id='summary'>
    			<h3 id='wins'><span id='playerWins'></span> Wins</h3>
    			<h3 id='loses'><span id='cpuWins'></span> Loses</h3>
    		</div>
    
    		<!-- Tic-Tac-Toe grid -->
    		<div id='grid'>
    			<div>
    				<canvas id='00'></canvas>
    				<canvas class='top-middle' id='01'></canvas>
    				<canvas id='02'></canvas>
    			</div>
    
    			<div>
    				<canvas class='middle' id='10'></canvas>
    				<canvas class='middle centre' id='11'></canvas>
    				<canvas class='middle' id='12'></canvas>
    			</div>
    
    			<div>
    				<canvas id='20'></canvas>
    				<canvas class='bottom-middle' id='21'></canvas>
    				<canvas id='22'></canvas>
    			</div>
    		</div>
    	</body>
    </html>
    Code:
    /* This represents the wins and loses */
    #summary {
    	display: inline-block;
    	width: 100%;
    }
    
    #wins, #loses {
    	float: left;
    	padding-left: 10px;
    }
    
    /* This represents the tic-tac-toe tiles */
    #grid {
    	display: inline-block;
    	margin: 0px;
    	padding: 0px;
    	width: 100%;
    }
    
    
    #grid div{
    	width: 160px;
    }
    
    #grid canvas{
    	width: 50px;
    	height: 50px;
    	float: left;
    }
    
    .centre{
      border: 1px solid black;
    }
    
    .top-middle{
      border-left: 1px solid black;
      border-right: 1px solid black;
    }
    
    .middle{
      border-top: 1px solid black;
      border-bottom: 1px solid black;
    }
    
    .bottom-middle{
      border-left: 1px solid black;
      border-right: 1px solid black;
    }

  14. #14

    Thread Starter
    Super Moderator dday9's Avatar
    Join Date
    Mar 2011
    Location
    South Louisiana
    Posts
    11,715

    Re: First HTML5 game and having some issues

    Quote Originally Posted by kfcSmitty View Post
    You're overcomplicating things by trying to always add borders to sections. Just add them where you need them.

    Try this:
    Whenever I try that, the grid doesn't appear at all.
    "Code is like humor. When you have to explain it, it is bad." - Cory House
    VbLessons | Code Tags | Sword of Fury - Jameram

  15. #15
    PowerPoster kfcSmitty's Avatar
    Join Date
    May 2005
    Posts
    2,248

    Re: First HTML5 game and having some issues

    When you try with my example, the grid doesn't show at all?

    If not, can you give me your JavaScript (assuming it has changed from above)? It may be doing something funky.

  16. #16

    Thread Starter
    Super Moderator dday9's Avatar
    Join Date
    Mar 2011
    Location
    South Louisiana
    Posts
    11,715

    Re: First HTML5 game and having some issues

    Oui sure:
    Code:
    // Globals
    var playerTurn;
    var playerWins;
    var cpuWins;
    
    window.onload = function() {
    	// Set the default values for the globals(except for playerTurn, we do that in NewGame())
    	playerWins = 0;
    	cpuWins = 0;
    
    	// Update the statistics
    	UpdateStats();
    	
    	// Setup handlers for the controls
    	// Upper row
    	document.getElementById("00").onclick = canvas_Click;
    	document.getElementById("01").onclick = canvas_Click;
    	document.getElementById("02").onclick = canvas_Click;
    
    	// Middle row
    	document.getElementById("10").onclick = canvas_Click;
    	document.getElementById("11").onclick = canvas_Click;
    	document.getElementById("12").onclick = canvas_Click;
    
    	// Bottom row
    	document.getElementById("20").onclick = canvas_Click;
    	document.getElementById("21").onclick = canvas_Click;
    	document.getElementById("22").onclick = canvas_Click;
    
    	// Start a new game
    	NewGame();
    }
    
    function canvas_Click() {
    	var sender = document.getElementById(this.id);
    	var context = sender.getContext("2d");
    	context.fillStyle = "#FF0000";
    	context.fillRect(0, 0, sender.Width, sender.Height);
    }
    
    function ClearCanvas(id) {
    	var sender = document.getElementById(id)
    	var context = sender.getContext("2d");
    	context.clearRect(0, 0, sender.width, sender.height);
    }
    
    function ChangeTurn() {
    	// set playerTurn to what it is not
    	playerTurn = !playerTurn;
    }
    
    function UpdateStats() {
    	document.getElementById("playerWins").innerHTML=playerWins;
    	document.getElementById("cpuWins").innerHTML=cpuWins;
    }
    
    function NewGame() {
    	// Player1 always goes first
    	playerTurn = True;
    	
    	// Update the statistics
    	UpdateStats();
    	
    	// Clear any existing canvases
    	ClearCanvas("00")
    	ClearCanvas("01")
    	ClearCanvas("02")
    	ClearCanvas("10")
    	ClearCanvas("11")
    	ClearCanvas("12")
    	ClearCanvas("20")
    	ClearCanvas("21")
    	ClearCanvas("22")
    }
    "Code is like humor. When you have to explain it, it is bad." - Cory House
    VbLessons | Code Tags | Sword of Fury - Jameram

  17. #17
    PowerPoster kfcSmitty's Avatar
    Join Date
    May 2005
    Posts
    2,248

    Re: First HTML5 game and having some issues

    Even with the JavaScript added in, it still works for me in all browsers. Can you show me a screenshot of what the code I gave above looks like in your browser?

  18. #18

    Thread Starter
    Super Moderator dday9's Avatar
    Join Date
    Mar 2011
    Location
    South Louisiana
    Posts
    11,715

    Re: First HTML5 game and having some issues

    That's odd... I just ran it again and now it works flawlessly. I must have forgotten to either save my HTML or CSS file
    "Code is like humor. When you have to explain it, it is bad." - Cory House
    VbLessons | Code Tags | Sword of Fury - Jameram

Posting Permissions

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



Click Here to Expand Forum to Full Width