-
Jul 24th, 2014, 03:09 PM
#1
[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:
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:
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.
-
Jul 25th, 2014, 03:35 AM
#2
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
-
Jul 25th, 2014, 08:26 AM
#3
Re: First HTML5 game and having some issues
Right now I'm making everything from scratch. What editor are you referring to?
-
Jul 25th, 2014, 08:25 PM
#4
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
-
Jul 26th, 2014, 01:29 PM
#5
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.
-
Jul 26th, 2014, 08:26 PM
#6
Re: First HTML5 game and having some issues
Originally Posted by kfcSmitty
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
-
Jul 27th, 2014, 09:53 AM
#7
Re: First HTML5 game and having some issues
Originally Posted by Nightwalker83
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.
-
Jul 27th, 2014, 05:38 PM
#8
Re: First HTML5 game and having some issues
Is there an MS MVC WYSIWYG Editor? Lol.
ἄνδρα μοι ἔννεπε, μοῦσα, πολύτροπον, ὃς μάλα πολλὰ
πλάγχθη, ἐπεὶ Τροίης ἱερὸν πτολίεθρον ἔπερσεν·
-
Jul 27th, 2014, 07:20 PM
#9
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.
-
Jul 27th, 2014, 08:25 PM
#10
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/
-
Jul 27th, 2014, 09:56 PM
#11
Re: First HTML5 game and having some issues
Originally Posted by kfcSmitty
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
-
Jul 28th, 2014, 10:12 AM
#12
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.
-
Jul 28th, 2014, 10:57 AM
#13
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;
}
-
Jul 28th, 2014, 11:00 AM
#14
Re: First HTML5 game and having some issues
Originally Posted by kfcSmitty
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.
-
Jul 28th, 2014, 11:04 AM
#15
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.
-
Jul 28th, 2014, 11:06 AM
#16
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")
}
-
Jul 28th, 2014, 11:19 AM
#17
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?
-
Jul 28th, 2014, 11:22 AM
#18
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
Posting Permissions
- You may not post new threads
- You may not post replies
- You may not post attachments
- You may not edit your posts
-
Forum Rules
|
Click Here to Expand Forum to Full Width
|