vmars316

July 10, 2018

Thanks ,

Can someone give me an example of correct css & html coding .

In the mean time I will look for how to's on css margins .

Thanks

July 10, 2018

Hello & Thanks ,

win 10 , chrome:

<!DOCTYPE html>
<html>
<head>
<style>
.button{
    background-color: #282A36;
    border: none;
    color: #C8982B;
    color: #D9B04E;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
    font-family: "Comic Sans MS", cursive, sans-serif ;
    font-size: 24px;
    cursor: pointer;
}    
span.RedTxt{
    color: red;
}
  table.center {
    margin-left:auto; 
    margin-right:auto;
  }

  table { border: 8px solid #D9B04E;
              
  }

  #DivWholePage {  border: 24px solid #282A36;
  }
  }
</style>
</head>
<body>
<div id="DivWholePage">
<div id="TopRightImage" style="text-align:center;">      
    <br><button class="button">Dancing Man Kit -Docs & Pics</button></a>
</div> <!-- TopRightImage  -->   

    <br><br>
<!-- =====================NEW TABLE==================== -->
	<table  class="center" style="text-align: left; height:100vh; " >
      <tbody>
      <tr>
      <td width="226" height="200">  
             <img src="Arms-1.png" alt="SmileyFace.png">
      <br>&nbsp;  &nbsp;  &nbsp;  &nbsp; &nbsp;  &nbsp;  
              Attaching Arms 
      </td>
      <td>  
              Attaching Arms :
      <br><br> Notice how the forearms turn out and away from the body .        
      <br>The purpose of this is so that the arms don't collide with the body
      <br>as they swing while dancing .
      <br>To make this happen , you need to twist the forearm out a bit  
      <br>as you glue the upper arm to the forearm . Make one forearm  
      <br>twist to the right . And twist the other forearm to the left ,
      <br><==== as shown in the photo .
             
      </td>
      </tr>      
      </tbody>
  </table>
      <br><br>
<!-- =====================NEW TABLE==================== -->
	<table  class="center" style="text-align: left; height:100vh; " >
      <tbody>
      <tr>
      <td width="226" height="200">  
             <img src="ArmsToShoulder-2.png" alt="SmileyFace.png">
      <br><br><img src="ArmsToShoulder-1.png" alt="SmileyFace.png">
              <img src="Axle-EnndCap-1.png" alt="SmileyFace.png">
      <br>       
              Attaching Arms to Shoulders
      </td>

      <td>  
              Attaching Arms to Shoulders :
      <br><br> Make sure the forearms turn out away from the body .        
      <br>Thread the axle thru the arm and thru the 
      <br>end cap piece and into the shoulder hole . 
      <br>Test it out to make sure axle is the correct length . 
      <br>You may have cut the axle a bit .
      <br>Next glue the axle into the endcap , making sure to keep
      <br>any glue from spreading up the axle -another <span class="RedTxt">danger zone</span> .
      <br>When glue is dry , mount the arm making sure the arm
      <br>swings freely . If not you may have to sand off excess glue .
      <br>Next glue the axle (which now includes the arm and endcap) 
      <br>into the shoulder hole . Again making sure the arm swings . 
      <br>Repeat same procedure for the other arm .
      <br><==== as shown in photos .
      </td>
      </tr>      
      </tbody>
  </table>
    <br><br>
</div id="DivWholePage">
</body>
</html>

Pls , why does 1st table have more space showing at the Top

than does 2nd table ?

I would like them both to show 1 <br> from the top .

Thanks

July 10, 2018

Add me to the Notpad++ list :)

January 23, 2018

Please respond ,

Thanks

January 20, 2018

21 hours ago, dsonesuk said:

Get rid misplaced '}', double quote after width. Height with percentage value unit won't work, it has to be unit of 'px' or 'vh'.

Thanks , got rid of '}' & width "" :

Width is working fine now .

How come this page can use

