0
Je fais un jeu de plateforme de base pendant mon temps libre, et j'essaie actuellement d'ajouter de la gravité. Le jeu s'exécute dans une toile, et j'utilise donc des pixels noirs comme des objets solides. Les sprites que je fais sont censés tomber quand ils n'ont pas contacté une ligne noire solide. Pour ce faire, j'utilise context.getImageData() et les propriétés x, y, width, et height de mes objets sprites. Quand je crée le sprite du joueur, je lui assigne une position x de 10, une position de 10, une largeur de 50 et une hauteur de 100: var player = new Sprite (10, 10, 50, 100); Mon problème est que lorsque j'essaie de dessiner le sprite ou d'utiliser sa position y dans context.getImageData() il dit que la position y est Nan. Le code ci-dessous est une version simplifiée avec seulement des variables pertinentes.Javascript - La propriété d'un objet a la valeur de NaN, même si je lui attribue explicitement une valeur numérique
//-----------SETUP-------------//
//----GLOBAL VARIABLES---//
var gravityValue = 1; \t \t //amount of change that gravity makes per move
var fallBoxThickness = 1; \t //thickness of fall-box check
var canvas = document.getElementById("canvas"); \t \t //get the canvas object
\t canvas.width = 800; \t \t //set the canvas width
\t canvas.height = 600; \t //set the canvas height
var context = canvas.getContext("2d"); \t \t \t \t \t //get the canvas's context, 2d
//--------OBJECTS---------//
function Sprite (x,y,width,height) { \t \t //sprite object
\t //components
\t this.x = x; \t \t \t \t //sprite x position
\t this.y = y; \t \t \t \t //sprite y position
\t this.width = width; \t \t //image width
\t this.height = height; \t //image height
\t this.dx = 0; \t \t \t //sprite x movement
\t this.dy = 0; \t \t \t //sprite y movement
\t this.gravityEnabled = true; \t //allows sprite falling, must be manually disabled
\t
\t //methods
\t this.draw = function() { \t //draw method
\t \t //context.drawImage(this.src, this.x, this.y);
//draws the sprite to the canvas
//it used to do the above, now it outputs it to the output span
document.getElementById("output").innerHTML = this.y;
\t };
\t
\t this.move = function() { \t //move method
\t \t if (this.gravityEnabled === true) { \t //if the sprite can fall
\t \t \t var hit = false; \t \t \t //a hit is not yet detected
\t \t \t var checkSpace = context.getImageData(\t //get pixels to see if the sprite ...
\t \t \t \t this.x, parseInt(this.y + this.height), \t \t //... will hit an object below it's lower edge
\t \t \t \t this.x + this.width, this.y + this.height, + fallBoxThickness);
\t \t \t
\t \t \t var i = 0; \t //set i to 0
\t \t \t while (i < checkSpace.length && hit === false) { \t
\t \t \t \t //while the check hasn't finished and a hit isn't detected
\t \t \t \t if (checkSpace[i] < 5 \t \t //
\t \t \t \t && checkSpace[i+1] < 5 \t //if there is a black pixel
\t \t \t \t && checkSpace[i+2] < 5) { \t //
\t \t \t \t \t hit = true; \t \t //record that there is a hit
\t \t \t \t }
\t \t \t \t i = i + 4; \t //add 4 to i
\t \t \t }
\t \t \t if (hit === false) { \t //if the check didn't hit
\t \t \t \t this.dy += gravityValue; \t //add to the fall of the sprite
\t \t \t } else {
\t \t \t \t this.dy = 0;
\t \t \t }
\t \t }
\t \t this.y += this.dy;
\t };
}
//------------PLAYER CREATION---------//
var player = new Sprite (10, 10, 50, 100); \t //create the player object
//--------FUNCTIONS--------//
function drawCanvas() { \t //draw everything on the canvas
\t player.draw(); \t //draw the player
}
function moveSprites() {
\t player.move();
}
//----------MAIN-----------//
function main() {
\t moveSprites(); \t //move the sprites
\t drawCanvas(); \t //draw the screen
}
setInterval(main,100); \t //run main 10 times a second,
\t \t \t //start the program<title>ptf2</title>
<canvas id="canvas" style="border:1px solid black;"></canvas>
there was images here but the javascript never gets far enough to render them because of the y-position error.<br>
Instead I am just outputting the value of the player sprite's y-position to the span below.<br>
:<span id="output">this is to prevent it from occasionally being undefined</span>Aussi, je ne suis vraiment pas sûr de savoir pourquoi cette version fonctionne au lieu de ce que j'avais avant, maintenant je vais inclure la version complète:
//-----------SETUP-------------//
//----IMAGES----//
document.getElementById("map").style.display = "none"; \t \t //hide the map image
document.getElementById("sprite").style.display = "none"; \t //hide the sprite image
//----GLOBAL VARIABLES---//
var gravityValue = 1; \t \t //amount of change that gravity makes per move
var fallBoxThickness = 1; \t //thickness of fall-box check
var canvas = document.getElementById("canvas"); \t \t //get the canvas object
\t canvas.width = 800; \t \t //set the canvas width
\t canvas.height = 600; \t //set the canvas height
var context = canvas.getContext("2d"); \t \t \t \t \t //get the canvas's context, 2d
//--------OBJECTS---------//
function Sprite (x,y,src,width,height,dx,dy) { \t \t //sprite object
\t //components
\t this.x = x; \t \t \t \t //sprite x position
\t this.y = y; \t \t \t \t //sprite y position
\t this.src = document.getElementById(src); \t //sprite source image
\t this.width = width; \t \t //image width
\t this.height = height; \t //image height
\t this.dx = dx; \t \t \t //sprite x movement
\t this.dy = dy; \t \t \t //sprite y movement
\t this.gravityEnabled = true; \t //allows sprite movement, must be manually disabled
\t
\t //methods
\t this.draw = function() { \t //draw method
\t \t context.drawImage(this.src, this.x, this.y); \t //draws the sprite to the canvas
\t };
\t
\t this.move = function() { \t //move method
\t \t if (this.gravityEnabled === true) { \t //if the sprite can fall
\t \t \t var hit = false; \t \t \t //a hit is not yet detected
\t \t \t var checkSpace = context.getImageData(\t //get pixels to see if the sprite ...
\t \t \t \t this.x, parseInt(this.y + this.height), \t \t //... will hit an object below it's lower edge
\t \t \t \t this.x + this.width, this.y + this.height, + fallBoxThickness);
\t \t \t
\t \t \t var i = 0; \t //set i to 0
\t \t \t while (i < checkSpace.length && hit === false) { \t
\t \t \t \t //while the check hasn't finished and a hit isn't detected
\t \t \t \t if (checkSpace[i] < 5 \t \t //
\t \t \t \t && checkSpace[i+1] < 5 \t //if there is a black pixel
\t \t \t \t && checkSpace[i+2] < 5) { \t //
\t \t \t \t \t hit = true; \t \t //record that there is a hit
\t \t \t \t }
\t \t \t \t i = i + 4; \t //add 4 to i
\t \t \t }
\t \t \t if (hit === false) { \t //if the check didn't hit
\t \t \t \t this.dy += gravityValue; \t //add to the fall of the sprite
\t \t \t } else {
\t \t \t \t this.dy = 0;
\t \t \t }
\t \t }
\t \t this.y += this.dy;
\t };
}
var player = new Sprite (10, 10, "sprite", 50, 100); \t //create the player object
var map = new Sprite (0, 0, "map", 800, 600); \t \t \t //create the map sprite
\t map.gravityEnabled = false; \t \t \t //prevents the map from falling
//--------FUNCTIONS--------//
function drawCanvas() { \t //draw everything on the canvas
\t map.draw(); \t \t //draw the map
\t player.draw(); \t //draw the player
}
function moveSprites() {
\t player.move();
}
//----------MAIN-----------//
function main() {
\t moveSprites(); \t //move the sprites
\t drawCanvas(); \t //draw the screen
\t alert("run");
}
setInterval(main,100); \t //run main 10 times a second,
\t \t \t //start the program<title>ptf2</title>
<canvas id="canvas" style="border:1px solid black;"></canvas>
<img id="map" src = "assets/map03.png">
<img id="sprite"src = "assets/sprite.png">
<script src = "main.js"></script>Tout éclaircissement serait grandement apprécié pour savoir pourquoi l'un ne fonctionne pas k avec exactement les mêmes valeurs. Je vous remercie.
Merci. Je me souviendrai de donner tous les arguments lors de la création d'un objet dans le futur. – ThirtyOddLinesOfCode