0
我在業餘時間製作了一個基本的平臺遊戲，並且我正在嘗試添加重力。遊戲在畫布中運行，因此我將黑色像素用作實體對象。當他們沒有接觸到一條純黑的線時，我製作的精靈應該會掉下來。爲此，我使用context.getImageData()以及我的精靈對象的x位置，y位置，寬度和高度屬性。當我創建玩家精靈時，我給它指定了10的x位置，10的位置，50的寬度和100的高度：var player = new Sprite (10, 10, 50, 100);我的問題是當我嘗試繪製精靈或使用它的y位置時context.getImageData()它說y的位置是南。下面的代碼是隻有相關變量的簡化版本。Javascript - 對象的屬性具有NaN的值，即使我明確將其賦值爲一個數字值
//-----------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>而且，我真的不知道爲什麼這個版本的作品，而不是我的面前，所以現在我將包括完整版本：
//-----------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>任何啓蒙將不勝感激，爲什麼一個不工作k具有完全相同的值。謝謝。
謝謝。在將來創建對象時，我會記得給出所有的參數。 – ThirtyOddLinesOfCode