last day (15 days later) » 

5:26 AM
0
Q: how to make a tic tac toe game using only context.save/context.restore, if statements, canvas and animations?

AdelLetter O Letter X how to make a tic tac toe game using only context.save/context.restore, if statements, canvas and animations? I'm also trying to make it so that if image X is displayed in box 1, image O can't be displayed on the same box so you can't cheat. I do not know how to prevent someo...

 
Also, I just want to know how to do it with pictures, and the codes im using, so no arrays or anything if its possible, if not, its fine
 
The question is a bit broad. You may want to break it down into smaller pieces for each problem you're trying to solve.
 
how do you make it so that when you display X, you are not allowed to display O in that spot?
 
Hi, you have to keep track of the state of the game. Without doing that... you would have to analyse the canvas to find out what you have already drawn. It's possible but clearly not the easiest and better way. Also, some possible improvements, depending on your constraints: factoring aaaaall those functions (using a keyboard map), initializing only one X and O images, then using them in several locations, etc.
 
I am new with coding and I do not know to do this, can you help me?
 
5:26 AM
Yes, but what exactly?
 
so I want it so when I display the image X, I am not allowed to display image O on that spot, but everytime I try to do something similar, it does not work, my brain is exploding
 
OK. How do you want to proceed? By keeping track of the state of the game? (easier, and most games are made this way) Or by analyzing the canvas to find out if something has already been drawn onto it? (more difficult, and... well, unless it's for a specific challenge, why?)
 
so how my code is right now, is when I press a number, it displays either X or O, I want it so when X is on square 1, im not allowed to display O on square 1. The numbers at the top of the keyboard are my X's, and the numberpad are my O's
So technically I want to know how to analyze the canvas to find out if something has alreeady been drawn onto it, and if something has been drawn onto it, i'm not allowed to draw something ontop of it unless if I press the restart button( which resets the canvas).
 
Basically, you would have to get all the pixels, to loop through them and find out if some are drawn. If yes, and if the drawn pixel are located where the X pixels should be, then it's an X. But it's complicated, for nothing. What you could do is use a second canvas that will be used to keep track of the state of the game, since you don't want to declare any other variables/arrays.
So, create a second canvas the size of your grid. For a tic tac toe, it means a 3x3 canvas (9 pixels). Then, each time you draw on your first canvas, you can also draw on your second canvas. For example, if you draw an O at the position 1, then you can draw a red pixel at the position 1 on the second canvas. If it's a X at the 6th position, then draw a blue pixel at the 6th position on the second canvas. Finally, each time you want to draw a letter, read the second canvas, get the pixel at the right position, and get its color: red: already a O, blue: already an X, blank: nothing yet.
Of course, the second canvas isn't displayed. The user will only see the main canvas. You may need that: developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial‌​/…
 
what is the easier way that you were talking about?
 
5:26 AM
It's to have an Array that contains what letter can be found at any position, something like: ['X', undefined, undefined, 'O', 'O', ...]. Then, instead of reading another canvas, you just have to check if there is a letter at the position 1 for example ('array[0]')
 
I don't know how to write the second canvas code, how do I write it for my code above?
 
You created a canvas. Write a second canvas under it, with memoryCanvas (or whatever) as an id. Then, create 2 variabled memoryCanvas and memoryContext, the same way you did before.
 
so I just rewrite <canvas id="canvas" width="400" height="400"></canvas> but where do I put the var memoryCanvas and memoryContext? Sorry if this is a stupid question. I need your help step by step, sorry
 
Don't worry. In your HTML, you wrote <canvas id="canvas" width="400" height="400"></canvas>, and something like <canvas id="memoryCanvas" width="3" height="3"></canvas>. In your JS, you wrote: var canvas = document.getElementById("canvas"); var context = canvas.getContext('2d');, simply add: var memoryCanvas = document.getElementById("memoryCanvas"); var memoryContext = memoryCanvas.getContext('2d');
 
Oh I just realised what you said, but after I do the whole canvas stuff, what do I do next?
 
5:26 AM
OK, then, after you draw a letter with this context.drawImage(lettreO, 145,40,110,101); (O letter at the 8th position), draw a red pixel on the second canvas, at the 8th position as well (2, 1)
 
When I do the second canvas, my whole program is empty, but the second canvas is right beside the first canvas
 
Yes, you should see a small camvas right beside the first one. What do you mean by empty?
 
my First Canvas goes empty, I cant see my tic tac toe lines or anything, and my buttons dont work
is there a way to send you all my files so you can have an easier understanding on whats going on with my codes?
 
Yeah, create a jsfiddle jsfiddle.net and send me the link
 
how do I put my pictures in so you can have my X png and my O jpg ?
 
5:26 AM
First remove the <script type="text/javascript"> at the beginning and the </script> at the end of the JavaScript panel. Then, according to the console, it doesn't work because it can't find the second canvas. In your HTML: memorycanvas != in your JS: memoryCanvas (c != C). For the pictures, I replaced with ones I found online.
 
so, what do I do?
Where do I put memorycanvas != and memoryCanvas (c != C)
 
No I mean your id is different in the HTML and in the JS, you made a typing mistake
 
So how do I make it when I press picture X, picture O can't be displayed on the same spot as the picture X?
 
First, have your fixed the typo? Is the grid displaying now?
 
Yes sir
 
5:30 AM
OK. Then, each time you draw a X, draw a blue square in the 2nd canvas as well. Same position for the X and for the blue square.
 
how would I write that?
would that be in a function?
 
First, no function. To draw a square, you'll need that: developer.mozilla.org/en-US/docs/Web/API/…
 
I don't really understand that website
its hard for me to understand english
and even if it was in a different language, its a bit complicated for me right now
 
what's your native language ?
 
french
I just realised that you sent a different link
let me have a look
 
5:35 AM
ok
 
oh I think I understand this
Wait
what does Const do?
 
const et let fonctionnent comme var, cela permet de déclarer une variable. Une variable déclarée avec var sera globale au scope, avec let, elle sera locale au bloc, idem pour const, sauf que cette dernière ne sera pas modifiable (constante)
 
oh ok
so the only difference is that it cant be modified?
You can write it in english
I can still understand most of the stuff in english
 
ok. Only for const. You can edit the value of a let variable. In fact, you can stop using var and only use let instead
 
so when I draw my rectangle
do you want me to copy the rectangle from the website?
 
5:43 AM
Almost. We created
oops
Almost. We created a 3x3 canvas. When you draw a letter at the position 1, you'll draw a 1x1 square at the same position (just different canvas)
 
where do I put the code?
because when I put it here :
var canvas = document.getElementById("canvas");
var context = canvas.getContext('2d');
var memoryCanvas = document.getElementById("memorycanvas");
var memoryContext = memoryCanvas.getContext('2d');
context.fillStyle = 'green';
context.fillRect(20, 10, 150, 100);
it draws a rectangle in my first canvas and turns everything into green
 
Just under context.drawImage(lettreO, 145,40,110,101); You can write memoryContext.fillStyle = 'red'; memoryContext.fillRect(0, 1, 1, 1); // (0,1) = 8th position, (1,1) = 1x1 size
You have to use memoryContext instead of context to draw onto the second canvas
 
Oh right
that's in my function. so its ok to write it inside my function?
 
yes
 
ok
is there a change I have to see in the 2nd canvas or no?
 
5:52 AM
There is, but since it's small, it won't be easy to see.
 
oh ok
After that, what do I do?
 
You need to create a function which will return the color of a specific pixel of the second canvas. Something like getPixelColor(context, x, y)
it will return 'red', 'blue', or '' if there is nothing
In this section: A color picker
 
I don't understand what it is doing
I'm getting confused a bit
 
In this function :
function pick(event) {
var x = event.layerX;
var y = event.layerY;
var pixel = ctx.getImageData(x, y, 1, 1);
var data = pixel.data;
var rgba = 'rgba(' + data[0] + ', ' + data[1] +
', ' + data[2] + ', ' + (data[3] / 255) + ')';
color.style.background = rgba;
color.textContent = rgba;
}
we do lots of things but
the main thing is that we get a pixel
var pixel = ctx.getImageData(x, y, 1, 1);
we get the data of the image of size 1x1 at x, y
 
do you want me to copy what you wrote?
 
6:00 AM
this yeah: var pixel = ctx.getImageData(x, y, 1, 1);
 
where do you want me to write that?
at the top of my script?
 
inside a function getPixelColor(context, x, y) {...here...}
 
function getPixelColor(context, x, y) {
var pixel = ctx.getImageData(x, y, 1, 1);
}
like that?
do I have to put var x = event.layerX;
var y = event.layerY;
 
almost, but you wrote both context and ctx, but it's the same variable. Choose either ctx or context
no no, not the rest
What we're aiming to do:
Get the pixel
Get the color of this pixel
Return it
 
so how do you do that?
var data = pixel.data;
var rgba = 'rgba(' + data[0] + ', ' + data[1] +
', ' + data[2] + ', ' + (data[3] / 255) + ')';
color.style.background = rgba;
color.textContent = rgba;
this part?
 
6:05 AM
partly!
In fact, the pixel is like this:
pixel = { data: [red, green, blue, alpha] }
so first, let's get the data: var data = pixel.data;
then, you'll have data[0] = red, data[1] = green, etc
 
then data[2] = blue and I do it for alpha also?
 
exactly. But you don't need everything. We only use the red for O and the blue for X (you can change if you want). So only get the red and the blue
(alpha is transparency, just in case)
 
oh ok
function getPixelColor(context, x, y) {
var pixel = context.getImageData(x, y, 1, 1);
var data = pixel.data;
pixel = { data: [red, green, blue, alpha] }
data[0] = red, data[1] = blue, data [2] = alpha,
}
like this?
or did I do something wrong?
 
oops, this: pixel = { data: [red, green, blue, alpha] } was just to explain the structure of it to you, don't write it
So as you can see, red is at index 0, green at index 1, blue at index 2 and alpha at index 3. So create a variable 'red' to get the red value, and a variable blue to get the blue value. We don't care about the rest
 
oh ok
 
6:13 AM
function getPixelColor(context, x, y) {
var pixel = context.getImageData(x, y, 1, 1);
var data = pixel.data;
var red = ...;
var blue = ...;
}
 
function getPixelColor(context, x, y) {
var pixel = context.getImageData(x, y, 1, 1);
var data = pixel.data;
var red = data[0];
var blue = data[1];


}
this good yes?
what do I do next?
 
almost, beware: green is at index 1 and blue is at index 2
You want blue
 
oh I thought if i didnt use green I can just put blue as index 1
oh good to know
ok, now what do I do?
 
not here, the format is fixed.
now
you have 2 variables, red and blue.
They represent the quantity of red and blue in the pixel's color
if you have a red pixel, it will be: 255, 0, 0 (for red, green, blue)
A green pixel: 0, 255, 0
A violet pixel: 255, 0, 255
Since we use only two primary colors, each of them will be either 0 or 255
 
oh so its if like im adding red with blue to make purple
 
6:23 AM
so, if red = 255, that means that blue = 0 and that the pixel is red, so return 'red'. If red = 0, check that blue = 255. I so, returns 'blue', else returns '' (so no color)
 
violet*
 
exactly
violet, purple, same :)
 
