xx = new XY ? and NaN ?

vmars316 · April 19, 2016

Hello & Thanks ,

1) Are the following objects set up correctly ?

function startGame() { 

var Thrower = function () {
         this.idTag = 'thrower';
         this.x = 0;
         this.y = canvas.height - 64;
         this.width= 64;
         this.height = 64;
         this.speedX = 1;
         this.speedY = 0;
		 this.visible = true;
         this.direction = 1;
		 this.moveMe = false ; 
         this.update = function() { 
//                this.x = this.x + (this.speedX * this.directionX);   // always = +1 or -1 }	
                thrower.x = this.x + (this.speedX * this.directionX);   // always = +1 or -1 }	
                this.moveMe = false;  // thrower.moveMe = false;
				}
    }
//
    thrower = new Thrower();
        thrower.idTag = 'thrower';
        thrower.x = 0;
        thrower.y = canvas.height - 64;
        thrower.width= 64;
        thrower.height = 64;
        thrower.speedX = 1;
        thrower.speedY = 0;
		thrower.visible = true ;
        thrower.direction = 1;
        thrower.moveMe = true ; 

    myGameArea.start();
}

2) Why am I getting a 'NaN' from :

/*120*/			document.getElementById("thrower.xywh").innerHTML = thrower.x;

See full code (178 lines) below:

Sorry to say , neither <> icon nor [ code][ /code], are working for me , is there a limit on how many <> in one Post ?

<!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0"/>

<meta charset="utf-8" />

<title>move pieThrower</title>

<style>

canvas {

border:1px solid #d3d3d3;

background-color: #f1f1f1;

}

#assets {

visibility: hidden;

}

</style>

</head>

<body onload="startGame()">

fromWhere= <span id="fromWhere">fromWhere</span><br>

idTag= <span id="idTag">idTag</span><br>

this.idTag= <span id="thisIdTag">this.idTag</span><br>

this.visible= <span id="this.visible"> this.visible</span><br>

this.tripsMax= <span id="this.tripsMax"> this.tripsMax</span><br>

this.tripsCnt= <span id="this.tripsCnt"> this.tripsCnt</span><br>

this.directionX= <span id="this.directionX"> this.directionX</span><br>

this.x= <span id="this.x"> this.x</span><br>

thrower x,y,w,h= <span id="thrower.xywh">thrower.x,y,w,h</span><br>

<div align="center">

<table style="text-align: left; width: 100%;" border="0"

cellpadding="2" cellspacing="2">

<tbody>

<tr>

<td style="width:70%";><p id="traceMsg">traceLog goes here:</p>

</td>

<td style="width:30%";> <canvas id="canvas" width="300" height="300"></canvas>

</td>

</tr>

</tbody>

</table>

</div>

<div id="assets">

<img id="truth01" src="sprites/truth01.png" width="64" height="64" />

<img id="truth02" src="sprites/truth02.png" width="64" height="64" />

<img id="lies01" src="sprites/lies01.png" width="64" height="64" />

<img id="lies02" src="sprites/lies02.png" width="64" height="64" />

<img id="cowpie" src="sprites/cowpie.png" width="32" height="32" />

<img id="thrower" src="sprites/thrower.png" width="64" height="64" />

<audio id="closeDoor" src="sounds/CloseDoor.ogg"></audio>

</div>

<script type='text/javascript'>

//

var oneTraceLine = ""; var traceYESorNO = false; var updateFor1stTime = 0;

var fromWhere = "fromWhere"; var timesInTripsCk=0; var visible = true;

var thisx=0; var tripsMax=0; priorTripsMax = 0;

var thisIdTag; var holdThrower_x = 0;

var idTag = "truth01"; var idTagTh = "thrower";

var tripsCnt=0; var directionX=1 ; var addit = 0;

//

canvas = document.getElementById("canvas"); // get the canvas

ctx = canvas.getContext('2d'); // create canvas Context;

var targetImgsCnt = 0; var idTag = "truth01"; var totalTrips = 0;

var targetImgs = [document.getElementById("truth01"),

document.getElementById("lies01"), //,

document.getElementById("truth02"),

document.getElementById("lies02"),

document.getElementById("thrower")

] ;

//

//

function startGame() {

var Thrower = function () {

this.idTag = 'thrower';

this.x = 0;

this.y = canvas.height - 64;

this.width= 64;

this.height = 64;

this.speedX = 1;

this.speedY = 0;

this.visible = true;

this.direction = 1;

this.moveMe = false ;

this.update = function() {

// this.x = this.x + (this.speedX * this.directionX); // always = +1 or -1 }

thrower.x = this.x + (this.speedX * this.directionX); // always = +1 or -1 }

this.moveMe = false; // thrower.moveMe = false;

}

}

//

thrower = new Thrower();

thrower.idTag = 'thrower';

thrower.x = 0;

thrower.y = canvas.height - 64;

thrower.width= 64;

thrower.height = 64;

thrower.speedX = 1;

thrower.speedY = 0;

thrower.visible = true ;

thrower.direction = 1;

thrower.moveMe = true ;

//

myGameArea.start();

}

