2017-10-13 2 views
-1

Je suis un tutoriel pour remplir une toile de couleur. Aucune coloration n'est en train de se produire. Serait-ce parce que la fonction update() et la fonction draw() sont vides?Toile non coloriée

<!DOCTYPE html> 
<html> 
    <head> 
     <title>Basic Example</title> 
     <script src="BasicExample.js"> 
     </script> 
    </head> 
    <body> 
     <div id="gameArea"> 
      <canvas id="myCanvas" width="800" height="480"></canvas> 
     </div> 
    </body> 
</html> 

Le fichier javascript

var canvas = undefined; 
var canvasContext = undefined; 

function start() { 
    canvas = document.getElementById("myCanvas"); 
    canvasContext = canvas.getContext("2d"); 
    gameLoop(); 
} 

document.addEventListener('DOMContentLoaded', start); 

fuction update() { 
} 

function draw() { 
} 

function gameLoop() { 
    canvasContext.fillStyle = "blue"; 
    canvasContext.fillRect(0, 0, canvas.width, canvas.height); 
    update(); 
    draw(); 
    window.setTimeout(gameLoop, 100/60); 
} 
+2

Typo: 'fuction'. Utilisez la [console du navigateur (outils de développement)] (https://webmasters.stackexchange.com/q/8525) (appuyez sur 'F12') et lisez toutes les erreurs. – Xufox

Répondre

0

Votre mise à jour auj doit être mise à jour de la fonction -> faute de frappe sur le mot "fonction"

Voir le ci-dessous html/script corrigé:

<html> 
<head> 
<meta charset="utf-8"> 
<title>Untitled Document</title> 
</head> 

<body> 
<div id="gameArea"> 
    <canvas id="myCanvas" width="800" height="480"></canvas> 
</div> 
<script> 
var canvas = undefined; 
var canvasContext = undefined; 

function start() { 
    canvas = document.getElementById("myCanvas"); 
    canvasContext = canvas.getContext("2d"); 
    gameLoop(); 
} 

document.addEventListener('DOMContentLoaded', start); 

function update() { 
} 

function draw() { 
} 

function gameLoop() { 
    canvasContext.fillStyle = "blue"; 
    canvasContext.fillRect(0, 0, canvas.width, canvas.height); 
    update(); 
    draw(); 
    window.setTimeout(gameLoop, 100/60); 
} 
</script> 
</body> 
</html>