26 Apr 2014, 14:26
Generic-user-small

Adam BYRNE (4 posts)

I need help with my code: http://is.gd/fnLwXx it is the fruit hunt chapter , jump not working. could you please tell me why?!

26 Apr 2014, 17:41
Chris_strom_headshot_200_pragsmall

Chris Strom (83 posts)

You’ve got it perfect except for one extra “s” in your checkForTreasure() function on line 271.

Instead of trees[trees_with_treasure], it should be trees[tree_with_treasure] (the “tree” after the square bracket should not have an “s”). The first 3 lines of that function should be:

function checkForTreasure() {
  if (tree_with_treasure === undefined)return;
  var treasure_tree = trees[tree_with_treasure],

That little problem aside, nice work! I like the blue player and how it has two spheres instead of the one from the book :)

13 May 2014, 01:56
Generic-user-small

Tyler Wood (5 posts)

Hi i was wondering if you could send me a link of the color codes because no matter what site i go to the codes dont work.

13 May 2014, 22:23
Generic-user-small

Tyler Wood (5 posts)

never mind i remembered the RGB

14 May 2014, 16:08
Chris_strom_headshot_200_pragsmall

Chris Strom (83 posts)

Cool! Glad you were able to figure it out. For what it’s worth, Three.js supports two different ways of setting color and the book switches back and forth.

I prefer the RGB one as well. That looks like:

  light.material.ambient.setRGB(1,0,0);
  light.material.emissive.setRGB(1,0,0);
  light.material.color.setRGB(1,0,0);

The other is “hexadecimal” format and looks like:

 new THREE.MeshPhongMaterial({
   color: 0x333333,
   shininess: 100.0,
   ambient: 0xff0000,
   emissive: 0x111111,
   specular: 0xbbbbbb
 })

Sometimes this format is easier to use when creating a material with other, non-color settings (like shininess). It might not look like it, but this format is also RGB. The first two letters/numbers after the 0x are red, the second letter/number pair are the green, and the last two letters/numbers are the blue. Double zeroes mean none of that particular color. Double ff is the most. So 0xff0000 is all red, no green and no blue.

The chart that I like the most for reference is: http://en.wikipedia.org/wiki/X11_color_names. It has both hexadecimal (replace the # with 0x) and RGB (convert percentage to value between 0 and 1.0).

14 May 2014, 20:57
Generic-user-small

Tyler Wood (5 posts)

great thanks that does help because now i have run into a situation where it would be easier to use hexadecimal.

31 May 2014, 22:42
Generic-user-small

Nathan Tuvey (9 posts)

Hello, i am having some trouble with chapter 5 at A Lot of Junk Before the Function. It’s a bit irritating. i have tried many ways to get it to work (without going back to the original code). from the directions i got is this outcome ~~~ (

function makeLog(){ var holder = document.createElement(‘div’); holder.style.height = ‘75px’; holder.style.width = ‘450px’; holder.style.overflow = ‘auto’; holder.style.border = ‘1px solid #666’; holder.style.backgroundColor = ‘#ccc’; holder.style.padding = ‘8px’; holder.style.position = ‘absolute’; holder.style.bottom = ‘10px’; holder.style.right = ‘20px’; document.body.appendChild(holder); return holder; }

function logMessage( message, log) { var holder = document.createElement(‘div’); holder.textContent = message; log.appendChild( holder); }

</script> ) ~~~ please reply back as soon as you can thanks, ☺ __ / \ | O O | | _/ | ___/ -Nathan Tuvey

31 May 2014, 22:43
Generic-user-small

Nathan Tuvey (9 posts)

sorry about that im new and dont know how this posting thing work

01 Jun 2014, 00:46
Chris_strom_headshot_200_pragsmall

Chris Strom (83 posts)

Hi Nathan!

Sorry for the trouble. I tried your code and it worked for me, EXCEPT… I had to change all of the quote characters. Instead of the curly “smart quotes,” I changed them all to simple apostrophes. That is, I used ' instead of or – it’s a little hard to see the difference, but if you can get them, simple apostrophes work best in code.

I’m not sure if the quotes in your post got that way from the forum software or that’s how they are in your code. If that’s how they are in your code, they won’t work – JavaScript only likes simple apostrophes.

The code that works for me is:

function makeLog(){ 
  var holder = document.createElement('div'); 
  holder.style.height = '75px'; 
  holder.style.width = '450px'; 
  holder.style.overflow = 'auto'; 
  holder.style.border = '1px solid #666'; 
  holder.style.backgroundColor = '#ccc'; 
  holder.style.padding = '8px'; 
  holder.style.position = 'absolute'; 
  holder.style.bottom = '10px';
  holder.style.right = '20px'; 
  document.body.appendChild(holder); 
  return holder; 
}

function logMessage( message, log) {
  var holder = document.createElement('div'); 
  holder.textContent = message; 
  log.appendChild( holder); 
}

There were no errors and I could even see the log working when I added this to the bottom:

test_log = makeLog();
logMessage('Hi from the test log', test_log);

BTW the code snippets in this forum work by placing the three tildes (~~~) on a line by themselves, then the code, then another three tildes one a line by themselves:

 ~~~
 test_log = makeLog();
 logMessage('Hi from the test log', test_log);
 ~~~
01 Jun 2014, 06:06
Generic-user-small

Nathan Tuvey (9 posts)

Did it say to put the words on the top and I did not get the noise word and also I believe I copied it straight from my ebook(I do this to compare and see why it is not working). I have done it with the text near the bottom with it working. sorry if I am taking up your time.have a nice day.

  _____
 / O O \
 |\___/|
 \_____/

-Nathan Tuvey ~~~ Test_log ~~~

01 Jun 2014, 14:32
Chris_strom_headshot_200_pragsmall

Chris Strom (83 posts)

The code goes near the bottom (after the YOUR CODE GOES HERE line). So if you have it there and it’s working, then you’re in good shape.

It’s possible that one of the ebook formats changed the apostrophes to smart quotes. That would kinda stink if that were the case. Where do you have the ebook? Is this a PDF on your computer? On a kindle? iPad?

No worries about asking questions in the forum – that’s what it’s here for :)