//

function updateGameArea() {

myGameArea.clear();

targetImgsCnt = 4;

if(thrower.visible) {

if(thrower.moveMe) {thrower.update();}

ctx.drawImage(targetImgs[targetImgsCnt], thrower.x, thrower.y, thrower.width, thrower.height);

/*120*/ document.getElementById("thrower.xywh").innerHTML = thrower.x;

}

}

//

var myGameArea = {

start : function() {

thrower.moveMe = false ;

interval = setInterval(updateGameArea, 5);

// updateGameArea();

},

clear : function() {

ctx.clearRect(0, 0, canvas.width, canvas.height);

},

stop : function() {

clearInterval(this.interval);

}

}

//

document.addEventListener("keydown", keyDownHandler, false);

document.addEventListener("keyup", keyUpHandler, false);

document.addEventListener("mousemove", mouseMoveHandler, false);

function keyDownHandler(e) {

if(e.keyCode == 39 || event.keyCode == 68) {

// rightPressed = true;

alert("keyDownHandler: rightPressed");

thrower.direction = 1;

thrower.moveMe = true;

}

else if(e.keyCode == 37 || event.keyCode == 65) {

// leftPressed = true;

alert("keyDownHandler: leftPressed");

thrower.direction = -1;

thrower.moveMe = true;

}

}

function keyUpHandler(e) {

if(e.keyCode == 38 || event.keyCode == 87) {

rightPressed = false;

}

else if(e.keyCode == 40 || event.keyCode == 83) {

leftPressed = false;

}

}

function mouseMoveHandler(e) {

var relativeX = e.clientX - canvas.offsetLeft;

// alert("function mouseMoveHandler(e)");

}

//

//

</script>

</body>

</html>

Thanks

Edited April 19, 2016 by vmars316

vmars316 · April 19, 2016

Sorry to say , neither < > nor [ code][ /code] are working for me . Is there a limit on how many < > Post ?

<!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0"/>

<meta charset="utf-8" />

<title>move pieThrower</title>



<style>

canvas {

border:1px solid #d3d3d3;

background-color: #f1f1f1;

}

#assets {

visibility: hidden;

}

</style>

</head>

<body onload="startGame()">

fromWhere= <span id="fromWhere">fromWhere</span><br>

idTag= <span id="idTag">idTag</span><br>

this.idTag= <span id="thisIdTag">this.idTag</span><br>

this.visible= <span id="this.visible"> this.visible</span><br>

this.tripsMax= <span id="this.tripsMax"> this.tripsMax</span><br>

this.tripsCnt= <span id="this.tripsCnt"> this.tripsCnt</span><br>

this.directionX= <span id="this.directionX"> this.directionX</span><br>

this.x= <span id="this.x"> this.x</span><br>

thrower x,y,w,h= <span id="thrower.xywh">thrower.x,y,w,h</span><br>

<div align="center">

<table style="text-align: left; width: 100%;" border="0"

cellpadding="2" cellspacing="2">

<tbody>

<tr>

<td style="width:70%";><p id="traceMsg">traceLog goes here:</p>

</td>

<td style="width:30%";> <canvas id="canvas" width="300" height="300"></canvas>

</td>

</tr>

</tbody>

</table>

</div>

<div id="assets">

<img id="truth01" src="sprites/truth01.png" width="64" height="64" />

<img id="truth02" src="sprites/truth02.png" width="64" height="64" />

<img id="lies01" src="sprites/lies01.png" width="64" height="64" />

<img id="lies02" src="sprites/lies02.png" width="64" height="64" />

<img id="cowpie" src="sprites/cowpie.png" width="32" height="32" />

<img id="thrower" src="sprites/thrower.png" width="64" height="64" />

<audio id="closeDoor" src="sounds/CloseDoor.ogg"></audio>

</div>

<script type='text/javascript'>

//

var oneTraceLine = ""; var traceYESorNO = false; var updateFor1stTime = 0;

var fromWhere = "fromWhere"; var timesInTripsCk=0; var visible = true;

var thisx=0; var tripsMax=0; priorTripsMax = 0;

var thisIdTag; var holdThrower_x = 0;

var idTag = "truth01"; var idTagTh = "thrower";

var tripsCnt=0; var directionX=1 ; var addit = 0;

//

canvas = document.getElementById("canvas"); // get the canvas

ctx = canvas.getContext('2d'); // create canvas Context;

var targetImgsCnt = 0; var idTag = "truth01"; var totalTrips = 0;

var targetImgs = [document.getElementById("truth01"),

document.getElementById("lies01"), //,

document.getElementById("truth02"),

document.getElementById("lies02"),

document.getElementById("thrower")

] ;

