vmars316

April 21, 2016

Hello & Thanks ,

I am getting 'Uncaught SyntaxError: Unexpected identifier' on :

Cowpie.prototype.update = function() {
		     for (var i = cowpies.length - 1; i >= 0; i--) {
			        cowpieCount = i ;
               if (cowpies[i].cowpie.idActive) {
                    self.y = self.y+ (self.speedY * self.directionY);   // always -1 }	
                } else	 { cowpies[i].pop(this.cowpie);}		        
         }			
}

and if I comment the above out , then I get same for :

var cowpie = new Cowpie();

and so on , down the line .

Until I dismiss the whole section below .

var Cowpie = (function () {
         var self = this;
         this.idTag = 'cowpie';
		 this.idActive = true;
         this.x = thrower.x;
         this.y = thrower.y;
         this.width= 64;
         this.height = 64;
         this.speedX = 0;
         this.speedY = 5;
		 this.visible = true;
         this.directionY = -1;
		 this.moveMe = false ; 
}
//
Cowpie.prototype.update = function() {
		     for (var i = cowpies.length - 1; i >= 0; i--) {
			        cowpieCount = i ;
               if (cowpies[i].cowpie.idActive) {
                    self.y = self.y+ (self.speedY * self.directionY);   // always -1 }	
                } else	 { cowpies[i].pop(this.cowpie);}		        
         }			
}	
//
var    cowpie = new Cowpie();
//
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 ; 
}  
Thrower.prototype.update = function() {
                self.x = self.x + (self.speedX * self.directionX);   // always either +1 or -1 }	
}	
//

var     thrower = new Thrower();
        thrower.idTag ; // = 'thrower';
//
function startGame() { 
    myGameArea.start();
}

April 20, 2016

Oops , <> not working , here's the code:

 
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta charset="utf-8" />
<title>move pieThrower</title>
 
<!--  [url=http://liesandcowpies.com/javascript/]http://liesandcowpies.com/javascript/[/url]  -->
<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 () {
         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 ; 
}
    }
//
    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.directionX ; // = 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.directionX = 7;