02 Jun 2014, 00:54
Generic-user-small

Nathan Tuvey (9 posts)

its on my kindle and my computer the pages i amconfused about are these: Alt text Alt text what i am confused about is this part(the highlighted part): Alt text here is code from a previous creation that worked:


<script type="text/javascript">window.NREUM||(NREUM={});NREUM.info={"beacon":"beacon-1.newrelic.com","errorBeacon":"jserror.newrelic.com","licenseKey":"4460760967","applicationID":"438659","transactionName":"cQ5YEkJeCFpTQEsWXEEVRUlRQjtbV0APAlxFDw==","queueTime":0,"applicationTime":10,"ttGuid":"","agentToken":null,"agent":"js-agent.newrelic.com/nr-411.min.js"}</script>
<script type="text/javascript">window.NREUM||(NREUM={}),__nr_require=function(t,n,e){function r(e){if(!n[e]){var o=n[e]={exports:{}};t[e][0].call(o.exports,function(n){var o=t[e][1][n];return r(o?o:n)},o,o.exports)}return n[e].exports}if("function"==typeof __nr_require)return __nr_require;for(var o=0;o<e.length;o++)r(e[o]);return r}({D5DuLP:[function(t,n){function e(t,n){var e=r[t];return e?e.apply(this,n):(o[t]||(o[t]=[]),void o[t].push(n))}var r={},o={};n.exports=e,e.queues=o,e.handlers=r},{}],handle:[function(t,n){n.exports=t("D5DuLP")},{}],G9z0Bl:[function(t,n){function e(){var t=l.info=NREUM.info;if(t&&t.agent&&t.licenseKey&&t.applicationID&&p&&p.body){l.proto="https"===f.split(":")[0]||t.sslForHttp?"https://":"http://",i("mark",["onload",a()]);var n=p.createElement("script");n.src=l.proto+t.agent,p.body.appendChild(n)}}function r(){"complete"===p.readyState&&o()}function o(){i("mark",["domContent",a()])}function a(){return(new Date).getTime()}var i=t("handle"),u=window,p=u.document,s="addEventListener",c="attachEvent",f=(""+location).split("?")[0],l=n.exports={offset:a(),origin:f,features:[]};p[s]?(p[s]("DOMContentLoaded",o,!1),u[s]("load",e,!1)):(p[c]("onreadystatechange",r),u[c]("onload",e)),i("mark",["firstbyte",a()])},{handle:"D5DuLP"}],loader:[function(t,n){n.exports=t("G9z0Bl")},{}]},{},["G9z0Bl"]);</script>
<script type="text/javascript">window.NREUM||(NREUM={});NREUM.info={"beacon":"beacon-1.newrelic.com","errorBeacon":"jserror.newrelic.com","licenseKey":"4460760967","applicationID":"438659","transactionName":"cQ5YEkJeCFpTQEsWXEEVRUlRQjtbV0APAlxFDw==","queueTime":0,"applicationTime":15,"ttGuid":"","agentToken":null,"agent":"js-agent.newrelic.com/nr-411.min.js"}</script>
<script type="text/javascript">window.NREUM||(NREUM={}),__nr_require=function(t,n,e){function r(e){if(!n[e]){var o=n[e]={exports:{}};t[e][0].call(o.exports,function(n){var o=t[e][1][n];return r(o?o:n)},o,o.exports)}return n[e].exports}if("function"==typeof __nr_require)return __nr_require;for(var o=0;o<e.length;o++)r(e[o]);return r}({D5DuLP:[function(t,n){function e(t,n){var e=r[t];return e?e.apply(this,n):(o[t]||(o[t]=[]),void o[t].push(n))}var r={},o={};n.exports=e,e.queues=o,e.handlers=r},{}],handle:[function(t,n){n.exports=t("D5DuLP")},{}],G9z0Bl:[function(t,n){function e(){var t=l.info=NREUM.info;if(t&&t.agent&&t.licenseKey&&t.applicationID&&p&&p.body){l.proto="https"===f.split(":")[0]||t.sslForHttp?"https://":"http://",i("mark",["onload",a()]);var n=p.createElement("script");n.src=l.proto+t.agent,p.body.appendChild(n)}}function r(){"complete"===p.readyState&&o()}function o(){i("mark",["domContent",a()])}function a(){return(new Date).getTime()}var i=t("handle"),u=window,p=u.document,s="addEventListener",c="attachEvent",f=(""+location).split("?")[0],l=n.exports={offset:a(),origin:f,features:[]};p[s]?(p[s]("DOMContentLoaded",o,!1),u[s]("load",e,!1)):(p[c]("onreadystatechange",r),u[c]("onload",e)),i("mark",["firstbyte",a()])},{handle:"D5DuLP"}],loader:[function(t,n){n.exports=t("G9z0Bl")},{}]},{},["G9z0Bl"]);</script>
<script type="text/javascript">window.NREUM||(NREUM={});NREUM.info={"beacon":"beacon-1.newrelic.com","errorBeacon":"jserror.newrelic.com","licenseKey":"4460760967","applicationID":"438659","transactionName":"cQ5YEkJeCFpTQEsWXEEVRUlRQjtbV0APAlxFDw==","queueTime":0,"applicationTime":8,"ttGuid":"","agentToken":null,"agent":"js-agent.newrelic.com/nr-411.min.js"}</script>
<script type="text/javascript">window.NREUM||(NREUM={}),__nr_require=function(t,n,e){function r(e){if(!n[e]){var o=n[e]={exports:{}};t[e][0].call(o.exports,function(n){var o=t[e][1][n];return r(o?o:n)},o,o.exports)}return n[e].exports}if("function"==typeof __nr_require)return __nr_require;for(var o=0;o<e.length;o++)r(e[o]);return r}({D5DuLP:[function(t,n){function e(t,n){var e=r[t];return e?e.apply(this,n):(o[t]||(o[t]=[]),void o[t].push(n))}var r={},o={};n.exports=e,e.queues=o,e.handlers=r},{}],handle:[function(t,n){n.exports=t("D5DuLP")},{}],G9z0Bl:[function(t,n){function e(){var t=l.info=NREUM.info;if(t&&t.agent&&t.licenseKey&&t.applicationID&&p&&p.body){l.proto="https"===f.split(":")[0]||t.sslForHttp?"https://":"http://",i("mark",["onload",a()]);var n=p.createElement("script");n.src=l.proto+t.agent,p.body.appendChild(n)}}function r(){"complete"===p.readyState&&o()}function o(){i("mark",["domContent",a()])}function a(){return(new Date).getTime()}var i=t("handle"),u=window,p=u.document,s="addEventListener",c="attachEvent",f=(""+location).split("?")[0],l=n.exports={offset:a(),origin:f,features:[]};p[s]?(p[s]("DOMContentLoaded",o,!1),u[s]("load",e,!1)):(p[c]("onreadystatechange",r),u[c]("onload",e)),i("mark",["firstbyte",a()])},{handle:"D5DuLP"}],loader:[function(t,n){n.exports=t("G9z0Bl")},{}]},{},["G9z0Bl"]);</script>
<script type="text/javascript">window.NREUM||(NREUM={});NREUM.info={"beacon":"beacon-1.newrelic.com","errorBeacon":"jserror.newrelic.com","licenseKey":"4460760967","applicationID":"438659","transactionName":"cQ5YEkJeCFpTQEsWXEEVRUlRQjtbV0APAlxFDw==","queueTime":0,"applicationTime":7,"ttGuid":"","agentToken":null,"agent":"js-agent.newrelic.com/nr-400.min.js"}</script>
<script type="text/javascript">window.NREUM||(NREUM={}),__nr_require=function(t,n,e){function r(e){if(!n[e]){var o=n[e]={exports:{}};t[e][0].call(o.exports,function(n){var o=t[e][1][n];return r(o?o:n)},o,o.exports)}return n[e].exports}if("function"==typeof __nr_require)return __nr_require;for(var o=0;o<e.length;o++)r(e[o]);return r}({D5DuLP:[function(t,n){function e(t,n){var e=r[t];return e?e.apply(this,n):(o[t]||(o[t]=[]),void o[t].push(n))}var r={},o={};n.exports=e,e.queues=o,e.handlers=r},{}],handle:[function(t,n){n.exports=t("D5DuLP")},{}],G9z0Bl:[function(t,n){function e(){var t=l.info=NREUM.info;if(t&&t.agent&&t.licenseKey&&t.applicationID){l.proto="https"===f.split(":")[0]||t.sslForHttp?"https://":"http://",i("mark",["onload",a()]);var n=p.createElement("script");n.src=l.proto+t.agent,p.body.appendChild(n)}}function r(){"complete"===p.readyState&&o()}function o(){i("mark",["domContent",a()])}function a(){return(new Date).getTime()}var i=t("handle"),u=window,p=u.document,s="addEventListener",c="attachEvent",f=(""+location).split("?")[0],l=n.exports={offset:a(),origin:f,features:[]};p[s]?(p[s]("DOMContentLoaded",o,!1),u[s]("load",e,!1)):(p[c]("onreadystatechange",r),u[c]("onload",e)),i("mark",["firstbyte",a()])},{handle:"D5DuLP"}],loader:[function(t,n){n.exports=t("G9z0Bl")},{}]},{},["G9z0Bl"]);</script><body></body>
<script src="http://gamingJS.com/Three.js"></script>
<script src="http://gamingJS.com/ChromeFixes.js"></script>
<script>
var log = document.createElement('div');
log.style.height = '75px';
log.style.width = '450px';
log.style.overflow = 'auto';
log.style.border = '1px solid #666';
log.style.backgroundColor = '#ccc';
log.style.padding = '8px';
log.style.position = 'absolute';
log.style.bottom = '10px';
log.style.right = '20px';
document.body.appendChild(log);