//

//

function startGame() {

var Thrower = function () {

this.idTag = 'thrower';

this.x = 0;

this.y = canvas.height - 64;

this.width= 64;

this.height = 64;

this.speedX = 1;

this.speedY = 0;

this.visible = true;

this.direction = 1;

this.moveMe = false ;

this.update = function() {

// this.x = this.x + (this.speedX * this.directionX); // always = +1 or -1 }

thrower.x = this.x + (this.speedX * this.directionX); // always = +1 or -1 }

this.moveMe = false; // thrower.moveMe = false;

}

}

//

thrower = new Thrower();

thrower.idTag = 'thrower';

thrower.x = 0;

thrower.y = canvas.height - 64;

thrower.width= 64;

thrower.height = 64;

thrower.speedX = 1;

thrower.speedY = 0;

thrower.visible = true ;

thrower.direction = 1;

thrower.moveMe = true ;

//

myGameArea.start();

}

//

function updateGameArea() {

myGameArea.clear();

targetImgsCnt = 4;

if(thrower.visible) {

if(thrower.moveMe) {thrower.update();}

ctx.drawImage(targetImgs[targetImgsCnt], thrower.x, thrower.y, thrower.width, thrower.height);

/*120*/ document.getElementById("thrower.xywh").innerHTML = thrower.x;

}

}

//

var myGameArea = {

start : function() {

thrower.moveMe = false ;

interval = setInterval(updateGameArea, 5);

// updateGameArea();

},

clear : function() {

ctx.clearRect(0, 0, canvas.width, canvas.height);

},

stop : function() {

clearInterval(this.interval);

}

}

//

document.addEventListener("keydown", keyDownHandler, false);

document.addEventListener("keyup", keyUpHandler, false);

document.addEventListener("mousemove", mouseMoveHandler, false);

function keyDownHandler(e) {

if(e.keyCode == 39 || event.keyCode == 68) {

// rightPressed = true;

alert("keyDownHandler: rightPressed");

thrower.direction = 1;

thrower.moveMe = true;

}

else if(e.keyCode == 37 || event.keyCode == 65) {

// leftPressed = true;

alert("keyDownHandler: leftPressed");

thrower.direction = -1;

thrower.moveMe = true;

}

}

function keyUpHandler(e) {

if(e.keyCode == 38 || event.keyCode == 87) {

rightPressed = false;

}

else if(e.keyCode == 40 || event.keyCode == 83) {

leftPressed = false;

}

}

function mouseMoveHandler(e) {

var relativeX = e.clientX - canvas.offsetLeft;

// alert("function mouseMoveHandler(e)");

}

//

//

</script>

</body>

</html>

Ingolme · April 19, 2016

This line might be giving you trouble:

thrower.x = this.x + (this.speedX * this.directionX);   // always = +1 or -1 }

thrower is referring to a particular instance of the object, while this could refer to anything.

Normally to prevent scope issues in object we will have a variable that points to the current object:

var Thrower = function() {
    var self = this;

Then we can always use self to refer to the object.

self.x += self.speedX * self.directionX;

justsomeguy · April 19, 2016

Also, it doesn't look like you have a directionX property. And when you create the object, there's no reason to set all of the properties to the default values, they already have those values.

vmars316 · April 19, 2016

Thanks Folks ,

Foxy:

I set up this:

var Thrower = function() {
var self = this;

? outside of Thrower/thrower methods , can I use Thrower.x anywhere ?

Human:

Thanks , directionX did solve the moving problem .

Ingolme · April 20, 2016

The idea was to replace all references to "this" with "self" instead, because "this" may sometimes be referring to something else other than the object the method belongs to.

You declare self inside the Thrower constructor.

vmars316 · April 20, 2016

The idea was to replace all references to "this" with "self" instead, because "this" may sometimes be referring to something else other than the object the method belongs to.

You declare self inside the Thrower constructor.

Yes , like this :

var Thrower = function () {
         var self = this;
         this.idTag = 'thrower';
         this.x = (canvas.width / 2);
         this.y = canvas.height - 64;
         this.width= 64;
         this.height = 64;
         this.speedX = 1;
         this.speedY = 0;
		 this.visible = true;
         this.directionX = 5;
		 this.moveMe = false ; 
         this.update = function() { 
                self.x = self.x + (self.speedX * self.directionX);   // always either +1 or -1 }	
                self.moveMe = false ; 
				}
    }

Thanks

Sign In

xx = new XY ? and NaN ?

Recommended Posts

vmars316

Link to comment

Share on other sites

vmars316

Link to comment

Share on other sites

Ingolme

Link to comment

Share on other sites

justsomeguy

Link to comment

Share on other sites

vmars316

Link to comment

Share on other sites

Ingolme

Link to comment

Share on other sites

vmars316

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Browse

Activity