so now I have to do an if statement?
 
yes
with the returns
 
how do I write that
with the red and blue
 
6:25 AM
if (red === 255) {
return 'red'
}
otherwise if blue equals 255, return 'blue'
else ''
 
function getPixelColor(context, x, y) {
var pixel = context.getImageData(x, y, 1, 1);
var data = pixel.data;
var red = data[0];
var blue = data[2];
if (red === 255) {
return 'red'
} else
(blue === 255)

return 'blue'


}
so like that?
 
You will get an error. For the 'if else blue', you forgot the 'if'
 
oh
ok
if (red === 255) {
return 'red'
} else if
(blue === 255)

return 'blue'
like that?
 
yes, just with curly braces:
if (red === 255) {
return 'red';
} else if (blue === 255) {
return 'blue';
}
Tip: always use curly braces {}, even if sometimes it's tempting not to, it will save you from lots of bugs. And don't forget the semicolons ;
 
ok
 
6:34 AM
Finally, add return ''; at the end: if we don't find red or blue, then we return an empty string to mean that there is no color
 
so after return 'blue';
}
I put return?
 
yes
 
ok
function getPixelColor(context, x, y) {
var pixel = context.getImageData(x, y, 1, 1);
var data = pixel.data;
var red = data[0];
var blue = data[2];
if (red === 255) {
return 'red';
} else if
(blue === 255){
return 'blue';
}
return;

}
like that?
 
