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 someone to put image O on image X, vice versa. Please someone show me a way to prevent people to place an O on top of an X and vice versa.
This is what I have so far
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="U1TS.css">
</head>
<body>
<canvas id="canvas" width="400" height="400"></canvas>
<br>
<button onclick="Restart()">Restart</button>
<script type="text/javascript">
var canvas = document.getElementById("canvas");
var context = canvas.getContext('2d');
var c1 = 1
var c2 = 1
var c3 = 1
var c4 = 1
var c5 = 1
var c6 = 1
var c7 = 1
var c8 = 1
var c9 = 1
var cup1 = 2
var cup2 = 2
var cup3 = 2
var cup4 = 2
var cup5 = 2
var cup6 = 2
var cup7 = 2
var cup8 = 2
var cup9 = 2
//Line horizontale et verticale
context.beginPath();
context.moveTo(40,145);
context.lineTo(360,145);
context.lineWidth = 5
context.lineCap = 'round';
context.stroke();
context.beginPath();
context.moveTo(40,260);
context.lineTo(360,260);
context.lineCap = 'round';
context.stroke();
context.beginPath();
context.moveTo(260,40);
context.lineTo(260,360);
context.lineCap = 'round';
context.stroke();
context.beginPath();
context.moveTo(140,40);
context.lineTo(140,360);
context.lineCap = 'round';
context.stroke();
context.font = "italic bold 30pt Calibri"
context.fillText("1", 75, 325);
context.fillText("2", 190, 325);
context.fillText("3", 305, 325);
context.fillText("4", 75, 215);
context.fillText("5", 190, 215);
context.fillText("6", 305, 215);
context.fillText("7", 75, 105);
context.fillText("8", 190, 105);
context.fillText("9", 305, 105);
function Restart(){
document.location.reload(true);
}
document.onkeydown = Nombre;
Nombreup1 = 49; Nombreup2 = 50; Nombreup3 = 51;
Nombreup4 = 52; Nombreup5 = 53; Nombreup6 = 54;
Nombreup7 = 55; Nombreup8 = 56; Nombreup9 = 57;
Nombre7 = 103; Nombre8 = 104; Nombre9 = 105;
Nombre4 = 100; Nombre5 = 101; Nombre6 = 102;
Nombre3 = 99; Nombre2 = 98; Nombre1 = 97;
function Nombre(e){
toucheCourante = e.keyCode;
if (toucheCourante == Nombre7){
lettreO7();
} else if (toucheCourante == Nombre8){
lettreO8();
} else if (toucheCourante == Nombre9){
lettreO9();
} else if (toucheCourante == Nombre6){
lettreO6();
} else if (toucheCourante == Nombre5){
lettreO5();
} else if (toucheCourante == Nombre4){
lettreO4();
} else if (toucheCourante == Nombre3){
lettreO3();
} else if (toucheCourante == Nombre2){
lettreO2();
} else if (toucheCourante == Nombre1){
lettreO1();
}
/////////////////////////////////////////
if (toucheCourante == Nombreup7){
lettreX7();
} else if (toucheCourante == Nombreup8){
lettreX8();
} else if (toucheCourante == Nombreup9){
lettreX9();
} else if (toucheCourante == Nombreup6){
lettreX6();
} else if (toucheCourante == Nombreup5){
lettreX5();
} else if (toucheCourante == Nombreup4){
lettreX4();
} else if (toucheCourante == Nombreup3){
lettreX3();
} else if (toucheCourante == Nombreup2){
lettreX2();
} else if (toucheCourante == Nombreup1){
lettreX1();
}
}
function lettreO1()
{
lettreO = new Image();
lettreO.src = 'O.jpg';
lettreO.onload = function(){
context.drawImage(lettreO, 40, 265,95,93);
}
}
function lettreX1()
{
lettreX = new Image();
lettreX.src = 'X.PNG';
lettreX.onload = function(){
context.drawImage(lettreX, 40, 265,95,93);
}
}
function lettreO2()
{
lettreO = new Image();
lettreO.src = 'O.jpg';
lettreO.onload = function(){
context.drawImage(lettreO, 145, 265,110,93);
}
}
function lettreX2()
{
lettreX = new Image();
lettreX.src = 'X.PNG';
lettreX.onload = function(){
context.drawImage(lettreX, 145, 265,110,93);
}
}
function lettreO3()
{
lettreO = new Image();
lettreO.src = 'O.jpg';
lettreO.onload = function(){
context.drawImage(lettreO, 265, 265,95,93);
}
}
function lettreX3()
{
lettreX = new Image();
lettreX.src = 'X.PNG';
lettreX.onload = function(){
context.drawImage(lettreX, 265, 265,95,93);
}
}
function lettreO4()
{
lettreO = new Image();
lettreO.src = 'O.jpg';
lettreO.onload = function(){
context.drawImage(lettreO, 40,149,95,107);
}
}
function lettreX4()
{
lettreX = new Image();
lettreX.src = 'X.PNG';
lettreX.onload = function(){
context.drawImage(lettreX, 40,149,95,107);
}
}
function lettreO5()
{
lettreO = new Image();
lettreO.src = 'O.jpg';
lettreO.onload = function(){
context.drawImage(lettreO, 145,149,110,107);
}
}
function lettreX5()
{
lettreX = new Image();
lettreX.src = 'X.PNG';
lettreX.onload = function(){
context.drawImage(lettreX, 145,149,110,107);
}
}
function lettreO6()
{
lettreO = new Image();
lettreO.src = 'O.jpg';
lettreO.onload = function(){
context.drawImage(lettreO, 265,149,95,107);
}
}
function lettreX6()
{
lettreX = new Image();
lettreX.src = 'X.PNG';
lettreX.onload = function(){
context.drawImage(lettreX, 265,149,95,107);
}
}
function lettreO7()
{
lettreO = new Image();
lettreO.src = 'O.jpg';
lettreO.onload = function(){
context.drawImage(lettreO, 40,40,95,101);
}
}
function lettreX7()
{
lettreX = new Image();
lettreX.src = 'X.PNG';
lettreX.onload = function(){
context.drawImage(lettreX, 40,40,95,101);
}
}
function lettreO8()
{
lettreO = new Image();
lettreO.src = 'O.jpg';
lettreO.onload = function(){
context.drawImage(lettreO, 145,40,110,101);
}
}
function lettreX8()
{
lettreX = new Image();
lettreX.src = 'X.PNG';
lettreX.onload = function(){
context.drawImage(lettreX, 145,40,110,101);
}
}
function lettreO9()
{
lettreO = new Image();
lettreO.src = 'O.jpg';
lettreO.onload = function(){
context.drawImage(lettreO, 265,40,95,101);
}
}
function lettreX9()
{
lettreX = new Image();
lettreX.src = 'X.PNG';
lettreX.onload = function(){
context.drawImage(lettreX, 265,40,95,101);
}
}
Aucun commentaire:
Enregistrer un commentaire