logMessage('Hello, JavaScript functions!', log);
logMessage('My name is Chris.', log);
logMessage('I like popcorn.', log);

function logMessage( message, log) {
  var holder = document.createElement('div');
  holder.textContent = message; log.appendChild( holder);
}


</script>

here is a test that worked:

<body></body>
<script src="http://gamingJS.com/Three.js"></script>
<script src="http://gamingJS.com/ChromeFixes.js"></script>
<script>
var loga = document.createElement('diva');
loga.style.height = '200px';
loga.style.width = '500px';
loga.style.overflow = 'auto';
loga.style.border = '1px solid #666';
loga.style.backgroundColor = '#ccc';
loga.style.padding = '8px';
loga.style.position = 'absolute';
loga.style.bottom = '10px';
loga.style.right = '20px';
document.body.appendChild(loga);

logMessage('Hello, JavaScript functions!', loga);
logMessage('My name is Chris.', loga);
logMessage('I like popcorna.', loga);

function logMessage( message, log) {
  var holder = document.createElement('diva');
  holdera.textContent = message;
  loga.appendChild(holdera);
}


var log = document.createElement('div');
log.style.height = '75px';
log.style.width = '450px';
log.style.overflow = 'auto';
log.style.border = '1px solid #666';
log.style.backgroundColor = '#ccc';
log.style.padding = '8px';
log.style.position = 'absolute';
log.style.bottom = '10px';
log.style.right = '20px';
document.body.appendChild(log);

