Aide Jeux Pricross js/html
samie fout
Bonjour,
Voila je rencontre un petit problème avec mon code.
Ce que je fais
je cherche a developpez un jeux picross et pour sa il me faut un quadrillage
en HTML
<!DOCTYPE html>
<html>
<head>
<title>Picross: Mohamed & Justin</title>
<meta charset="utf-8">
<meta name="authors" content="Mohamed, Justin">
<meta http-equiv="refresh" content="15">
<script type="text/javascript" src="js/picross.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
crossorigin="anonymous">
<link rel="stylesheet" href="Header.css">
</head>
<body onload="draw();">
<header>
<div class="Header-Design">
<div class="col-5 h1 container">Picross Game</div>
<div class="col-5 h3 container">Simplon Chambéry #promo1</div>
<div class="col-5 h3 container">étudiant 1: Mohamed étudiant 2: justin</div>
</div>
</header>
<main>
<canvas id="myCanvas" width="500" height="500"></canvas>
</main>
<link rel="stylesheet" type="text/css" href="css/picross.css">
<footer></footer>
</body>
</html>
//////////////////////////////////////////
////////////////////////////////////
en JS
//on recupére l'élement mycanvas
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext('2d');
var x = canvas.width/2;
var y = canvas.height-30;
var dx = 2;
var dy = -2;
var brickRowCount = 5;
var brickColumnCount = 5;
var brickWidth = Titanic_Width;
var brickHeight = Titanic_Height;
var brickPadding = 5;
var brickOffsetTop = 50;
var brickOffsetLeft = 50;
var bricks = [];
for(var c=0; c<brickColumnCount; c++) {
bricks[c] = [];
for(var r=0; r<brickRowCount; r++) {
bricks[c][r] = { x:0, y:0};
}
}
function drawbricks(){
for(var c=0; c<brickColumnCount; c++) {
for(var r=0; r<brickRowCount; r++){
var brickX = (c*(brickWidth+brickPadding))+brickOffsetLeft;
var brickY = (r*(brickHeight+brickPadding))+brickOffsetTop;
bricks[c][r].x = brickX;
bricks[c][r].y = brickY;
ctx.beginPath();
ctx.rect(brickX, brickY, brickWidth, brickHeight);
ctx.fillStyle = "#0095DD";
ctx.fill();
ctx.closPath();
}
}
}
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
drawBricks();
}
setInterval(draw, 10);Ce que je veux
J'aimerais obtenir mon cadrillage
Ce que j'obtiens
voila se que me retourne ma console web
TypeError: canvas is null[En savoir plus] picross.js:4:5
TypeError: ctx is undefined[En savoir plus] picross.js:41:1
J'ais chercher dou venais le probléme mais je ne le vois pas je definis bien le contexte de mon canva comme 2d mais lui me di qu'ill est null merci d'avance pour votre aide