thrower.moveMe = true;
        }
        else if(e.keyCode == 37 || event.keyCode == 65) {
//            leftPressed = true;
//    alert("keyDownHandler: leftPressed");
thrower.directionX = -7;
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>

April 20, 2016

Hello & Thanks ,

In my game , I check for leftArrow and rightArrow down to move sprite (Thrower) ,

and also for keyup , to stop movement .

But I am getting sprite movement pauses on all keydown ?

Is there a way to speed things up ?

See/run game (so far) :

http://liesandcowpies.com/javascript/BenghaziGame-starter-04-ThrowerONLY.html

Thanks

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

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 .

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>

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

April 18, 2016

Awesome , now they both work , locally and online .

THANKS

April 18, 2016

Hmm...

Yes , that's interesting .

this one:

runs fine , locally , no errors .

This one run locally , gives this error:

mozilla.org-Breakout-All-ReadOnly-vmTest01.html:18 Uncaught TypeError: window.reload is not a function

Run online:

they both get errors:

mozilla.org-Breakout-All-ReadOnly-vmTest01.html:16 Uncaught TypeError: window.reload is not a functiononclick @ mozilla.org-Breakout-All-ReadOnly-vmTest01.html:16

mozilla.org-Breakout-All-ReadOnly-vmTest01.html:18 Uncaught TypeError: window.reload is not a function

The surrounding code looks like this:

<body>

<canvas id="myCanvas" width="480" height="320"></canvas>

<div <div style="background-color:#eeeeee; width:480px; margin:0 auto;">

<img id="flaming" src="./sprites/fireTransparent.gif" width="480" height="42" />

<input type="button" onclick="window.reload(); return false;" value="click me" />

</a>

<input type="button" onclick="window.reload(); return false;" value="click me" />

</div>

<script>

I can Post the whole code if you like , its 196 lines .

You can run it here:

http://liesandcowpies.com/javascript/mozilla.org-Breakout-All-ReadOnly-vmTest01.html

It's the breakout game , with a few additions .

Thanks

April 18, 2016

Hello & Thanks ,

I would like to know why this doesn't work:

<input type="button" onclick="window.reload(); return false;" value="click me" />

but this does:

Thanks

April 14, 2016

'[' and ']' NOT '<' and '>', HOW MANY MORE TIMES! We have to explain for placement of code in post.

Ouch . Sorry , my dyslexia gets the best of me sometimes .

I've seen the term 'bbcode' .

Until , you used the term 'bbcode' in this context , I didn't realize that this markup is called 'bbcode' .

Also , it would be more clear (to me) if the icons used above were '

' and '

' .
Anyways , I've got it now .

Thanks

April 13, 2016

Forcing an error is not a really good way to program. You could wrap the whole thing in a function and call return instead. It's more efficient and won't interfere with other unrelated scripts that may be running.
function myProgram() {
  // All code in here
  if(wantToLeave) {
    return;
  }
}

Oops , its not working for me .

Pls , what am I doing wrong ?

<code>

function continueOrCancel(){

var x;

var r = confirm(" function continueOrCancel() \nPress OK to continue...\nElse\nPress Cancel to Abort javascript .");

if (r == true) {

alert("You pressed OK! Let's Continue...");

} else {

if(true){alert(" function continueOrCancel()\nInside ELSE , r= " + r);

return;

}

<code>

Thanks

April 13, 2016

Hello & Thanks ,

When I copy code from , for example ,

http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_win_open3

and paste it into my notepad++ *.html , it won't run .

What I have to do is paste it into a wordpad *.text ,

then a save the file as 'DOS *.txt' ,

then copy that file & paste it into a notepad++ *.html file .

then save that file .

And voila , it runs fine .

So , my question is :

What format are the ' http://www.w3schools.com/jsref/tryit.asp?filename= ' files in ?

And is there an easier way to do this ?

Thanks

April 13, 2016

Forcing an error is not a really good way to program. You could wrap the whole thing in a function and call return instead. It's more efficient and won't interfere with other unrelated scripts that may be running.
function myProgram() {
  // All code in here
  if(wantToLeave) {
    return;
  }
}

Hey , that's much better . Thanks

April 13, 2016

I usually don't even bother with the button. It's just easier to set the bbcode tags myself, eg.

[ code]

function showCodeSnippet() {

//my code will go here

}

[/ code]

(again don't include the space before code)

Oh , I interpreted "(spaces before code intentional)." to mean this is how to do it . Thanks

April 12, 2016

What is "abort" supposed to do exactly?

It is supposed to Exit the script . which it does , always , all browsers .

April 12, 2016

thescientist ;

Hello & Thanks ,

Learning javascript from w3schools , I often the code there as a starting point .

But what happens when , I ask a question regarding code , I often paste that code into the question text .

But when I use the < code> or < quote> icons , often times it deletes part of the code .

For example , here is some code as regular text :

//

function writeTraceLog(oneTraceLine){

document.getElementById("traceMsg").innerHTML += ( "<br> " + oneTraceLine);

}

//

function continueOrCancel(){

var txt;

var r = confirm("Press OK to continue... Else... Press Cancel to Abort javascript .");

if (r == true) {

txt = "You pressed OK!\n let's continue...";

} else {

}

//

Here is the same code using < code> icon :

Well, well , it usually just deletes a few lines here and there . Today it deleted the whole code .

The problem is further troublesome , because it looks normal in the Edit and Preview window .

It isn't evident til I look at what actually gets posted .

Here is the same code as < quote> :

//

function writeTraceLog(oneTraceLine){

document.getElementById("traceMsg").innerHTML += ( "<br> " + oneTraceLine);

}

//

function continueOrCancel(){

var txt;

var r = confirm("Press OK to continue... Else... Press Cancel to Abort javascript .");

if (r == true) {

txt = "You pressed OK!\n let's continue...";

} else {

}

}

//

Hmm , its working today .

Here is the same code plugging in the < code> manually :

< code>

//

function writeTraceLog(oneTraceLine){

document.getElementById("traceMsg").innerHTML += ( "<br> " + oneTraceLine);

}

//

function continueOrCancel(){

var txt;

var r = confirm("Press OK to continue... Else... Press Cancel to Abort javascript .");

if (r == true) {

txt = "You pressed OK!\n let's continue...";

} else {

}

//

</ code>

Hmm... The code is there , but no colored background .

Anyways , just thought I would mention it .

April 11, 2016

addendum:

BTW: The abort code above sometimes doesn't work ,

so I wrote new code here :

http://liesandcowpies.com/javascript/abortJS.html

I tried to Post it here , but couldn't get <code> or quote to work .

April 11, 2016

I don't see an element with id "traceMsg" in your code. That HTML element needs to exist on the page.

You also should use += if you don't want to overwrite previous messages.

document.getElementById("traceMsg").innerHTML += oneTraceLine

Ah Thanks !

The += in

document.getElementById("traceMsg").innerHTML += (oneTraceLine + "<br>");

is the piece I was missig .

The whole code now works great and looks like :

<!DOCTYPE html>

<html>

<head>

</head>

<body onload="startIt()">

<img id="scream" src="http://www.w3schools.com/tags/img_the_scream.jpg" alt="The Scream" width="220" height="277">

<p id="traceMsg"></p><p>Canvas:</p>

<canvas id="myCanvas" width="240" height="297" style="border:1px solid #d3d3d3;">

Your browser does not support the HTML5 canvas tag.

</canvas>

<script type='text/javascript'>

function startIt() {

var oneTraceLine ;

var canvas = document.getElementById("myCanvas");

var ctx = canvas.getContext("2d");

var img = document.getElementById("scream");

alert("scream.width = " + scream.width + " , scream.height = " + scream.height +

"\n scream.src = " + scream.src );

ctx.drawImage(img, 10, 10);

traceIt();

}

function traceIt(){

var idTag = 0; var thisIdTag = 0; var cntFor = 9;

for(c=0; c<cntFor; c++) {

idTag += 1; thisIdTag += 2;

writeTraceLog('Here we go: idTag/thisIdTag \n' +

idTag+'/'+thisIdTag + ' ::' );

writeTraceLog('Here we go: idTag/thisIdTag \n' +

idTag+'/'+thisIdTag + ' ::' );

if(idTag == 8){

continueOrCancel();

alert(' idTag/thisIdTag Should be: 8/16 \n' +

idTag+'/'+thisIdTag + ' ::');

}

}

}

//

function writeTraceLog(oneTraceLine){

document.getElementById("traceMsg").innerHTML += (oneTraceLine + "<br>");

}//

//

function continueOrCancel(){

var txt;

var r = confirm("Press OK to contimue... Else Press Cancel .");

if (r == true) {

txt = "You pressed OK!\n let's continue...";

} else

{

abortJS();

}

}

//

function abortJS(){

try {

adddlert("This is intentionally Bad Code , to FORCE ERROR !");

}

catch(err) {

document.getElementById("errMsg").innerHTML = err.message;

}

}

//

</script>

</body>

</html>

April 11, 2016

What does your code look like?

<!DOCTYPE html>

<html>

<head>

</head>

<body onload="startIt()">

<img id="scream" src="http://www.w3schools.com/tags/img_the_scream.jpg" alt="The Scream" width="220" height="277">

<p id="traceMsg"></p><p>Canvas:</p>

<canvas id="myCanvas" width="240" height="297" style="border:1px solid #d3d3d3;">

Your browser does not support the HTML5 canvas tag.

</canvas>

<script type='text/javascript'>

function startIt() {

var oneTraceLine ;

var canvas = document.getElementById("myCanvas");

var ctx = canvas.getContext("2d");

var img = document.getElementById("scream");

alert("scream.width = " + scream.width + " , scream.height = " + scream.height +

"\n scream.src = " + scream.src );

ctx.drawImage(img, 10, 10);

traceIt();

}

function traceIt(){

var idTag = 0; var thisIdTag = 0; var cntFor = 9;

for(c=0; c<cntFor; c++) {

idTag += 1; thisIdTag += 2;

writeTraceLog('Here we go: idTag/thisIdTag \n' +

idTag+'/'+thisIdTag + ' ::' );

writeTraceLog('Here we go: idTag/thisIdTag \n' +

idTag+'/'+thisIdTag + ' ::' );

if(idTag == 8){

continueOrCancel();

alert(' idTag/thisIdTag Should be: 8/16 \n' +

idTag+'/'+thisIdTag + ' ::');

}

}

}

//

function writeTraceLog(oneTraceLine){

document.getElementById("traceMsg").innerHTML = oneTraceLine;

}//

//

function continueOrCancel(){

var txt;

var r = confirm("Press OK to contimue... Else Press Cancel .");

if (r == true) {

txt = "You pressed OK!\n let's continue...";

} else

{

abortJS();

}

}

//

function abortJS(){

try {

adddlert("This is intentionally Bad Code , to FORCE ERROR !");

}

catch(err) {

document.getElementById("errMsg").innerHTML = err.message;

}

}

//

</script>

</body>

</html>

April 11, 2016

The easiest alternative is innerHTML, but there are other methods using the DOM.

Same deal , it overlays each line .

April 11, 2016

You should not use document.write() because when called after the initial page load it will erase everything that is currently on the page before writing its output.

Pls then , will you show me an example of what I should use ?

If I remove JUST the canvas element

and leave in the <p id="traceLog" > writeTraceLog <br></p>

it prints , but overlays itself .

Thanks

April 11, 2016

Hello & Thanks ,

I am trying to show a log from js to html page .

document.write(oneTraceLine + " <br>");}

But with the canvas element present , I don't seem to be able to do that .

The scaled down code exerpt below is an example of what I am trying to do ,

but actual js code is much much larger .

What can I do to get this puppy working ?

I am having trouble getting the <code> tags to work .

So , I'll try QUOTES next :

Hello & Thanks ,

I am trying to show a log from js to html page .

document.write(oneTraceLine + " <br>");}

But with the canvas element present , I don't seem to be able to do that .

The scaled down code exerpt below is an example of what I am trying to do ,

but actual js code is much much larger .

What can I do to get this puppy working ?

<!DOCTYPE html>
<html>
<head>

</head>
<body>
<img id="scream" src="http://www.w3schools.com/html/img_the_scream.jpg" alt="The Scream" width="220" height="277">
<p>Canvas:</p>
<canvas id="myCanvas" width="240" height="297" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.
</canvas>

<script type='text/javascript'>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var img = document.getElementById("scream");
alert("scream.width = " + scream.width + " , scream.height = " + scream.height +
"\n scream.src = " + scream.src );
ctx.drawImage(img, 10, 10);
traceIt();
}
function traceIt(){
var idTag = 0; var thisIdTag = 0; var cntFor = 9;
for(c=0; c<cntFor; c++) {
idTag += 1; thisIdTag += 2;
writeTraceLog('Here we go: idTag/thisIdTag \n' +
idTag+'/'+thisIdTag + ' ::' );
writeTraceLog('Here we go: idTag/thisIdTag \n' +
idTag+'/'+thisIdTag + ' ::' );
if(idTag == 8){
alert(' idTag/thisIdTag Should be: 8/16 \n' +
idTag+'/'+thisIdTag + ' ::');
}
}
}
//
function writeTraceLog(oneTraceLine){
document.open();
document.write(oneTraceLine + " <br>");}
document.open();
//

</script>

</body>
</html>

March 31, 2016

Ah , very cool !

Thanks davej

March 30, 2016

Hello & Thanks ,

I can't get this game to end:

See lines 118 - 122

else {

gameOver = true ;

and lines 132 - 135

if (gameOver) {

alert('clearInterval = ' + gameOver);

clearInterval(draw);

}

Pls, what am I doing wrong ?

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Gamedev Canvas Workshop - lesson 7: collision detection</title>
    <style>* { padding: 0; margin: 0; } canvas { background: #eee; display: block; margin: 0 auto; }</style>
</head>
<body>


<canvas id="myCanvas" width="480" height="320"></canvas>


<script>
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");
    var ballRadius = 10;
    var x = canvas.width/2;
    var y = canvas.height-30;
    var dx = 2;
    var dy = -2;
    var paddleHeight = 10;
    var paddleWidth = 75;
    var paddleX = (canvas.width-paddleWidth)/2;
    var rightPressed = false;
    var leftPressed = false;
var gameOver = false;
    var brickRowCount = 5;
    var brickColumnCount = 3;
    var brickWidth = 75;
    var brickHeight = 20;
    var brickPadding = 10;
    var brickOffsetTop = 30;
    var brickOffsetLeft = 30;
    var bricks = [];
    for(c=0; c<brickColumnCount; c++) {
        bricks[c] = [];
        for(r=0; r<brickRowCount; r++) {
            bricks[c][r] = { x: 0, y: 0, status: 1 };
        }
    }
    document.addEventListener("keydown", keyDownHandler, false);
    document.addEventListener("keyup", keyUpHandler, false);
    function keyDownHandler(e) {
        if(e.keyCode == 39) {
            rightPressed = true;
        }
        else if(e.keyCode == 37) {
            leftPressed = true;
        }
    }
    function keyUpHandler(e) {
        if(e.keyCode == 39) {
            rightPressed = false;
        }
        else if(e.keyCode == 37) {
            leftPressed = false;
        }
    }
    function collisionDetection() {
        for(c=0; c<brickColumnCount; c++) {
            for(r=0; r<brickRowCount; r++) {
                var b = bricks[c][r];
                if(b.status == 1) {
                    if(x > b.x && x < b.x+brickWidth && y > b.y && y < b.y+brickHeight) {
                        dy = -dy;
                        b.status = 0;
                    }
                }
            }
        }
    }
    function drawBall() {
        ctx.beginPath();
        ctx.arc(x, y, ballRadius, 0, Math.PI*2);
        ctx.fillStyle = "#0095DD";
        ctx.fill();
        ctx.closePath();
    }
    function drawPaddle() {
        ctx.beginPath();
        ctx.rect(paddleX, canvas.height-paddleHeight, paddleWidth, paddleHeight);
        ctx.fillStyle = "#0095DD";
        ctx.fill();
        ctx.closePath();
    }
    function drawBricks() {
        for(c=0; c<brickColumnCount; c++) {
            for(r=0; r<brickRowCount; r++) {
                if(bricks[c][r].status == 1) {
                    var brickX = (r*(brickWidth+brickPadding))+brickOffsetLeft;
                    var brickY = (c*(brickHeight+brickPadding))+brickOffsetTop;
                    bricks[c][r].x = brickX;
                    bricks[c][r].y = brickY;
                    ctx.beginPath();
                    ctx.rect(brickX, brickY, brickWidth, brickHeight);
                    ctx.fillStyle = "#0095DD";
                    ctx.fill();
                    ctx.closePath();
                }
            }
        }
    }
    function draw() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        drawBricks();
        drawBall();
        drawPaddle();
        collisionDetection();
        if(x + dx > canvas.width-ballRadius || x + dx < ballRadius) {
            dx = -dx;
        }
        if(y + dy < ballRadius) {
            dy = -dy;
        }
        else if(y + dy > canvas.height-ballRadius) {
            if(x > paddleX && x < paddleX + paddleWidth) {
                dy = -dy;
            }
            else {
                gameOver = true ;
                alert("GAME OVER = " + gameOver);
//                document.location.reload();
            }
        }
        if(rightPressed && paddleX < canvas.width-paddleWidth) {
            paddleX += 7;
        }
        else if(leftPressed && paddleX > 0) {
            paddleX -= 7;
        }
        x += dx;
        y += dy;
  if (gameOver) { 
    alert('clearInterval = ' + gameOver);
    clearInterval(draw); 
   }
    }
     setInterval(draw, 10);


</script>


</body>
</html>

Sign In

vmars316

Posts

Joined

Last visited

Content Type

Profiles

Forums

Events

Posts posted by vmars316

Need help with 'Uncaught SyntaxError: Unexpected identifier'

sprite movement pauses on initial keydown ?

sprite movement pauses on initial keydown ?

xx = new XY ? and NaN ?

xx = new XY ? and NaN ?

xx = new XY ? and NaN ?

xx = new XY ? and NaN ?

input type="button" onclick="window.reload(); ?

input type="button" onclick="window.reload(); ?

input type="button" onclick="window.reload(); ?

Probs with: multi-line document.write ?

Probs with: multi-line document.write ?

Prob with: tryit.asp?

Probs with: multi-line document.write ?

Probs with: multi-line document.write ?

Probs with: multi-line document.write ?

Probs with: multi-line document.write ?

Probs with: multi-line document.write ?

Probs with: multi-line document.write ?

Probs with: multi-line document.write ?

Probs with: multi-line document.write ?

Probs with: multi-line document.write ?

Probs with: multi-line document.write ?

? clearInterval(); probs ?

? clearInterval(); probs ?

Browse

Activity