logMessage('Hello, JavaScript functions!', log);
logMessage('My name is Chris.', log);
logMessage('I like popcorn.', log);

function logMessage( message, log) {
  var holder = document.createElement('div');
  holder.textContent = message; log.appendChild( holder);
}

</script>

this is code that only simi-worked:

<body></body>
<script src="http://gamingJS.com/Three.js"></script>
<script src="http://gamingJS.com/ChromeFixes.js"></script>
<script>
var log = makeLog();
logMessage('Hello, JavaScript functions!', log);
logMessage('My name is Chris.', log);
logMessage('I like popcorn.', log);

function makeLog() {
  var holder = document.createElement('div');
  holder.style.height = '75px';
  holder.style.width = '450px';
  holder.style.overflow = 'auto';
  holder.style.border = '1px solid #666';
  holder.style.backgroundColor = '#ccc';
  holder.style.padding = '8px';
  holder.style.position = 'absolute';
holder.style.bottom = '10px';
holder.style.right = '20px';
document.body.appendChild( holder);
return holder;
}
</script>

and

<body></body>
<script src="http://gamingJS.com/Three.js"></script>
<script src="http://gamingJS.com/ChromeFixes.js"></script>
<script>
var Log = makeLog();
logMessage('Hello, JavaScript functions!', log);
logMessage('My name is Chris.', log);
logMessage('I like popcorn.', log);

