paulmo

Nice tables Dave, thank you! The conversions are a good reference. Yes this API does not seem to produce accurate readings even though it is highly regarded. I'm in portland, me (not oregon)

Thanks, this seems like a loop, so how to build in variable and print loop? for (var i = 0; i < data.list.length; i++) { document.getElementById("datadiv").innerHTML = data.city.name + " " + data.list[i].main.temp;

Thanks Ingolme, I reference W3Schools often, and sometimes I need help connecting the dots. Any input on accessing the elements with the "forecast" parameter is greatly appreciated.

Dave, thanks, but please show how to print that out with forecast as parameter, not weather: http://api.openweathermap.org/data/2.5/forecast?q=portland,me&callback=hollaback

JSG, thanks, how do I print these temps out in a div? for (var i = 0; i < data.list.length; i++) { console.log(data.list[i].main.temp);} This just gives me last temp: for (var i = 0; i < data.list.length; i++) { document.getElementById("datadiv").innerHTML = data.city.name + " " + data.list[i].main.temp; Are you just unsure about how to access arrays? If you do ar[0 - 9] you are doing subtraction, that is ar[-9]. Array indexing does not support ranges, a list, or whatever else, it's a single index that you are looking up. Apparently I am unsure as I was trying to access a range in the array.

Thanks Davej, if you could help with getting results from "forecast" parameter in this JSON that would be great. If I list [0] or [3] etc. in data.list below and print the "arr" variable, I get a temp. If I try a range [0 - 9], I get nothing. If I don't put the [ ] with list, I get error "temp undefined." If I print either "keys" or "key" variable (instead of arr), I get nothing. I'd like to print all the temps in the JSON. var arr = data.list[0].main.temp; var keys = []; for (var key in arr) { keys.push(key); } document.getElementById("datadiv").innerHTML = data.city.name + " " + arr;

Thanks, no I'm not just guessing, I'm looking at JSON, which I will post if requested. Meanwhile, this gives me one instance of "temp" (in this example, third temp, but I need all instances of). var arr = data.list[0, 1, 2 ].main.temp; var keys = []; for (var key in arr) { keys.push(key); } //return Object.keys(data.list); document.getElementById("datadiv").innerHTML = data.city.name + " " + arr; //*}; * calling "keys" instead of "arr" gives me no temp at all.

<script src="http://api.openweathermap.org/data/2.5/forecast?q=portland,me&callback=hollaback"</script> is the data structure I need help with. window.hollaback = function(data) { var arr = data.list; var keys = []; for (var key in arr) { keys.push(key); } document.getElementById("datadiv").innerHTML = data.city.name + " " + keys;}; gives me: Portland 0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35 replacing var arr = data.list; with var arr = data; gives: Portland cod,message,city,cnt,list But I need to use elements in the data, like temp, etc., and var arr = data.main.temp throws I've tried var arr = data.temp which only outputs Portland, and no errors. Thanks for any help accessing this JSON data structure.

Thanks, if response for URL = Status, it's 200 OK on the "weather" and "forecast", but only "weather" parameter shows the data.

Displaying JSON data from weather API (that supports JSONP), "weather" parameter works, but I'm not having success with "forecast." I'm including links for brevity rather than posting JSON: http://api.openweathermap.org/data/2.5/weather?q=portland,me&callback=hollaback http://api.openweathermap.org/data/2.5/forecast?q=portland,me&callback=hollaback So the following works, but when I change "weather" to "forecast" in src, I'm not able to retrieve temp or anything other than city (data.name works with "forecast"). And getting no errors in console or network window (200). Please advise how to get temp, wind, etc. from "forecast." <script>window.hollaback = function(data) { document.getElementById("datadiv").innerHTML = data.name + " " + data.main.temp;};</script><script src="http://api.openweathermap.org/data/2.5/weather?q=portland,me&callback=hollaback"</script>

Thanks, no errors in console. I'm guessing some dependencies missing. If you have a minute please take a look at source.

Thanks, (function() { prevents errors but game still not rendering. Further advice appreciated.

Want to get this Chrome/Chromium Game to work locally. So I put contents of offline.js in body of an HTML file, with no divs etc. since it's making its own with createElement. First, getting unexpected ( token syntax error on this: <script>function () {'use strict'; So I commented it and closing } (); out, which prevents errors, but game is not rendering in Chromium window when I open HTML file. Suggestions how to get this game working locally?

Thanks Ingolme. Happy New Year.

Please advise why this only replaces the first instance of "Linux" in the JSON object "result": getJSON('https://www.googleapis.com/freebase/v1/text/en/linus_torvalds').then(function(data) { var change = JSON.stringify(data.result).replace("Linux", "Windex"); for (var i = 0, len = change.length; i < len; i++) { result.innerText = change; }}, The for loop isn't doing anything here...same result if I take it out. Thanks.

Wow Ignolme, thank you! Works beautifully, you even included friction. Now I'll start applying it to the game. I'm grateful.

I'm back, with working gameloop and requestAnimationFrame, but still unsure where to include GameController function so that it interfaces with the underlying game; if I include GameController high up in body, it overlays on the canvas (in a separate layer so that game reset button cannot be clicked at that point), or if I wrap GameController function around the game's setKey section (shown below), the game and the controller both do not render at all. The gamecontroller.js script detects a game's keyboard mapping and applies that to a d-pad, so GameController.init() should work out of the box if I put it in the right place: GameController.init( { left: { type: 'joystick' // needs to apply to cases 37, 38, 39, 40 (below) }, right: { position: { // right: '5%' }, type: 'buttons', buttons: [ { label: 'Zap!', fontSize: 13, touchStart: function() { // this needs to be case 32 SPACE key section (below) } }, false, false, false ] } }); // end GameController() Again here is the functioning keyboard command section of game! (gamecontroller.js script mirrors these mappings exactly.) (function() {var pressedKeys = {}; function setKey(event, status) {var code = event.keyCode;var key; switch(code) {case 32: key = "SPACE"; break;case 37: key = "LEFT"; break; case 38: key = "UP"; break; case 39: key = "RIGHT"; break;case 40: key = "DOWN"; break;default: //ASCII to letterskey = String.fromCharCode(code);}pressedKeys[key] = status; }document.addEventListener("keydown", function(e) {setKey(e, true);});document.addEventListener("keyup", function(e) {setKey(e, false);});window.addEventListener("blur", function() {pressedKeys = {};});window.input = {isDown: function(key) {return pressedKeys[key.toUpperCase()];}}; Ignolme, your previous normalizedX and Y comments enabled me to do interesting things like draw circles along a line or vector for different coordinate touches, but the gamecontroller.js script converts whatever is happening in keyboard mappings, to touch controller...I'm just not applying it correctly...so any suggestion greatly appreciated.

Thanks for notes about game loop, inputBuffer and values updates. For starters I'll just move a shape along a line for various touches (left/down, left/up etc.). I'm aware that game dev is hard and moving a shape with a joystick is basic for most. Thanks again for showing how normalizedX and Y fits in the main function. I'm able to get alerts on that and render different shapes for touch areas on the joystick, which is a start.

Starting fresh, trying to move a rectangle with virtual joystick (touch only). Joystick and rectangle are rendering in canvas and coordinate alerts are working when using joystick. Now how do I fit these functions to move the rectangle? The rectangle should move in proportion to X/Y joystick movement. Thanks in advance for direction. <script>function shape() { var cs = document.getElementById("2d"); var ctx = cs.getContext("2d"); ctx.clearRect(0, 0, 300, 90); ctx.beginPath(); ctx.rect(80, 60, 140, 70); ctx.fillStyle="blue"; ctx.fill();} </script></head><body onload = "shape()"><script>GameController.init( { //gamecontroller.js in head left: { type: 'joystick', joystick: { touchMove : function(data) { if(data.normalizedX < -0.1 && data.normalizedY < 0.1) { // Move/translate Rect. here. Alerts work! Cont'd... alert("left, down") } else if(data.normalizedX < -0.1 && data.normalizedY > 0.1) { alert("left, up") } else if(data.normalizedX > -0.1 && data.normalizedY < 0.1) { alert("right, down") } else { alert("right, up") }

My canvas variable and controller's were named the same, and both appendChild elements, so I renamed my canvas variable and that didn't change anything. Also, I see now library converts physical keyboard events to touch responses (snippet): right: { width: '15%', height: '7%', stroke: 2, touchStart: function() { GameController.simulateKeyEvent( 'press', 39 ); GameController.simulateKeyEvent( 'down', 39 ); }, touchEnd: function() { GameController.simulateKeyEvent( 'up', 39 ); so I commented out event listeners previously included in game section: // The event listenerstouchMove : function(data) { //etc. that doesn't change anything either: the controller is rendered on top of my game, but there's no functionality. I don't know how to do that...looking at controller library, this should be seamless. If I wanted to do finger doodles on my phone I'd be all set: that's what docs focus on, including MDN.

Thanks, making setKey() global fixed that error. I have read through the library. Creating a new canvas element renders the controller, but it doesn't solve the problem of overlaid canvas controller layer 1) not moving the man sprite and 2) blocking touch response to underlying game layer. For example game reset button doesn't work when controller layer is applied. So the controller is not moving the man sprite, and it's blocking (not visually) functionality of the game layer.

Update: controller is rendering (but not functioning, setKey is not defined: Un(setKey({ keyCode : 37 }, false);, and controller only renders if I include another canvas element in game... <canvas id= "canvas" width= "512" height="480"></canvas> ...on top of pre-existing game canvas: var canvas = document.createElement("canvas");canvas.id = "2d";var ctx = canvas.getContext("2d");canvas.width = 512;canvas.height = 480;document.body.appendChild(canvas); I'm stumped...Hallock's gamecontroller.js should be overlaying its own canvas for the controller...I'm noticing that controller's canvas should be document.body.appendChild(canvas), same as my game canvas...does this create a conflict? / Grab the canvas if one wasn't passed var ele; if( !this.options.canvas || !( ele = document.getElementById( this.options.canvas ) ) ) { this.options.canvas = document.getElementsByTagName( 'canvas' )[0]; } else if( ele ) { this.options.canvas = ele; } this.options.ctx = this.options.canvas.getContext( '2d' ); // Create a canvas that goes directly on top of the game canvas this.createOverlayCanvas(); }, /** * Finds the actual 4 corners of canvas that are being used (so we don't have to clear the entire canvas each render) * Called when each new touchableArea is added in * @param {object} options - x, y, width, height */ boundingSet: function( options ) { var directions = ['left', 'right']; // Square - pivot is top left if( options.width ) { var width = this.getPixels( options.width ); var height = this.getPixels( options.height ); var left = this.getPixels( options.x ); var top = this.getPixels( options.y ); } // Circle - pivot is center else { if( this.options.touchRadius ) var radius = this.getPixels( options.radius ) * 2 + ( this.getPixels( this.options.touchRadius ) / 2 ); // size of the box the joystick can go to else var radius = options.radius; var width = height = ( radius + this.getPixels( options.stroke ) ) * 2; var left = this.getPixels( options.x ) - ( width / 2 ); var top = this.getPixels( options.y ) - ( height / 2 ); } var right = left + width; var bottom = top + height; if( this.bound.left === false || left < this.bound.left ) this.bound.left = left; if( this.bound.right === false || right > this.bound.right ) this.bound.right = right; if( this.bound.top === false || top < this.bound.top ) this.bound.top = top; if( this.bound.bottom === false || bottom > this.bound.bottom ) this.bound.bottom = bottom; }, /** * Creates the canvas that sits on top of the game's canvas and holds game controls */ createOverlayCanvas: function() { this.canvas = document.createElement( 'canvas' ); // Scale to same size as original canvas this.resize( true ); document.getElementsByTagName( 'body' )[0].appendChild( this.canvas ); this.ctx = this.canvas.getContext( '2d' ); var _this = this; window.addEventListener( 'resize', function() { // Wait for any other events to finish setTimeout( function() { GameController.resize.call( _this ); }, 1 ); } ); // Set the touch events for this new canvas this.setTouchEvents(); // Load in the initial UI elements this.loadSide( 'left' ); this.loadSide( 'right' ); // Starts up the rendering / drawing this.render(); if( ! this.touches || this.touches.length == 0 ) this.paused = true; // pause until a touch event }, pixelRatio: 1, resize: function( firstTime ) { // Scale to same size as original canvas this.canvas.width = this.options.canvas.width; this.canvas.height = this.options.canvas.height; this.offsetX = GameController.options.canvas.offsetLeft + document.body.scrollLeft; this.offsetY = GameController.options.canvas.offsetTop + document.body.scrollTop; // Get in on this retina action if( this.options.canvas.style.width && this.options.canvas.style.height && this.options.canvas.style.height.indexOf( 'px' ) !== -1 ) { this.canvas.style.width = this.options.canvas.style.width; this.canvas.style.height = this.options.canvas.style.height; this.pixelRatio = this.canvas.width / parseInt( this.canvas.style.width ); } this.canvas.style.position = 'absolute'; this.canvas.style.zIndex = '5'; this.canvas.style.left = this.options.canvas.offsetLeft + 'px'; this.canvas.style.top = this.options.canvas.offsetTop + 'px'; this.canvas.setAttribute( 'style', this.canvas.getAttribute( 'style' ) +' -ms-touch-action: none;' );

Thanks Ingolme, making some progress, will report back when I get stuck.

Thanks, these are mechanics functions; please suggest how apply to touchMove conditional: (function() {var pressedKeys = {}; function setKey(event, status) {var code = event.keyCode;var key; switch(code) {case 32: key = "SPACE"; break; // shoots bulletscase 37: key = "LEFT"; break; case 38: key = "UP"; break; case 39: key = "RIGHT"; break;case 40: key = "DOWN"; break;default: }pressedKeys[key] = status; }document.addEventListener("keydown", function(e) {setKey(e, true);});document.addEventListener("keyup", function(e) {setKey(e, false);});window.addEventListener("blur", function() {pressedKeys = {};}); function handleInput(dt) {if(input.isDown("DOWN") || input.isDown("s")) { // move sprite man virtual joystickplayer.pos[1] += playerSpeed * dt;}if(input.isDown("UP") || input.isDown("w")) {player.pos[1] -= playerSpeed * dt;}if(input.isDown("LEFT") || input.isDown("a")) {player.pos[0] -= playerSpeed * dt;}if(input.isDown("RIGHT") || input.isDown("d")) {player.pos[0] += playerSpeed * dt;}

My canvas sprite (man) moves by arrow keys, now I need sprite man to move by touch, using either an image or canvas-rendered shape in corner of screen (testing with Chrome's Emulator). This joystick image/shape will control (up/down/left/right) sprite man. I've done MDN's tutorial, which draws lines along finger movement; I've done Austin Hallock's demo, which shows coordinates as finger moves around virtual joystick, but I'm not finding how to control a sprite with another image or canvas-rendered shape. So my setKey function and associated document.addEventListener in the "arrow key" section of my game needs to correspond to canvas image/area whose touch events make sprite man move. Help greatly appreciated for pointing me in right direction.