html {
height: 100%;

https://www.w3schools.com/cssref/tryit.asp?filename=trycss_dim_height_percent

Also , on same page they are showing Resize values .

Theoretically , could I likewise calculate a Resize value ,

then plug this absolute value into "td height: value" ? ?

Also , I am using css .thumb:hover, .thumb:hover span { .

It works fine when not using <iframe .

But when I use <iframe ,

instead the hover object and <img show up side by side .

Is there a way to get hover working ?

Thanks

January 19, 2018

Hello & Thanks,

Yes, the <iframe> is working ,

But shows up as very small height & width .

My attempts to get height:100%; are not working .

I whittled down my code.

Can you take a look at my code & see what's the prob .

Thanks

<!DOCTYPE  html>  
<head>
<!--  http://vmars.us/index.html   http://vmars.us/default.html   -->
<title> vmars.us.html 
</title> 
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">

<style type="text/css">
/* html5 semantics tags  */
article, aside, div, figure, footer, header, hgroup, menu, nav, p, section, summary{ display: block; }

html {
    height: 100%;
}

#thumbwrap {

}
.thumb img { 
}
.thumb span { 
}
}

body { font-size: 18px;  line-height:1.25em; height: 100%;}

iframe {height: 100%; }

table {
border-style: solid;
border-color: #5A697D; 
border-width: 20px;  
}
#tdLeft {
text-align: center;
height:100%;
width:25%";
}
#tdRight {
text-align: left;
height:100%;
width:75%";
}


h1, h2, h3 {font-size:22px;}

</style>
</head>
<body  style="background-color:#000000">  <!--  <body  style="color:#FFFFFF"> -->
<!-- =======================================TOP TABLE======== -->
	<table style="text-align: left; width: 100%;" border="1"  cellpadding="2" cellspacing="2" >
      <tbody>
      <tr>
<!-- ============================================== -->
      <td id="tdLeft" style="background-color:#D3DDEB; text-align:center; " >  
<!--          <div id="topLeft" style="text-align:center;">  
-->
             <br>
            <iframe   src="buttons_iframe.html"   
                style="border:none; "> </iframe>
<!--
          </div>     <!--   id="topLeft"  
-->  
      </td>
<!-- https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_iframe_frameborder_css -->
      <td id="tdRight" style="text-align: center; "  bgcolor="#FFFFFF">
      
<div id="TopRightImage" style="text-align:center;">      
    <img src="http://vmars.us/javascript/images/Welcome-gold.png" alt="SmileyFace.png" width="150" height="35"> 
</div> <!-- TopRightImage  -->   

<div id="TopRightContent" style="text-align:center;">
    <br><br> ************************************ , 
    <br><br> ============================= . 
    <br><br> **********
    <br><br> ============================= . 
    <br><br> ************************************ : 
    <br><br> <a href="http://vmars.us/freeware/clipLog/clipLog-Help.html" target="_blank">clipLog/clipFind : Personal Information Manager</a>
    <br><br> <a href="http://vmars.us/freeware/myFavs/myFavs_Help.html" target="_blank">myFavs : Internet Bookmark Manager</a>
    <br><br> <a href="http://vmars.us/freeware/mySort/mySort_Help.html" target="_blank">mySort : Handy Text Sorter</a>
    <br>
    <br>"All things in moderation , except for love and forgiveness"
    <br>
</div> <!-- TopRightContent  -->   
</td>
    </tr>
  </tbody>
</table>
<br>
<!-- ============================================== -->
</body>
</html>

January 5, 2018

Foxy Mod

Thanks

January 3, 2018

Hello & Thanks,

I am trying to get an iframe with no borders without specifying exact width:

These aren't working :

Pls, what is the proper way ?

Thanks

April 11, 2017

Thanks,

I am trying to send a msg (popup window) without a Button.

Guess I'll have to do this:

document.getElementById("currentLevelLbl").innerHTML = currentLevelLbl + startClockAt ;

or maybe a popup-image.

Thanks

April 10, 2017

Aw shucks ,

Thanks

April 10, 2017

Thanks Ingolme ,

I plan to delete the "<body onload = "myFunction()">",

and the "<button onclick="myFunction()">msgBox</button>" code.
And I want to call "myFunction" from the js code.

Is there a way to get pure js to call "myFunction" from within the same page?
Thanks

April 10, 2017

Hello & Thanks,

I am getting error msg:

jsMsgBoxPlusTinker.html:13 Uncaught TypeError: Cannot read property 'document' of null
at myFunction

And I can't see my error,

need help from someone with better eyes than me, Thanks:

<!DOCTYPE html>
<html>
<title>file:///C:/vmars.us/javascript/SimpleGame-js/ClaustrophobiaGame/jsMsgBoxPlusTinker.html
</title>
<body onload = "myFunction()"> 
<p>Click Button to open a msgBox</p>
<button onclick="myFunction()">msgBox</button>
<script type = "text/javascript" >    
var myWindowHtml = '<p>Yes , No , Continue , Cancel ?</p><p><button id="yesBtn">Yes</button><button id="noBtn">No</button><button id="continueBtn">Continue</button><button id="cancelBtn">Cancel</button></p>';
var myWindow;
var btn1 = "yesBtn";  var btn2 = "noBtn"; var btn3 = "continueBtn";  var btn4 = "cancelBtn"; 
function myFunction() {
    myWindow = window.open("", "MsgWindow", "width=400,height=100");
    myWindow.document.write(myWindowHtml);
    myWindow.document.getElementById(btn1).addEventListener("click", function(){yesClick();});
    myWindow.document.getElementById(btn2).addEventListener("click", function(){noClick();});
    myWindow.document.getElementById(btn3).addEventListener("click", function(){continueClick();});
    myWindow.document.getElementById(btn4).addEventListener("click", function(){cancelClick();});
}
function yesClick(){
    alert("you Clicked Yes !\n Bye...");
    myWindow.close();
	}
function noClick(){
    alert("you Clicked no !\n Bye...");
    myWindow.close();
	}
function continueClick(){
    alert("you Clicked continue !\n Bye...");
    myWindow.close();
	}
function cancelClick(){
    alert("you Clicked cancel !\n Bye...");
    myWindow.close();
	}
</script>
</body>
</html>

February 26, 2017

Ok Great Thanks

February 25, 2017

Hello & Thanks ,

Can I call/name video/ogg files *.ogv , instead of *.ogg ?

I have seen it both ways .

THanks

January 26, 2017

Pls , never mind .

I think there is something wrong with the video .

Thanks

January 26, 2017

Hello & Thanks ,

Any idea why this video won't play ? :

<!DOCTYPE html>

<html>

<title>Play .mp4 video

http://vmars.us/ShowMe/NotYourAverage-HorseRace.mp4.html :

http://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_video_autoplay :

</title>

<body>

Your browser does not support the video tag.

</video>

</body>

</html>

Thanks

November 5, 2016

Thanks :

Your code was not foreign to me, just very messy and inefficient,

it takes a long time to figure out the intention behind it.

My code is structured according to common theoretical programming

models and data structures. You probably should take some

college courses because the theory is probably much more than what

can be taught in a forum post.

Ah , when I google: "javascript common theoretical programming models and data structures"

I get a wealth of info , Thanks

When I set it up as you say

I get an error here:

FoxyMod-Game-reset.html:519 Uncaught ReferenceError: game is not defined

// Throw a cowpie

self.throwCowpie = function() {

game.createCowpie(self.x, self.y);

}

whenever I click on 'Throw' button .

So I moved this:

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

var game = new Game(canvas);

to here:

var canvas = document.getElementById("canvas");
var game = new Game(canvas);
 
window.addEventListener("load", setup, false);
 
function setup() {

That must have been what was happening before ,

only I didn't notice that error ,

since I hadn't yet dived into Chrome debug, breakpoints and writeTraceLog .

Btw: I noticed late last nite , that your code works fine in IE .

Also , using F12:

Is there a way to step thru code one line at a time ?

I have used 'Step into next function' & 'Resume execution',

But I havent't yet found a way to 'step into next line' .

game.reset();

Since code is working fine ,

I guess I dont't need to do the last 2 resets now :

1) Set scores to zero

2) Empty the cowpies array

3) Set all the target isGood properties to false

Thanks

November 5, 2016

It creates them , but doesn't yet draw them .

Correct ?

http://vmars.us/javascript/GameObject/FoxyMod-Game-reset.html