function makeLog(){
  var holder = document.createElement('div');
  holder.style.height = '75px';
  holder.style.width = '450px';
  holder.style.overflow = 'auto';
  holder.style.border = '1px solid #666';
  holder.style.backgroundColor = '#ccc';
  holder.style.padding = '8px';
  holder.style.position = 'absolute';
  holder.style.bottom = '10px';
  holder.style.right = '20px';
  document.body.appendChild(holder);
  return holder;
}

function logMessage( message, log) {
  var holder = document.createElement('div');
  holder.textContent = message;
  log.appendChild( holder);
}

</script>

previously made

<body></body>
<script src="http://gamingJS.com/Three.js"></script>
<script src="http://gamingJS.com/ChromeFixes.js"></script>
<script>
var log = document.createElement('div');
log.style.height = '75px';
log.style.width = '450px';
log.style.overflow = 'auto';
log.style.border = '1px solid #666';
log.style.backgroundColor = '#ccc';
log.style.padding = '8px';
log.style.position = 'absolute';
log.style.bottom = '10px';
log.style.right = '20px';
document.body.appendChild(log);

logMessage('Hello, JavaScript functions!', log);
logMessage('My name is Chris.', log);
logMessage('I like popcorn.', log);

function logMessage( message, log) {
  var holder = document.createElement('div');
  holder.textContent = message; log.appendChild( holder);
}


</script>

the only semi-working ones had a empty box please reply as soon as you can and thanks again.

02 Jun 2014, 00:57
Generic-user-small

Nathan Tuvey (9 posts)

Sorry about the huge pics. I don’t know how to shrink them.

02 Jun 2014, 23:58
Generic-user-small

Nathan Tuvey (9 posts)

also is the curly ‘ make the words inside appear blue? thanks, Nathan

03 Jun 2014, 13:15
Generic-user-small

Alan Yorinks (5 posts)

Hi, I am working with the Shapes program in the first chapter and seem to be having problem adding additional shapes past the sphere. My code is shown below. If I comment out the “scene.add(ball);” and “ball.set.position(-250,250,-250);” I see the rectangle, but if these lines are active, nothing appears. I am using Chrome Version 34.0.1847.116 Ubuntu 14.04 aura (260972)

<body></body>
<script src="http://gamingJS.com/Three.js"></script>
<script src="http://gamingJS.com/ChromeFixes.js"></script>
<script>
  // This is where stuff in our game will happen:
  var scene = new THREE.Scene();

  // This is what sees the stuff:
  var aspect_ratio = window.innerWidth / window.innerHeight;
  var camera = new THREE.PerspectiveCamera(75, aspect_ratio, 1, 10000);
  camera.position.z = 500;
  scene.add(camera);

  // This will draw what the camera sees onto the screen:
  var renderer = new THREE.CanvasRenderer();
  renderer.setSize(window.innerWidth, window.innerHeight);
  document.body.appendChild(renderer.domElement);

  // ******** START CODING ON THE NEXT LINE ********
  var shape = new THREE.SphereGeometry(100, 20, 15);
  var cover = new THREE.MeshNormalMaterial();
  var ball = new THREE.Mesh(shape, cover);
  scene.add(ball);
  
  // comment out the following line to show the ball
  ball.set.position(-250,250,-250);
  
  var shape = new THREE.CubeGeometry(100, 100, 100);
  var cover = new THREE.MeshNormalMaterial();
  var box = new THREE.Mesh(shape, cover);
  scene.add(box);

  

  // Now, show what the camera sees on the screen:
  renderer.render(scene, camera);
