Quelques problèmes avec mon exemple javascript. S'il vous plaît aider

Très bien, alors j'essaie d'obtenir une page pour charger quelques js à la fin de son chargement. Je pense que je l'ai eu, mais maintenant il est dit que je ne reçois pas un numéro avec cette ligne:Quelques problèmes avec mon exemple javascript. S'il vous plaît aider

parseInt(document.getElementById('canvas').style.width);

Il devrait être « 480px » mais il est NaN.

Il a également indiqué que la ligne document.getElementById('ss') était nulle.

est ici la chose complète:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
    <head> 
     <title>Cypri Designs</title>  
     <link href="style.css" rel="stylesheet" type="text/css" /> 
     <link rel="shortcut icon" href="/images/favicon1.ico" type="image/x-icon" />  
     <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> 
     <script type="text/javascript"> 
     <!--  
      //Variables to handle game parameters 
      var gameloopId; 
      var screenWidth; 
      var screenHeight; 
      var gameRunning = false; 
      var ctx; 

      var playerX = 0; 
      var playerY = 0; 

      //Create images 
      var playerImg = new Image(); 


      //Wait for DOM to load and init game 
      window.onload = function(){ 
       init(); 
      }; 

      function init(){ 
       initSettings(); 
       initImages(); 

       //add event handler to surrounding DIV to monitor mouse move and update mushroom's x position 
       /*$("#container").mousemove(function(e){ 
        mushroomX = e.pageX; 
       });*/ 

       //add event handler for clicking on start/stop button and toggle the game play 
       document.getElementById('ss').onclick = function(){ 

        toggleGameplay(); 
       }; 
      } 

      function initSettings() 
      { 
       //Get a handle to the 2d context of the canvas 
       ctx = document.getElementById('canvas').getContext('2d'); 

       //Calulate screen height and width 
       screenWidth = parseInt(document.getElementById('canvas').style.width); 
       screenHeight = parseInt(document.getElementById('canvas').style.height); 

       playerX = 100; 
       playerY = 100; 
      } 

      function initImages(){ 
       playerImg.src = "images/player.png"; 
      } 
      //Main game loop, it all happens here! 
      function gameLoop(){ 

       //Clear the screen (i.e. a draw a clear rectangle the size of the screen) 
       ctx.clearRect(0, 0, screenWidth, screenHeight); 

       ctx.save(); 
       ctx.drawImage(playerImg, 0, 0); 

       ctx.restore(); 
      } 

      //Start/stop the game loop (and more importantly that annoying boinging!) 
      function toggleGameplay() 
      { 
       gameRunning = !gameRunning; 

       if(gameRunning) 
       { 
        clearInterval(gameloopId); 
        gameloopId = setInterval(gameLoop, 10); 
       } 
       else 
       { 
        clearInterval(gameloopId); 
       } 
      } 
     //--> 
     </script> 

    </head> 

    <body> 
     <input id="ss" type="button" value="start/stop" /> 
     <div id="container" style="border:1px solid; cursor:none; width:480px; height:320px;"> 
      <canvas id="canvas" width="480px" height="320px" > 
      Canvas not displaying. 
      </canvas> 
     </div> 
    </body> 
</html>

Source

2011-01-23 CyanPrime

Pour obtenir la largeur, vous devez utiliser la propriété élément au lieu de la propriété de style:

document.getElementById('canvas').offsetWidth

Source

2011-01-23 05:00:36 mVChr

Cela a fonctionné. Merci beaucoup! – CyanPrime

Les propriétés « largeur » et « hauteur » vous avez défini avec la toile ne sont pas des propriétés de style; ce sont des attributs de l'objet canvas. Ils définissent la largeur et la hauteur du système de coordonnées du canevas, et non la hauteur et la largeur de l'affichage.

Le canevas remplira son conteneur parent, soit 480px et 320px. Comme mVChr mentionné, vous pouvez obtenir cela par « offsetWidth » (avec des mises en garde multi-navigateur), ou en utilisant une bibliothèque comme jQuery qui calculera pour vous d'une manière cross-browser:

$("#canvas").width();

Source

2011-01-23 05:02:14 user85461

Votre code a quelques problèmes. Premièrement, ces lignes où vous obtenez la largeur sont la cause de votre résultat NaN.

  screenWidth = parseInt(document.getElementById('canvas').style.width); 
      screenHeight = parseInt(document.getElementById('canvas').style.height);

Les propriétés width et height renvoient respectivement une valeur de chaîne, 480px et 320px. Comme ce sont des valeurs de chaîne, l'appel parseInt retournera NaN car 480px n'est pas un nombre. Je recommande de passer à offsetWidth comme mVCr et user85461 recommandé.

Et je ne vois aucun problème avec la ligne document.getElementById ('ss'). Lorsque je l'ai exécuté, l'événement click a été configuré et déclenché correctement.

Source

2011-01-23 05:10:42

Quelques problèmes avec mon exemple javascript. S'il vous plaît aider

Répondre

Questions connexes