I would like you to take a look at the above link ,

so you can see what I am doing .

And also while there , pls rightMouse click to 'view the code' .

If you are willing to do that , then I won't need to even Post my code .

I have already tried :

wrapping the logic section as a function , and executing it at 'load' .

Then adding a game.start() immediately after executing that function .

Then adding a self.reset() function at the beginning of game.start() .

In game.reset() I cleared pertinent var s to 0 .

I need some help with 'what else I need to clear , set to null or what ever' in the self.reset() .

My code was foreign to you , your code is alien to me .

There are lots of things that are new to me .

I have spent 8hrs a day for the last 2 days , trying to understand your code ,

using console debug , & writeTraceLog , etc..

Thanks

November 5, 2016

<!DOCTYPE html>

<html>

<head>

<title>Reset</title>

-->

<style>

body {

background-color: black;

margin: 0;

padding: 0;

}

#assets { display: none; }

#canvasDiv { text-align: center; }

canvas { cursor: none; }

table {

margin: 0 auto;

color: #E1E1E1;

background-color: #732222;

height: 24px;

width: 800px;

border: none;

}

button { font-size: 1em; }

#buttonsArea {

color: #E1E1E1;

background-color: #732222;

width: 600px;

margin: 0 auto;

border: none;

}

</style>

</head>

<body>

<div>

<table>

<tr>

<td style="width: 18%"> totalScore </td>

<td style="width: 18%"> goodHits </td>

<td style="width:18%"> totalShots </td>

</tr>

</table>

</div>

<!-- <div id="canvasDiv">

</div>

-->

<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>

</tr>

</tbody>

</table>

</div>

<button id="pause">Pause</button>

<button id="throw">Throw</button>

<button id="right">Move right</button>

</div>

</div>

//debugger;

/* explain

Difference between Function constructor and function declaration

Functions created with the Function constructor do not create closures to their creation contexts;

they always are created in the global scope.

When running them, they will only be able to access their own local variables and global ones,

not the ones from the scope in which the Function constructor was called.

This is different from using eval with code for a function expression.

//function declaration

function foo() {}

Declared functions are not executed immediately. They are "saved for later use",

and will be executed later, when they are invoked (called upon).

Semicolons are used to separate executable JavaScript statements.

Since a function declaration is not an executable statement,

it is not common to end it with a semicolon.

All it can do is create an object variable parented by its current scope.

In contrast a Function Expression (by definition) is part of a larger construct.

If you want to create an anonymous function or assign a function to a prototype

or as a property of some other object you need a Function Expression.

// function expression

(function bar() {})

// function expression

x = function hello() {}

if (x) {

// function expression

function world() {}

}

// function declaration

function a() {

// function declaration

function b() {}

if (0) {

// function expression

function c() {}

}

*/

/***********/

/** Logic **/

/***********/

/* Initialize the game object */

function writeTraceLog(oneTraceLine){

traceCount ++;

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

}

var gameLoopDraw = 0; var TargetSelfDraw = 0;

var targetsLengthVar = 0; // targetsLengthVar = targets.length ;

var traceCount = 1;

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

var game = new Game(canvas);

// Sounds

game.sounds.splat = new Audio("sounds/CowMooSplat.mp3");

game.sounds.goodbye = new Audio("sounds/GoodBye-Female.mp3");

game.sounds.cheering = new Audio("sounds/cheeringCrowd.mp3");

game.sounds.oops = new Audio("sounds/oops.mp3");

// Sprites

game.sprites.background = document.getElementById("bgCompound");

game.sprites.manufacturer = document.getElementById("manufacturer");

game.sprites.cowpie = document.getElementById("cowpie");

// Scores explain

//points to an element on the page. game.scores.totalScore just tells the

//program in which HTML element the score should be written.

game.scores.totalScore = document.getElementById("totalScore");

game.scores.oops = document.getElementById("oopsScore");

game.scores.hits = document.getElementById("goodHits");

game.scores.totalShots = document.getElementById("totalShots");

// Create thrower

var throwerSprite = document.getElementById("thrower");

var throwerX = canvas.width / 2; // Center of the canvas