return '';
 
oh ok
Is there one more step before it can work?
 
6:38 AM
now your function is finished:


function getPixelColor(context, x, y) {
var pixel = context.getImageData(x, y, 1, 1);
var data = pixel.data;
var red = data[0];
var blue = data[2];
if (red === 255) {
return 'red';
} else if
(blue === 255){
return 'blue';
}
return '';
}
but you need to know what to do with it
 
how is this function going to help me prevent someone to not be able to display an X on and O and vice versa?
 
create a function which takes a color such as 'red', 'blue' or '' as a parameter and returns a letter, 'O', 'X' or ''
It will inform you if someone already played at this position
 
'red' = lettreO
and
'blue' = lettreX
?
 
no not the letterOX, just the string 'O' or 'X'
 
Wait
how to write this function
 
6:44 AM
just conditions
like what you first wrote in the message you removed
 
so If ('red' = 'O') {
I dont know what to write after that
oh I dont have to use if statements
Wait
I do have to use if statement
but what do I write after If ('red' = 'O') {
 
yes
oh
you have to compare a color parameter to 'red', or 'blue', or ''
 
If ('red' = 'O') {
 
then to return 'O', 'X' or '' respectively
 
If ('red' = 'O') { lettreO }
 
6:49 AM
something like this:

the function: getLetterAt(context, x, y) {
var pixelColor = getPixelColor(context, x, y);
if (pixelColor === 'red') {
return 'O'
}
}
 
oh
I got it completely wrong haha
do I do else if for the blue?
 
it's fine :)
yes
and for the empty string ''
 
function getLetterAt(context, x, y) {
var pixelColor = getPixelColor(context, x, y);
if (pixelColor === 'red') {
return 'O'
} else if (pixelColor === 'blue'){
return 'X'
}
}
like tihs?
sorry for the inconvenience, but can we maybe continue this later today?
its 3 am and I have to get up at 6 am for school
 
function getLetterAt(context, x, y) {
var pixelColor = getPixelColor(context, x, y);
if (pixelColor === 'red') {
return 'O';
} else if (pixelColor === 'blue'){
return 'X';
}
return '';
}
oh
no problem
 
But is there more things I have to write other than that code?
 
6:54 AM
yes, we did something like 60%
 
oh ok
I will see you later
 
get color
get letter
compare to check if already letter
memorize letter
something like this
ok
 
Thank you for your time and patience
 
ur welcome
 

last day (15 days later) »