Search the Community

Showing results for tags 'javascript'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • HTML5 Game Coding
    • News
    • Game Showcase
    • Facebook Instant Games
    • Coding and Game Design
  • Frameworks
    • Phaser 3
    • Phaser 2
    • Pixi.js
    • Babylon.js
    • Panda 2
    • melonJS
    • Haxe JS
    • Kiwi.js
  • General
    • General Talk
  • Business
    • Collaborations (un-paid)
    • Jobs (Hiring and Freelance)
    • Services Offered

Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


Website URL


Twitter


Skype


Location


Interests

Found 687 results

  1. I haven't tried it yet, but it looks really interesting. http://codecombat.com/
  2. Hi All, We're looking for someone with a really amazing knowledge of JavaScript and a passion for games to work with us. If anyone is interested, there is much more information here: http://careerssearch.bbc.co.uk/jobs/job/Senior-Software-Engineer-Childrens-Games-Stream/5803 Thanks!
  3. Award winning digital creative agency specializing in multi-platform branding solutions. A leader in creativity and technology, the 9 year old company has developed a roster of top clients, including Adobe, Electronic Arts, HP, Mattel, Marvel, Microsoft, Sony Pictures, Universal, Warner Bros. and more.We are currently seeking a game developer experienced with developing match three game logic using Javascript in HTML5 Canvas. - Must be LA-based on-site only; no recruiters or staffing agencies- Must have a passion for technology and development with a dedication and desire of perfection- Experience with software development life-cycle including design and implementation, unit testing, and production deployment- Must have strong verbal and written communication skills- Must be detail-oriented and self-motivated- Good communicator with willingness to ask questions and be part of a team Minimum Requirements:- Skilled in HTML5, CSS3 & Javascript- Knowledge of development for mobile devices and HTML5 compatible browsers- Must have deep experience creating games for HTML5 Canvas- Needs to be comfortable with creating game logic relevant to a "Match 3" game- Needs to be comfortable with basic MVC frameworks Responsibilities:- Will be building a game framework/level manager to hold all game worlds/levels (built as component that can be plugged into a larger site framework)- Will be building a scorekeeper, power-up management, etc- Will be responsible for game logic for each level (unique gameplay characteristics for each level, power-ups, etc)
  4. Hello everyone, Lately I have been making a bunch of small web games. Therefore I'm quite interrested in: How to calculate the FPS of the game. I make my games in plain Javascript, and therefore I would like to know how to calculate the FPS in plain Javascript. I hope that was enough explanation. Thanks!
  5. Is there any way to get browser info via Phaser? I saw that this link here http://www.quirksmode.org/js/detect.html says how to do it but I was wondering if Phaser already has something in it.
  6. Hi All, I am in need of multiple HTML5 Games Developers to work for a global organisation based in the Midlands. 2x HTML5 Team Leaders 6x Senior HTML5 Developers Both positions are available on a contract/permanent basis, with flexible and very lucrative rates of pay. The role will be working on browser based games to run on mobile platforms. We do also offer a great referral scheme, for those of you who are currently unavailable but have colleagues who may be interested. Experience with the following would be beneficial; HTML5 (I know, surprising) JavascriptCSS/3Knowledge of mobile technologyFull Software Life-cycle (Any methodology)As to stand out from a typical 'run of the mill advert' offering 'competitive' salaries, I can divulge the daily rate can reach up to £375 per day, and the permanent positions can reach up to £50,000 per annum. Hope that can twist a few arms. Thanks for reading all, look forward to your applications, and happy developing! - Josh, ECS Consulting "To the person who stole my Microsoft Office... I will hunt you down, you have my Word."
  7. requestAnimationFrame, setTimeout and setInterval all run the function you give them asynchronously, does anyone know of a simple workaround/alternative? I cant be the only one who ran into problems with this.
  8. I have many problems with HTML 5 for mobile. See photo (same photo) when I'm running on an Android tablet HTML and side as compared running in a browser on mac. http://img545.imageshack.us/img545/562/brdr.png Note that black and white lines appear in the image into the Android Tablet. I'm using the library CreateJS to generate images. In the image the only thing I do is to change x, y, scaleX and scaleY. PS: The images are in PNG transparent.
  9. Hi, could someone please explain what a widget library is and where would you find the result of it on your game, or on whatever you're building? Thanks!
  10. Hello all, Im an ios Developer trying to explore phaser. I am having problems getting started with the examples. I understand that it is a silly one. Please help me out. I am able to setup everything. I even executed the HelloParser which was there in the Docs folder. I am using apache tomcat as the server and I installed php5 on my Ubuntu system. Then, I copied the examples folder to my www folder of my server and this is what I got (Pic attached): But nothing is happening when I click on any of the buttons. For e.g: If i select sprite 1, a blank page is displayed. Please help. I want to catch up on HTML5 and developing web based games using Phaser. Thanks, Kiran Kulkarni
  11. Hi. I'm trying to move my space jet so that way it is facing the left when I move the arrow key left, and it is facing right when I move the arrow key right. Any help would be greatly appreciated. Thanks. Here's my code in Javascript: var canvasBg = document.getElementById('canvasBg');var ctxBg = canvasBg.getContext('2d');var canvasJet = document.getElementById('canvasJet');var ctxJet = canvasJet.getContext('2d');var jet1;var gameWidth = canvasBg.width;var gameHeight = canvasBg.height; var fps = 10;var drawInterval;var imgSprite = new Image();imgSprite.src = 'sprite.png';imgSprite.addEventListener('load',init,false);//MAIN FUNCTIONSfunction init() { drawBg(); startDrawing(); jet1 = new Jet(); document.addEventListener('keydown',checkKeyDown,false); document.addEventListener('keyup',checkKeyUp,false);}function draw() { jet1.draw();}function startDrawing() { stopDrawing(); drawInterval = setInterval(draw,fps); }function stopDrawing() { clearInterval(drawInterval);}function drawBg() { var srcX = 0; var srcY = 0; var drawX = 0; var drawY = 0; ctxBg.drawImage(imgSprite,srcX,srcY,gameWidth,gameHeight,drawX,drawY,gameWidth,gameHeight); }function clearCtxBg() { ctxBg.clearRect(0,0,gameWidth,gameHeight); }//END OF MAIN FUNCTIONS//Jet functionsfunction Jet() { this.srcX = 0; this.srcY = 500; this.drawX = 200; this.drawY = 200; this.width = 100; this.height = 50; this.speed = 2; this.isUpKey = false; this.isRightKey = false; this.isDownKey = false; this.isLeftKey = false;}Jet.prototype.draw = function () { clearCtxJet(); this.checkKeys(); ctxJet.drawImage(imgSprite,this.srcX,this.srcY,this.width,this.height,this.drawX,this.drawY,this.width,this.height); };Jet.prototype.checkKeys = function () { if(this.isUpKey) { this.drawY -= this.speed; } if(this.isRightKey) { this.drawX += this.speed; } if(this.isDownKey) { this.drawY += this.speed; } if(this.isLeftKey) { this.drawX -= this.speed; }};function clearCtxJet() { ctxJet.clearRect(0,0,gameWidth,gameHeight); }//END JET FUNCTIONS//EVENT FUNCTIONSfunction checkKeyDown(e) { var keyID = e.keyCode || e.which; /// === mean exactly equal to /// || mean 'OR'. if (keyID === 38 || keyID === 87) { //38 means up arrow key and 87 means 'W' key. jet1.isUpKey = true; // prevent page from srcolling e.preventDefault(); } if (keyID === 39 || keyID === 68) { //38 means up arrow key and 87 means 'W' key. jet1.isRightKey = true; // prevent page from srcolling e.preventDefault(); } if (keyID === 40 || keyID === 83) { //38 means up arrow key and 87 means 'W' key. jet1.isDownKey = true; // prevent page from srcolling e.preventDefault(); } if (keyID === 37 || keyID === 65) { //let arrow or A key jet1.isLeftKey = true; // prevent page from srcolling e.preventDefault(); }}function checkKeyUp(e) { var keyID = e.keyCode || e.which; /// === mean exactly equal to /// || mean 'OR'. if (keyID === 38 || keyID === 87) { //38 means up arrow key and 87 means 'W' key. jet1.isUpKey = false; // prevent page from srcolling e.preventDefault(); } if (keyID === 39 || keyID === 68) { //38 means up arrow key and 87 means 'W' key. jet1.isRightKey = false; // prevent page from srcolling e.preventDefault(); } if (keyID === 40 || keyID === 83) { //38 means up arrow key and 87 means 'W' key. jet1.isDownKey = false; // prevent page from srcolling e.preventDefault(); } if (keyID === 37 || keyID === 65) { //let arrow or A key jet1.isLeftKey = false; // prevent page from srcolling e.preventDefault(); }}//END OF EVENT FUNCTIONS
  12. An exciting stealth mobile game startup is looking for a highly talented game/app engineer to work out of our brand new Mountain View office. The successful candidate will be working on an exciting narrative-themed next gen learning product--with the goal to revolutionize education. The ability to work quickly and efficiently as part of a high octane startup team and kick butt under pressure is crucial. We are looking for an experienced mobile game/app developer to join our brand new learning games studio as a founding team member--with the opportunity to lead our mobile initiative across multiple platforms. Based in the exciting startup scene of Castro Street in Mountain View, we’re offering: Competitive salary and a comprehensive benefits package Fun, passionate and creative studio on a mission to revolutionize education Challenging and rewarding work on the frontier of cross-platform HTML 5 game development QUALIFICATIONS Expertise in HTML 5, CSS3, and JavaScript is essential Experience working with javascript libraries like jQuery, Pixi, CreateJS, or similar. Experience with mobile game dev across multiple platforms, including Android and iOS (phones, tablets, and browser) Ability to develop dynamic, compelling gamified user experiences in mobile (that kids will absolutely love) Ability to ramp up quickly on new mobile languages Commercial mobile game dev experience with multiple titles shipped Bachelor’s degree in Computer Science, related discipline, or equivalent experience KEY RESPONSIBILITIES Act as the primary interface with mobile dev team from a technical perspective driving the delivery of compelling mobile game experiences Maintain robust code quality across multiple mobile game dev environments Bring passion, energy, and commitment to professional quality cross-platform mobile development REQUIREMENTS Awesome communication, collaboration, and management skills Strong coding, problem-solving, and debugging skills Passion for mobile games and an interest is disrupting education!
  13. I've been trying to sell my first html5 game and I've had a few bites, but they've come back to me saying that it doesn't resize on orientation change correctly when viewed in Safari on iOS. The game has almost square dimension (476x500) so I've tried to code it so that it's just as happy landscape as portrait and simply resizes when the user turns the phone. It works fine on Android and it initially resizes correctly on Safari, but when the user turns their phone it goes a bit haywire. I've been googling and trying different things but I still can't get it to work properly. I'm really hoping I've done something obviously wrong and stupid that someone here can point out. The actual game can be found here Here's a test to make sure the function and values were there correctly. Here's my code (I do have the function.bind workaround so I know it's not that). //Relevant html//-----------------------------------------------------------------------//<head> <meta name="viewport" content="user-scalable=0, width=device-width, height=device-height" /> <meta name="apple-mobile-web-app-capable" content="yes" /></head><body> <div id="content"> <canvas id="gameCanvas" width="476" height="500"></canvas> </div></body> //Base CSS//-----------------------------------------------------------------------//body{ background-color: #1a1a22; margin:0; padding:0;} #content { position: absolute; width: 100%; height: 100%; } #gameCanvas {} //Resize code//-----------------------------------------------------------------------//Main.prototype.onResize = function () { createjs.Tween.get(this).wait(200).call(this.adjustRatio.bind(this)); //this.adjustRatio();};Main.prototype.adjustRatio = function () { var img = document.getElementById("gameCanvas"); if(window.innerHeight < window.innerWidth) { img.style.height = '100%'; img.style.width = 'auto'; var gameWidth = window.innerHeight / 500 * 476; var gameHeight = window.innerHeight; } else { img.style.width = '100%'; img.style.height = 'auto'; gameWidth = window.innerWidth; gameHeight = window.innerWidth / 476 * 500; } var content = document.getElementById("content"); content.style.left = (window.innerWidth - gameWidth) / 2 + "px";};
  14. Made a game called "Cedarville" for the 48-hour Ludum Dare competition. summary: You are about to decide the fate of 6 people from the town of Cedarville. You will be shown 6 scenarios of which you will have no prior understanding. It is your job to pick one of TWO possible solutions. Both solutions will have DIRE consequences on the life of the individual in question. If you do not reach a decision in ten seconds, a random decision will be made for you (unless otherwise specified). _________________________________________________________________________________________________ Here's the LD link for those of you in the competition (I always vote back): http://www.ludumdare.com/compo/ludum-dare-27/?action=preview&uid=19954 and here's the direct link to the game on my site: http://warmseaorchard.com/cedarville/cedarville.html Hope you enjoy! Feedback always welcome!
  15. Oh, please forgive me if I'm missing something so obvious here. I wish to use Phaser from Javascript and I don't know where to start, and since there is no API documentation, I'm completely lost. The test suit is something, but there are multiple things that I don't really get. For example, if I'd like to create a TileMap and populate it grammatically, what should I do? Also, are there some complete game examples or tutorials in Javascript that I could play with? Everything I find seems to be for Typescript.
  16. How would one go about destroying a specific entity in an array? I have tried destroy, I have tried setting the object equal to null, but nothing has helped. After about 400 enemy ships spawn the game just lags. Any advice?
  17. Hi, my jet in my html5 game dev. is blinking really fast -- I'm assuming it's probably my coordinates that are off, but I'm not too sure; I've never had that happen before. Thanks!
  18. Hi, I'm trying to create an explosion when I shoot an enemy jet. Not just an image when I shoot an enemy but an explosion to where it explodes and then fades like a GIF files. How could I implement that on my game? Right now I'm using a sprite sheet. Any help would be great thanks!
  19. One of the hardest things I've found in getting to grips with JavaScript is translating a classical, statically typed mindset into the dynamical, prototypal world. I'm currently trying to find a nice, regular pattern to use as my bread-and-butter structure for writing and instantiating objects; I believe that the ability to make private properties and methods is genuinely useful, and so am particularly enjoying the 'module' pattern using closures. I've read a little about the negative performance implications of closures vs prototypes, and have checked on jsperf: http://jsperf.com/prototype-vs-closures/20 - where it appears that closures are generally slower to init, but quicker to read/write; the lesson I'm learning: prototypal architecture suits objects that are read/written very little but instantiated lots (particles?), and closures work for 'chunkier' implementations that benefit from a proper 'public' interface, with other properties hidden (game controller?). Do you guys have a preference or any wisdom either way? I'm trying to master JS before delving into TypeScript, which I know will make this a moot point!
  20. Hi, I'm a programmer, composer and hobbyist HTML5 game developer. I just released my second game a few days ago. You can play it for free here : http://bobajet.roostrjs.com Boba Jet is a free 2D javascript / html5 canvas shooter. Fight your way through various levels with your jetpack and your gun. Destroy all foes and travel through portals to rescue your brother. This game was mostly about learning basics of video game programming and building a reliable and comprehensive Javascript game engine. I'm looking for opinions on the game and joining an html5 game devs community.
  21. Hi. I'm trying to make my jet shoot red bullets, but for some reason they're coming out at green. Here's my code.... function Jet() { this.srcX = 0; this.srcY = 510; this.width = 100; this.height = 40; this.speed = 3; this.drawX = 220; this.drawY = 200; this.noseX = this.drawX + 100; this.noseY = this.drawY + 30; this.isUpKey = false; this.isRightKey = false; this.isDownKey = false; this.isLeftKey = false; this.isSpacebar = false; this.isShooting = false; this.bullets = []; this.currentBullet = 0; for (var i = 0; i < 25; i++) { this.bullets[this.bullets.length] = new Bullet(); }}Jet.prototype.draw = function() { clearCtxJet(); this.checkDirection(); this.noseX = this.drawX + 100; this.noseY = this.drawY + 30; this.checkShooting(); this.drawAllBullets(); ctxJet.drawImage(imgSprite, this.srcX, this.srcY, this.width, this.height, this.drawX, this.drawY, this.width, this.height);};Jet.prototype.checkDirection = function() { if (this.isUpKey) { this.drawY -= this.speed; } if (this.isRightKey) { this.drawX += this.speed; } if (this.isDownKey) { this.drawY += this.speed; } if (this.isLeftKey) { this.drawX -= this.speed; }};Jet.prototype.drawAllBullets = function() { for (var i = 0; i < this.bullets.length; i++) { if (this.bullets[i].drawX >= 0) this.bullets[i].draw(); if (this.bullets[i].explosion.hasHit) this.bullets[i].explosion.draw(); }};Jet.prototype.checkShooting = function() { if (this.isSpacebar && !this.isShooting) { this.isShooting = true; this.bullets[this.currentBullet].fire(this.noseX, this.noseY); this.currentBullet++; if (this.currentBullet >= this.bullets.length) this.currentBullet = 0; } else if (!this.isSpacebar) { this.isShooting = false; }};function clearCtxJet() { ctxJet.clearRect(0, 0, gameWidth, gameHeight);}// end of jet functions// bullet functionsfunction Bullet() { this.srcX = 100; this.srcY = 460; this.drawX = -20; this.drawY = 0; this.width = 5; this.height = 5; this.explosion = new Explosion();}Bullet.prototype.draw = function() { this.drawX += 3; ctxJet.drawImage(imgSprite, this.srcX, this.srcY, this.width, this.height, this.drawX, this.drawY, this.width, this.height); this.checkHitEnemy(); if (this.drawX > gameWidth) this.recycle();};Bullet.prototype.fire = function(startX, startY) { this.drawX = startX; this.drawY = startY;};Bullet.prototype.checkHitEnemy = function() { for (var i = 0; i < enemies.length; i++) { if (this.drawX >= enemies[i].drawX && this.drawX <= enemies[i].drawX + enemies[i].width && this.drawY >= enemies[i].drawY && this.drawY <= enemies[i].drawY + enemies[i].height) { this.explosion.drawX = enemies[i].drawX - (this.explosion.width / 2); this.explosion.drawY = enemies[i].drawY; this.explosion.hasHit = true; this.recycle(); enemies[i].recycleEnemy(); } }};Bullet.prototype.recycle = function() { this.drawX = -20;};// end of bullet functions// explosion functionsfunction Explosion() { this.srcX = 728; this.srcY = 520; this.drawX = 0; this.drawY = 0; this.width = 50; this.height = 50; this.hasHit = false; this.currentFrame = 0; this.totalFrames = 10;}Explosion.prototype.draw = function() { if (this.currentFrame <= this.totalFrames) { ctxJet.drawImage(imgSprite, this.srcX, this.srcY, this.width, this.height, this.drawX, this.drawY, this.width, this.height); this.currentFrame++; } else { this.hasHit = false; this.currentFrame = 0; }};// end of explosion functions// enemy functionsfunction Enemy() { this.srcX = 0; this.srcY = 559; this.width = 100; this.height = 40; this.speed = 2; this.drawX = Math.floor(Math.random() * 1000) + gameWidth; this.drawY = Math.floor(Math.random() * 360);}Enemy.prototype.draw = function() { this.drawX -= this.speed; ctxEnemy.drawImage(imgSprite, this.srcX, this.srcY, this.width, this.height, this.drawX, this.drawY, this.width, this.height); this.checkEscaped();};Enemy.prototype.checkEscaped = function() { if (this.drawX + this.width <= 0) { this.recycleEnemy(); }};Enemy.prototype.recycleEnemy = function() { this.drawX = Math.floor(Math.random() * 1000) + gameWidth; this.drawY = Math.floor(Math.random() * 360);};Any help would be gladly appreciated!!
  22. In my code, below, I have a bouncing circle animation. I would like to make an array called circles and push back new circles when needed. I want every circle in the array to be represented by the variable circle, but have separate x and y values. Any ideas as to how I could do this ? window.requestAnimFrame = (function(){ return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function(/* function */ callback, /* DOMElement */ element){ window.setTimeout(callback, 1000 / 60); }; })(); // example code from mr doob : http://mrdoob.com/lab/javascript/requestanimationframe/var canvas = document.getElementById("myCanvas"), c = canvas.getContext("2d"), time = 0, gravity = 0.1, dampening = 0.99, pullStrength = 0.01;var circle = { x: 50, y: 50, //(VX, VY) = Velocity Vector vx: 0, vy: 0, radius: 20};function update(){ requestAnimFrame(update); render();}function render (){ //c.clearRect(0, 0,canvas.width, canvas.height); c.fillStyle = 'rgba(255, 255, 255, 0.05)'; c.fillRect(0, 0, canvas.width, canvas.height); //Increment location by Velocity circle.x += circle.vx; circle.y += circle.vy; //Increment gravity over time -- Acceleration circle.vy+= gravity; //Slow it down circle.vy *= dampening; circle.vx *= dampening; //Bouncing //bottom if(circle.y + circle.radius > canvas.height){ circle.vy = -Math.abs(circle.vy); } //top if(circle.y - circle.radius < 0){ circle.vy = Math.abs(circle.vy); } //right if(circle.x + circle.radius > canvas.width){ circle.vx = -Math.abs(circle.vx); } //left if(circle.x - circle.radius < 0){ circle.vx = Math.abs(circle.vx); } c.fillStyle = 'black'; c.beginPath(); c.arc(circle.x,circle.y,circle.radius, 0 , 2* Math.PI); c.closePath(); c.fill();} canvas.addEventListener('mousedown', function(e){ var mouseX = (e.pageX||e.clientX||e.offsetX) - canvas.offsetLeft, mouseY = (e.pageY||e.clientY||e.offsetY) - canvas.offsetTop; var dx = mouseX - circle.x, dy = mouseY - circle.y; circle.vx += dx * pullStrength; circle.vy += dy * pullStrength;});update();
  23. This is the main question, I posted it on Stack Overflow so here's the link: http://stackoverflow.com/questions/17132342/html5-canvas-collision-with-ball-physics-glitch
  24. this is my situation: I want to show twitter tweets like this: http://threejs.org/examples/css3d_periodictable.html This is what I have now: http://nielsvroman.be/twitter/root/index.php The boxes are tweets from the user: @BachelorGDM. What I would like now is that there is always one selected and that you can navigate through them with the arrow keys on the keyboard. This is my javascript code: // THE TWEETS var data = loadTweets()// FUNCTION SHOW THE TWEETSfunction ShowTweets(){// VARS TABLE WITH TWEETS / PLACE IN COLUMN / PLACE IN ROWvar table = [];var column = 1;var row = 1;// LOOP THROUGH DATA AND CREATE TABLE WITH TWEET DETAILS + PLACE $.each(data, function(i) { // DETAILS TWEET var idstring = data[i].id_str; var screenname = data[i].user.screen_name; var imageurl = data[i].user.profile_image_url; // 9 TWEETS NEXT TO EACH OTHER if(column % 9 == 0) { row++ column = 1; } var array = [imageurl, idstring, screenname, column, row ] column++; table.push(array);});// VARIABLES THREE JSvar camera, scene, renderer;var controls;var objects = [];var targets = { table: [], sphere: [], helix: [], grid: [] };init(); // CALL INIT FUNCTIONanimate(); // CALL ANIMATE FUNCTIONfunction init() { // INITIALIZE CAMERA camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 5000 ); camera.position.z = 1800; // INITIALIZE SCENE scene = new THREE.Scene(); // LOOP THROUGH TABLE ARRAY (ARRAY WITH ARRAYS IN IT) for ( var i = 0; i < table.length; i ++ ) { var item = table[i]; // ITEM IS ARRAY WITH [imageurl, idstring, screenname, column, row] var element = document.createElement( 'div' ); element.className = 'element'; element.id = item[1]; // ITEM IDSTRING element.style.backgroundColor = 'rgba(0,127,127,' + ( Math.random() * 0.5 + 0.25 ) + ')'; // BG COLOR + OPACITY FROM FRAME var number = document.createElement( 'div' ); number.className = 'number'; number.textContent = i + 1; // NUMBER IN THE RIGHT TOP element.appendChild( number ); var symbol = document.createElement( 'div' ); symbol.className = 'symbol'; var img = document.createElement('img'); img.src = item[0]; // IMAGE SOURCE IS LINK TO IMAGE symbol.appendChild(img); element.appendChild( symbol ); var details = document.createElement( 'div' ); details.className = 'details'; details.innerHTML = "" + '<br>' + item[2]; // SCREENNAME element.appendChild( details ); var object = new THREE.CSS3DObject( element ); // POSITION OBJECTS AGAINST EACH OTHER object.position.x = Math.random() * 4000 - 2000; object.position.y = Math.random() * 4000 - 2000; object.position.z = Math.random() * 4000 - 2000; // ADD OBJECTS TO SCENE scene.add(object); // ADD OBJECT TO OBJECTS ARRAY objects.push(object); } // TABLE VIEW for ( var i = 0; i < objects.length; i ++ ) { var item = table[i]; // ITEM IS ARRAY WITH [imageurl, idstring, screenname, column, row] var object = new THREE.Object3D(); object.position.x = ( item[3] * 160 ) - 1540; // X-POSITION (COLUMN) object.position.y = - ( item[4] * 200 ) + 1100; // Y-POSITION (ROW) // targets = { table: [], sphere: [], helix: [], grid: [] }; targets.table.push(object); // PUSH OBJECT IN TABLE ARRAY (IN TARGETS ARRAY) } // SPHERE VIEW var vector = new THREE.Vector3(); for ( var i = 0, l = objects.length; i < l; i ++ ) { var phi = Math.acos( -1 + ( 2 * i ) / l ); var theta = Math.sqrt( l * Math.PI ) * phi; var object = new THREE.Object3D(); object.position.x = 1000 * Math.cos( theta ) * Math.sin( phi ); object.position.y = 1000 * Math.sin( theta ) * Math.sin( phi ); object.position.z = 1000 * Math.cos( phi ); vector.copy( object.position ).multiplyScalar( 2 ); object.lookAt( vector ); // targets = { table: [], sphere: [], helix: [], grid: [] }; targets.sphere.push( object ); // PUSH OBJECT IN SPHERES ARRAY (IN TARGETS ARRAY) } // HELIX VIEW var vector = new THREE.Vector3(); for ( var i = 0, l = objects.length; i < l; i ++ ) { var phi = i * 0.175 + Math.PI; var object = new THREE.Object3D(); object.position.x = 1100 * Math.sin( phi ); object.position.y = - ( i * 8 ) + 450; object.position.z = 1100 * Math.cos( phi ); vector.copy( object.position ); vector.x *= 2; vector.z *= 2; object.lookAt( vector ); // targets = { table: [], sphere: [], helix: [], grid: [] }; targets.helix.push( object ); // PUSH OBJECT IN HELIX ARRAY (IN TARGETS ARRAY) } // GRID VIEW for ( var i = 0; i < objects.length; i ++ ) { var object = new THREE.Object3D(); object.position.x = ( ( i % 5 ) * 400 ) - 800; object.position.y = ( - ( Math.floor( i / 5 ) % 5 ) * 400 ) + 800; object.position.z = ( Math.floor( i / 25 ) ) * 1000 - 2000; // targets = { table: [], sphere: [], helix: [], grid: [] }; targets.grid.push( object ); // PUSH OBJECT IN GRID ARRAY (IN TARGETS ARRAY) } renderer = new THREE.CSS3DRenderer(); renderer.setSize( window.innerWidth, window.innerHeight ); renderer.domElement.style.position = 'absolute'; // ADD RENDERER TO CONTAINER document.getElementById( 'container' ).appendChild( renderer.domElement ); // TRACKBALLCONTROLS => WHEN YOU HOLD DOWN MOUSECLICK controls = new THREE.TrackballControls( camera, renderer.domElement ); controls.rotateSpeed = 0.5; //controls.minDistance = 500; // MAX ZOOM IN => MIN DISTANCE controls.maxDistance = 2500; // MAX ZOOM OUT => MAX DISTANCE controls.zoomSpeed = 1; // STANDARD IS 1.2 controls.keys = [ 37 /*LEFT*/, 38 /*UP*/, 39 /*RIGHT*/, 40 /*DOWN*/ ]; controls.addEventListener( 'change', render ); // RENDER ON CHANGE var button = document.getElementById( 'table' ); button.addEventListener( 'click', function ( event ) { transform( targets.table, 2000 ); }, false ); var button = document.getElementById( 'sphere' ); button.addEventListener( 'click', function ( event ) { transform( targets.sphere, 2000 ); }, false ); var button = document.getElementById( 'helix' ); button.addEventListener( 'click', function ( event ) { transform( targets.helix, 2000 ); }, false ); var button = document.getElementById( 'grid' ); button.addEventListener( 'click', function ( event ) { transform( targets.grid, 2000 ); }, false ); transform( targets.table, 5000 ); // window.addEventListener( 'resize', onWindowResize, false ); // WHEN PRESSED ON KEY window.addEventListener( 'keydown', keydown, false ); function keydown( event ) { };}function transform( targets, duration ) { TWEEN.removeAll(); for ( var i = 0; i < objects.length; i ++ ) { var object = objects[ i ]; var target = targets[ i ]; new TWEEN.Tween( object.position ) .to( { x: target.position.x, y: target.position.y, z: target.position.z }, Math.random() * duration + duration ) .easing( TWEEN.Easing.Exponential.InOut ) .start(); new TWEEN.Tween( object.rotation ) .to( { x: target.rotation.x, y: target.rotation.y, z: target.rotation.z }, Math.random() * duration + duration ) .easing( TWEEN.Easing.Exponential.InOut ) .start(); } new TWEEN.Tween( this ) .to( {}, duration * 2 ) .onUpdate( render ) .start();}function onWindowResize() { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize( window.innerWidth, window.innerHeight );}function animate() { requestAnimationFrame( animate ); TWEEN.update(); controls.update();}// RENDER SCENE/CAMERAfunction render() { renderer.render( scene, camera );}}My tweets are initially in the variable data. I now have added this to my code: controls.keys = [ 37 /*LEFT*/, 38 /*UP*/, 39 /*RIGHT*/, 40 /*DOWN*/ ];window.addEventListener( 'keydown', keydown, false );function keydown( event ) {};But now how can I navigate through the tweets (boxes) with my arrows on the keyboard? I want to change the css of the selected box and open an overlay of the associated tweet. (You can see this when you click on a box on the link) I have no clue on how to start with this. Can somebody help me?
  25. Hi, I'm fairly new to game programming using HTML5. Although saying that I have been using Javascript for many years and will continue to do so for years to come. Basically I have made a couple of very basic games up to now just practising in general for when I decide to consider making a more serious attempt at a game for people to play. I noticed while learning some of the basics that there was quite a lot of code that I had to rewrite almost exactly the same for all the basic games I made, so I figured "Why not make a file that I can reuse for almost all games I intend to make?". Well I begun doing so and soon ran into a few "scope" problems, I figured out a way around them but then after reading a few threads on these forums when I first landed here yesterday, I am afraid that my style of OOP (So to speak) with Javascript is not the best way to go about things. I was just looking for pointers in regards to where this file can be improved due to not programming the way accepted by most Javascript developers? function Canvas(canvasID){ this.canvasID = canvasID; this.canvasDOM = document.getElementById(this.canvasID); this.ctx = this.canvasDOM.getContext('2d'); this.width = this.canvasDOM.width; this.height = this.canvasDOM.height; this.clear = function(){ this.ctx.clearRect(0, 0, this.width, this.height); }; this.fill = function(color){ this.ctx.fillStyle = color; this.ctx.fillRect(0, 0, this.width, this.height); };}var engine = new function(){ this.running = false; this.animator = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame; this.start = function(){ this.running = true; this.tick(); }; this.stop = function(){ this.running = false; }; this.tick = function(){ if(!this.running) return; update(); render(); this.animator.call(window, function(){ engine.tick(); }); };} Now there are a few things I am sure are terribly wrong, the most prominent being in the tick method of the engine instance where I call itself by using "engine.tick()" . This is where, as I mentioned before, I had "scope" issues. Any advice regarding how I should change that would be much appreciated. Now the way in which I currently (And intend to continue if possible) using this file for my games is like so - var canvas = new Canvas("gameCanvas");engine.start();function update(){ canvas.clear(); //update game}function render(){ //render game} I hope you manage to decipher what I mean by this and understand my programming. Thanks in advance, Chuxx.