var throwerY = canvas.height - throwerSprite.height; // Bottom of the canvas

var thrower = new Thrower(throwerSprite, throwerX, throwerY);

thrower.speed = 120 / 1000; // 120 pixels per second

thrower.cowpieSpeed = 180 / 1000; // 180 pixels per second

game.setThrower(thrower);

// Create targets

var hillarytrue = document.getElementById("tru02");

var hillarylies = document.getElementById("lie02");

var target1 = new Target(hillarylies, hillarytrue, 128, 24);

target1.speed = 120 / 1000; // 120 pixels per second

var target2 = new Target(hillarylies, hillarytrue, 0, 68);

target2.speed = 120 / 1000; // 120 pixels per second

game.addTarget(target1);

game.addTarget(target2);

/* Set event handlers */

// Pause/Resume

document.getElementById("pause").addEventListener("click", game.pause, false);

document.getElementById("play").addEventListener("click", game.resume, false);

// Actions

document.getElementById("left").addEventListener("mousedown", thrower.pressLeft, false);

document.getElementById("left").addEventListener("mouseup", thrower.releaseLeft, false);

document.getElementById("right").addEventListener("mousedown", thrower.pressRight, false);

document.getElementById("right").addEventListener("mouseup", thrower.releaseRight, false);

document.getElementById("throw").addEventListener("click", thrower.throwCowpie, false);

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

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

var canFire = true;