</script>
04 Jun 2014, 04:05
Chris_strom_headshot_200_pragsmall

Chris Strom (83 posts)

@Nathan,

If you’re not already doing so, be sure to check the JavaScript console for errors (as described in chapter 2). The semi-working ones have errors telling you what’s going wrong. In one, there is no function named logMessage(). In another, you named the variable Log instead of log (the JavaScript console will tell you there is no variable named log).

As you get better and better at JavaScript programming, you’ll use the JavaScript console more and more. I have it open all day long. Really :)

Thanks for the images. Those actually look fine. The apostrophes turn the strings blue. If you had the curly braces, the string would stay black. I’m not sure where there curly quotes came from in your original post. That’s a mystery.

04 Jun 2014, 04:15
Chris_strom_headshot_200_pragsmall

Chris Strom (83 posts)

@Alan,

You mis-typed the ball’s position setting. It should be ball.position.set(-250,250,-250) instead of ball.set.position(-250,250,-250).

That’s an easy mistake to make when getting used to JavaScript — other languages make setting values easier to program. A general rule of thumb is that code should read something like an English sentence. The thing being changed (the position) comes first, followed by the verb that describes the action being taken. In this case, it’s a weak analogy because setting is not much of an action word—which is why I say that JavaScript is not the best language at setting values. Adding things to the scene ( scene.add() ) and rendering the screen renderer ( renderer.render() ) follow the convention a little better.

Anyway, your code will work by reversing set and position on the problem line.

04 Jun 2014, 14:41
Generic-user-small

Nathan Tuvey (9 posts)

THANK YOU

04 Jun 2014, 14:53
Generic-user-small

Alan Yorinks (5 posts)

@chris Thanks. My eyes are just not what they used to be ;-).

11 Aug 2014, 05:03
Generic-user-small

Tim Berger (1 post)

Hi Chris,

Quick question: I keep receiving an error (“Uncaught TypeError: Cannot set property ‘x’ of undefined”) whenever I try the shakeTree function. The problem seems to be with this line and particularly with “…position.x”:

trees[tree_with_treasure].position.x = 75 * Math.sin(this.x);

Has anyone else had this issue? I can post my whole code if need be but I changed some things slightly.

Thanks

11 Aug 2014, 23:08
Chris_strom_headshot_200_pragsmall

Chris Strom (83 posts)

@Tim - I would have to see your entire code to troubleshoot. I can tell you for certain that whatever is in the trees list is not a Mesh – otherwise the position property would not be undefined as the error is indicating.

Depending on how much you changed things, the most likely cause is not returning top from the makeTreeAt() function as described in chapter 11. In the code from the book, we add the result of makeTreeAt() to the list of trees. If makeTreeAt() returns nothing, then our list of trees would be a list of nothing – and setting the position of nothing would result in the error that you are seeing.

Hopefully that helps, but if not, paste your code here – either using ICE’s share option or pasting the entire contents directly in your reply (be sure to put the three tildes above and below):

 ~~~
  // You would paste your code here...
 ~~~

Sorry for the problems. We’ll get them sorted out!

15 Aug 2014, 20:59
Generic-user-small

Cameron Williams (1 post)

I am stuck on the Purple fruit monster game. my code looks like this:

<body></body>
<script src="http://gamingJS.com/Three.js"></script>
<script src="http://gamingJS.com/physi.js"></script>
<script src="http://gamingJS.com/Scoreboard.js"></script>
<script src="http://gamingJS.com/ChromeFixes.js"></script>
<script> 
// Physics settings
Physijs.scripts.ammo = 'http://gamingjs.com/ammo.js';
Physijs.scripts.worker = 'http://gamingjs.com/physijs_worker.js';
  
  // This is where stuff in our game will happen:
  var scene = new Physijs.Scene({ fixedTimeStep: 2 / 60 });
  scene.setGravity(new THREE.Vector3( 0, -100, 0 ));
  
  // This is what sees the stuff:
  var aspect_ratio = window.innerWidth / window.innerHeight;
  var camera = new THREE.PerspectiveCamera(75, aspect_ratio, 1, 10000);
  camera.position.z = 200;
  camera.position.y = 100;
  scene.add(camera);
 
  // This will draw what the camera sees onto the screen:
  var renderer = new THREE.WebGLRenderer();
  renderer.setSize(window.innerWidth, window.innerHeight);
  document.body.appendChild(renderer.domElement);

  // ******** START CODING ON THE NEXT LINE ********
var ground = addGround();
var avatar = addAvatar();
var scoreboard = addScoreboard();
animate();
gameStep();

function addGround() {
  document.body.style.backgroundColor = '#87CEEB';
  ground = new Physijs.PlaneMesh(
    new THREE.PlaneGeometry(1e6, 1e6),
    new THREE.MeshBasicMaterial({color: 0x7CFC00})
  );
  ground.rotation.x = -Math.PI/2;
  scene.add(ground);
  return ground;
}
function addAvatar() {
  avatar = new Physijs.BoxMesh(
    new THREE.CubeGeometry(40, 50, 1),
    new THREE.MeshBasicMaterial({color: 0x800080})
  );
  avatar.position.set(-50, 50, 0);
  scene.add(avatar);
  
  avatar.setAngularFactor(new THREE.Vector3( 0, 0, 0 )); // no rotation
  avatar.setLinearFactor(new THREE.Vector3( 1, 1, 0 )); //only move on x/y axes
  avatar.setLinearVelocity(new THREE.Vector3( 0, 150, 0 ));
  avatar.addEventListener('collision', function(object) {
    if (object.is_fruit) {
      scoreboard.addpoints(100);
      avatar.setLinearVelocity(new THREE.Vector3( 0, 50, 0));
      scene.remove(object);
    }
    if (object == ground) {
      game_over = true;
      scoreboard.message ("Game Over!");
    }
  });
  return avatar;
  }
  
  function addScoreboard() {
    var scoreboard = new Scoreboard();
    scoreboard.score(0);
    scoreboard.help('Use arrow keys to move and the spacebar to jump');
    return scoreboard;
  }




  // Now, show what the camera sees on the screen:
  var game_over = false;
  function animate() {
    if (game_over) return;
    
    requestAnimationFrame(animate);
    scene.simulate(); // run physics
    renderer.render(scene, camera);
}

function gameStep() {
  if (game_over) return;
  
  launchFruit();
  setTimeout(gameStep, 3*1000);
}

function launchFruit() {
  var fruit = new Physijs.ConvexMesh(
    new THREE.CylinderGeometry(20, 20, 1, 24),
    new THREE.MeshBasicMaterial({color: 0xff0000})
  );
  
  fruit.is_fruit = true;
  fruit.setAngularFactor(new THREE.Vector3( 0, 0, 1 ));
  fruit.setLinearFactor(new THREE.Vector3( 1, 1, 0));
  fruit.position.set(300, 20, 0);
  fruit.rotation.x = Math.PI/2;
  scene.add(fruit);
  fruit.setLinearVelocity(
    new THREE.Vector3(-150, 0, 0)
  );
}
   
   document.addEventListener("keydown", function(event) {
     var code = event.keyCode;
     
     if (code == 37) left(); // left arrow
     if (code == 39) right(); //right arrow
     if (code == 38) up(); //up arrow
     if (code == 32) up();  //spacebar
   });

function left()  { move(-50, 0); }
function right() { move(50, 0); }
function up()    { move(avatar.getLinearVelocity().x, 50); }

function move(x, y) {
  avatar.setLinearVelocity(
    new THREE.Vector3(x, y, 0)
  );
}

</script>

it doesnt seem to be working… i’ve read through it three or four times and found one error. hat i wasnt running the webgl renderer. i fixed that, and the scoreboard still will not score. thanks,

Cameron

16 Aug 2014, 16:36
Chris_strom_headshot_200_pragsmall

Chris Strom (83 posts)

@Cameron Did you check the JavaScript console? It should give you some idea where the problem is. I’ll tell you the answer this time, but be sure to check the next time – the JavaScript console is a JavaScript programmer’s best friend.

Anyway, on line 57, you have:

      scoreboard.addpoints(100);

It should be (capital “P” in addPoints):

      scoreboard.addPoints(100);

That’s it! As near as I can tell you did everything else perfectly :)

  You must be logged in to comment