function keyPressed(e) {

writeTraceLog("function keyPressed targetsLengthVar = "+ targetsLengthVar + " traceCount = " + traceCount);

switch(e.keyCode) {

case 39: case 68: // Right arrow and D

thrower.pressRight();

break;

case 37: case 65: // Left arrow and A

thrower.pressLeft();

break;

case 38: case 87: // Up arrow and W

if(canFire) {

canFire = false;

thrower.throwCowpie();

}

break;

}

function keyReleased(e) {

writeTraceLog("function keyReleased(e) targetsLengthVar = "+ targetsLengthVar + " traceCount = " + traceCount);

switch(e.keyCode) {

case 39: case 68: // Right arrow and D

thrower.releaseRight();

break;

case 37: case 65: // Left arrow and A

thrower.releaseLeft();

break;

case 38: case 87: // Up arrow and W

canFire = true;

break;

}

/* Begin the game */

window.addEventListener("load", game.start, false);

/*************/

/** Objects **/

/*************/

/** Game **/

function Game© { // function declaration

var self = this;

/** Properties **/

// Canvas

var canvas = c;

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

// HTML elements explain

/* Objects are variables too. But objects can contain many values.

JavaScript objects are containers for named values called properties or methods.

self.sprites is an object. It's in the Javascript tutorial:

Objects are used to organize data.

self is also an object. .sprites is a property of self that also contains an object.

You cannot use var to set properties.

Objects can contain other objects and arrays as properties.

var a = {}; // This is an object

a.b = { // Property "b" is an object that contains a property "c" which is also an object

c : {}

};

a.b.c.d = "Value"; // Object "c" has a property called "d" with a string as its value.

*/

self.reset = function () {

totalScore = 0;

totalShots = 0;

oops = 0;

hits = 0;

for (var i = targets.length - 1; i >= 0; i--) {

targetsLengthVar = targets.length ;

targets.splice(index, 1);

writeTraceLog("self.reset targets.splice func targetsLengthVar = "+ targetsLengthVar + " traceCount = " + traceCount);

}

for (var i = cowpies.length - 1; i >= 0; i--) {

cowpies.splice(index, 1);

writeTraceLog("self.reset cowpies.splice func targetsLengthVar = "+ targetsLengthVar + " traceCount = " + traceCount);

}

}; // self.reset = function ()

self.sprites = {

background : null,

manufacturer : null,

cowpie : null

};

self.sounds = {

splat : null,

goodbye : null,

cheering : null,

oops : null

};

self.scores = {

totalScore : null,

oops : null,

hits : null,

totalShots : null

};

// Movable objects

var thrower = null;

var targets = [];

var cowpies = [];

self.setThrower = function(t) { thrower = t; thrower.game = self;

writeTraceLog("self.addThrower func targetsLengthVar = "+ targetsLengthVar + " traceCount = " + traceCount);

};

self.addTarget = function(t) { targets.push(t);

writeTraceLog("self.addTarget func targetsLengthVar = "+ targetsLengthVar + " traceCount = " + traceCount + " which target = " + t.name);

};

// States

var paused = false;

// Counters

var totalScore = 0;

var totalShots = 0;

var oops = 0;

var hits = 0;

/** Methods **/

// explain Methods are functions stored as object properties.

// http://www.w3schools.com/js/js_object_methods.asp

// Start the game ===========================

self.start = function () {

// Reset counters

totalScore = 0;

totalShots = 0;

oops = 0;

hits = 0;

writeTraceLog("self.start = function targetsLengthVar = "+ targetsLengthVar + " traceCount = " + traceCount);

// Play a sound

console.log(self.sounds.cheering);

self.sounds.cheering.play();

// Begin the game loop

requestAnimationFrame(gameLoop);

} // self.start = function () ========================

// Pause the game

self.pause = function() { paused = true; lastTimestamp = 0;

writeTraceLog("self.pause func targetsLengthVar = "+ targetsLengthVar + " traceCount = " + traceCount);

};

self.resume = function() { paused = false; };

// Create a cowpie

self.createCowpie = function(x, y) {

writeTraceLog("self.createCowpie func targetsLengthVar = "+ targetsLengthVar + " traceCount = " + traceCount);

var cowpie = new Cowpie(self.sprites.cowpie, x, y);

cowpie.game = this;

cowpies.push(cowpie);

};

// Remove a cowpie by its index

self.destroyCowpie = function(index) {

if(index instanceof Cowpie) {

writeTraceLog("self.destroyCowpie func targetsLengthVar = "+ targetsLengthVar + " traceCount = " + traceCount);

var found = false;

numCowpies = cowpies.length;

for(var i = 0; i < numCowpies && !found; i++) {

if(cowpies == index) {

found = true;

cowpies.splice(index, 1);

}

} else {

cowpies.splice(index, 1);

}

} // self.destroyCowpie = function(index)

/** Private methods **/

// Collision detection

// Detect rectangular collision

var hitTest = function(a,

{

return a.x <= b.x + b.width &&

a.x + a.width >= b.x &&

a.y <= b.y + b.height &&

a.y + a.height >= b.y;

}

var lastTimestamp = 0;

var gameLoop = function(timestamp) { // =================== gameLoop ==============

var i, j, numTargets, numCowpies, collision;

/* If the game is paused then do nothing */

if(paused) {

requestAnimationFrame(gameLoop);

return;

}

/* Calculate delta time */

if(lastTimestamp == 0) {

lastTimestamp = timestamp;

}

deltaTime = timestamp - lastTimestamp;

lastTimestamp = timestamp;

/* Update all objects */

// Thrower

thrower.update(deltaTime, canvas);

// Targets

numTargets = targets.length;

targetsLengthVar = targets.length;

for(i = 0; i < numTargets; i++) {

targets.update(deltaTime, canvas);

}

// Cowpies

for(i = 0; i < cowpies.length; i++) {

cowpies.update(deltaTime, canvas);

}

/* Calculate interations between all objects */

// For each cowpie calculate collision with the targets

var target;

for(i = 0; i < cowpies.length; i++) {

for(j = 0; j < numTargets; j++) {

collision = hitTest(cowpies, targets[j]);

// If a collision occurred, destroy the cowpie and change the target

if(collision) {

// Destroy cowpie

self.destroyCowpie(i);

// Change target's state and update scores

target = targets[j];

if(target.isGood()) {

self.sounds.oops.play();

oops++;

target.setGood(false);

} else {

self.sounds.splat.play();

hits++;

target.setGood(true);

}

totalScore = hits * 4 - oops * 2;

i--; // (Accounts for the cowpie being removed from the array)

break;

} // if(collision)

} // for(j = 0; j < numTargets; j++)

} // for(i = 0; i < cowpies.length; i++)

/* Display everything */

// Clear canvas

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

// Draw background images

context.drawImage(self.sprites.background, 0, canvas.height - 195);

context.drawImage(self.sprites.manufacturer, canvas.width - 180, canvas.height - 104);

// Draw thrower

thrower.draw(context);

// Draw targets

for(i = 0; i < numTargets; i++) { // TargetSelfDraw gameLoopDraw

if (TargetSelfDraw < 5) { gameLoopDraw ++;

writeTraceLog("if gameLoopSelf < 5 = "+ gameLoopDraw + " traceCount = " + traceCount);

}

targets.draw(context);

}

// Draw cowpies

numCowpies = cowpies.length; // Update this to account for destroyed cowpies

for(i = 0; i < numCowpies; i++) {

cowpies.draw(context);

}

// Update scores

self.scores.totalScore.innerHTML = totalScore;

self.scores.totalShots.innerHTML = totalShots;

self.scores.oops.innerHTML = oops;

self.scores.hits.innerHTML = hits;

// Start a new game loop

requestAnimationFrame(gameLoop);

} // var gameLoop = function(timestamp)

/** Thrower **/

function Thrower(s, startX, startY) { // Declared functions are not executed immediately.

// They are "saved for later use", and will be executed later, when they are invoked (called upon).

var self = this;

var sprite = s;

self.x = startX;

self.y = startY;

self.width = sprite.width;

self.height = sprite.height;

self.game = null;

self.speed = 120 / 1000;

var left = 0;

var right = 0;

// For movement

self.pressLeft = function() { left = 1;

writeTraceLog("self.pressLeft func self.x = "+ self.x + " traceCount = " + traceCount);

};

self.releaseLeft = function() { left = 0; };

self.pressRight = function() { right = 1;

writeTraceLog("self.pressRight func self.x = "+ self.x + " traceCount = " + traceCount);

};

self.releaseRight = function() { right = 0; };

// Throw a cowpie

self.throwCowpie = function() {

writeTraceLog("self.throwCowpie func targetsLengthVar = "+ targetsLengthVar + " traceCount = " + traceCount);

game.createCowpie(self.x, self.y);

}

// Update position

self.update = function(deltaTime, canvas) {

var direction = right - left;

self.x += direction * self.speed * deltaTime;

if(self.x + self.width > canvas.width) {

self.x = canvas.width - self.width;

}

if(self.x < 0) {

self.x = 0;

}

// Draw

self.draw = function(context) {

context.drawImage(sprite, self.x, self.y, self.width, self.height);

}

} // function Thrower(s, startX, startY)

/** Cowpie **/

function Cowpie(s, startX, startY) {

var self = this;

var sprite = s;

self.x = startX;

self.y = startY;

self.width = sprite.width;

self.height = sprite.height;

self.game = null;

self.speed = 180 / 1000;

self.update = function(deltaTime, canvas) {

self.y -= self.speed * deltaTime;

if(self.y < 0) {

game.destroyCowpie(self);

}

self.draw = function(context) {

context.drawImage(sprite, self.x, self.y, self.width, self.height);

//writeTraceLog("self.draw cowpie targetsLengthVar = "+ targetsLengthVar + " traceCount = " + traceCount);

}

} // function Cowpie(s, startX, startY)

/** Target **/

function Target(bad, good, startX, startY) {

var self = this;

/* Properties */

self.x = startX;

self.y = startY;

self.width = bad.width;

self.height = bad.height;

self.speed = 120 / 1000;

// For changing sprite

var isGood = false;

var spriteGood = good;

var spriteBad = bad;

var sprite = spriteBad;

// For motion

var direction = 1;

var trips = 0;

var maxTrips = 2;

/* Get or set the isGood value */

self.isGood = function() {

return isGood;

}

self.setGood = function(value) {

isGood = value;

trips = 0; // Reset trips

if(isGood) {

width = spriteGood.width;

height = spriteGood.height;

} else {

width = spriteBad.width;

height = spriteBad.height;

}

/* Update method, called on each frame */

self.update = function(deltaTime, canvas) { // target

/* Update position */

self.x += direction * self.speed * deltaTime;

/* Check boundaries */

var hitBoundary = false;

// Check if we hit the left boundary

if(self.x < 0) {

self.x = 0;

direction = -direction;

hitBoundary = true;

}

// Check if we hit the right boundary

if(self.x + self.width > canvas.width) {

self.x = canvas.width - self.width;

direction = -direction;

hitBoundary = true;

}

// If we hit a boundary then count trips

if(hitBoundary) {

trips++;

// Switch sprites if we hit a boundary too many times

if(trips > maxTrips) {

isGood = !isGood;

if(isGood) {

width = spriteGood.width;

height = spriteGood.height;

} else {

width = spriteBad.width;

height = spriteBad.height;

}

/* Draw the sprite */

self.draw = function(context) {

TargetSelfDraw ++;

sprite = isGood ? spriteGood : spriteBad;

context.drawImage(sprite, self.x, self.y, self.width, self.height); //gameLoopDraw TargetSelfDraw = 0;

if (TargetSelfDraw < 5) {

writeTraceLog("if TargetSelfDra < 5 = "+ TargetSelfDraw + " traceCount = " + traceCount);

}

} // TargetSelfDraw

} // function Target(bad, good, startX, startY)

//

/*

function writeTraceLog(oneTraceLine){

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

}

*/

</script>

</body>

</html>

November 5, 2016

Hello & Thanks ,

Pls , what is this code doing ,

What does it look like , a separate target1.hillartlies and one for target1.hillarylies ?

var target1 = new Target(hillarylies, hillarytrue, 128, 24);

target1.speed = 120 / 1000; // 120 pixels per second

I tried the things you suggested , but still get bad results .

Using console debug , I have a better understanding of what/when the interpreter is doing .

I am still stumped with how to code to make a pageReload give the same results as first time running .

I put some trace code in there , hoping to understand the code better .

But I am still stumped .

I need help , Pls show me how to debug this thing .

Here is my code :

[link]

http://vmars.us/javascript/GameObject/FoxyMod-Game-reset.html

[/link]

Here is my code:

Thanks

November 2, 2016

I don't see where the contradiction is. Function declarations are not executable, so they don't need to end with a semi-colon.

These two statements are what I am confused about :

1) Declared functions are not executed immediately. They are "saved for later use", and will be executed later,

when they are invoked (called upon).

2) Since a function declaration is not an executable statement,

Are 'Declared functions ' executable or not ?

Thanks

November 2, 2016

At what point in the program's execution do you think the game is ready to start?

Good point :

I really don't understand the sequence of program execution .

How can I track that

put a console.log after every statement ?

Thanks

November 2, 2016

A bit confusing here:

http://www.w3schools.com/js/js_function_definition.asp

Description seems to contradict itself :

Declared functions are not executed immediately. They are "saved for later use", and will be executed later,

when they are invoked (called upon).

Example

function myFunction(a,

{

return a * b;

}

Semicolons are used to separate executable JavaScript statements.

Since a function declaration is not an executable statement,

it is not common to end it with a semicolon.

Thanks

November 2, 2016

Thanks ,

What is the difference between functions coded in different ways :

self.setThrower = function(t){

var hitTest = function(a,

{

function Thrower(s, startX, startY) {

Thanks

November 1, 2016

Aha! , Thanks

Sign In

vmars316

Posts

Joined

Last visited

Content Type

Profiles

Forums

Events

Posts posted by vmars316

Html spacing of Tables

Html spacing of Tables

Favourite html editors...

How to get an iframe with no borders ?

How to get an iframe with no borders ?

How to get an iframe with no borders ?

How to get an iframe with no borders ?

How to get an iframe with no borders ?

Cannot read property 'document' ??

Cannot read property 'document' ??

Cannot read property 'document' ??

Cannot read property 'document' ??

src="movie.ogv" vs " type="movie.ogg"> ?

src="movie.ogv" vs " type="movie.ogg"> ?

Play .mp4 video prob ?

Play .mp4 video prob ?

Need help with .js game on phone

Need help with .js game on phone

Need help with .js game on phone

Need help with .js game on phone

Need help with .js game on phone

Need help with .js game on phone

Need help with .js game on phone

Need help with .js game on phone

Need help with .js game on phone

Browse

Activity