Building a Game with Three.js, React and WebGL — SitePoint I’m making a game titled “Charisma The Chameleon.” It’s built with Three.js, React and WebGL. This is an introduction to how these technologies work together using react-three-renderer (abbreviated R3R). Check out A Beginner’s Guide to WebGL and Getting Started with React and JSX here on SitePoint for introductions to React and WebGL. This article and the accompanying code use ES6 Syntax. How It All Began Some time ago, Pete Hunt made a joke about building a game using React in the #reactjs IRC channel: I bet we could make a first person shooter with React! I laughed. Years later, that’s exactly what I’m doing. Charisma The Chameleon is a game where you collect power-ups that make you shrink to solve an infinite fractal maze. Why React? I know what you’re thinking: why? “Declarative” views let you cleanly separate your scene rendering from your game logic.Design easy to reason about components, like <Player />, <Wall />, <Level />, etc. Recommended Courses Wes Bos React and WebGL Debugging
Automate Your Development Workflow With GulpJS TL;DR: In this tutorial, I'll introduce you to GulpJS and show you how to set it up in your application for task automation. GulpJS is a JavaScript task runner that lets you automate several tasks during development. These tasks involve minifying JavaScript and CSS files, automatically refreshing the browser once a file has been edited, compiling CSS preprocessors, running tests, compressing images, and several others. "GulpJS solves the problem of repetition." GulpJS is a build tool that helps you as a developer get rid of manually running such tasks as mentioned above during development for every project. GulpJS Requirements In order to use GulpJS, you need to have the following tools installed on your machine. Node.js: Navigate to the Node.js website and install the latest version on your machine.GulpJS: Install Gulp globally in your terminal so that the gulp command can be run from any directory. npm install gulp-cli -g GulpJS Features GulpJS provides a standardized API. Gulp Plugins
Coder's Block Blog / Motion Detection with JavaScript I recently gave a talk at RevolutionConf about writing a motion detecting web app with JavaScript. This is basically that talk, but in blog form. Live demos and all the source code are available at the end of this article. The Premise I wanted to see what my pets do when I’m away. But I didn’t want a continuous live stream, since that would be pretty boring (they sleep a lot). Just for kicks, I decided to do this as a web app, all in JavaScript. Accessing the Webcam The first step is to access the webcam. Anyway, to grab a stream from a webcam, start with a <video> element in your HTML. Then add a bit of JavaScript. This will attempt to grab a 640px by 480px stream from an attached webcam. Grabbing Still Frames We need to capture still frames from the streaming video so that we can do motion detection (more on this later) and potentially upload them as images to Twitter. We start by grabbing the <video> element with the stream on it from the page. Diffing So, what exactly is “motion”? Scoring
The Ultimate Guide to JavaScript Frameworks Keeping up with JavaScript frameworks can be a challenge. There are a lot of them, and seemingly another one every month. How do you know which ones might be right for your project? That’s where this guide comes in. Why Is This Useful? Some of you may be wondering why a guide like this is useful. Perhaps you've heard of the Dojo framework. Another example...maybe you're making an app that needs excellent performance on mobile networks. There are also small frameworks that provide a fantastic opportunity for learning. How This Guide Is Organized The frameworks are broken up into broad categories — you’ll see that in the listing tables below. If you are a framework author — or a fan of one — and you don’t see your framework listed, or wish to correct some information, reach out to me on Twitter. Guide to icons: The icons below are meant to help readers understand general framework characteristics and tendencies. 🔥 Performance: A top five performer in benchmarks Reactive programming paradigm
The Anatomy of a Modern JavaScript Application This article is featured in our book, JavaScript: Best Practice. Keep on top of the rapidly changing best practices of Modern JavaScript. There’s no doubt that the JavaScript ecosystem changes fast. Not only are new tools and frameworks introduced and developed at a rapid rate, the language itself has undergone big changes with the introduction of ES2015 (aka ES6). In this article, I’ll introduce you to modern JavaScript. A Note About Node.js Node.js is a runtime that allows server-side programs to be written in JavaScript. The arrival of Node.js had a significant impact on the JavaScript ecosystem, introducing the npm package manager and popularizing the CommonJS module format. JavaScript ES2015+ In 2015, the sixth version of ECMAScript — the specification that defines the JavaScript language — was released under the name of ES2015 (still often referred to as ES6). Declaring variables JavaScript now has two additional ways to declare variables: let and const. let is the successor to var.
Getting Started Guide NativeScript Getting Started Guide Welcome to the NativeScript Getting Started Guide. In this tutorial you'll use NativeScript, a cross-platform JavaScript framework for building native mobile apps, to build an iOS and Android app from scratch. You can start by watching the video walkthrough below, or by jumping straight into the hands-on tutorial. What is NativeScript? NativeScript is a free and open source framework for building native iOS and Android apps using JavaScript and CSS. NativeScript provides a best-of-both-worlds development experience. What you're building This guide will walk you through building Groceries, a groceries management app that does the following things: Connects to an existing RESTful service.Provides user registration and login.Lets authenticated users add and delete groceries from a list.Runs cross-platform (iOS and Android). If you follow along to the end, here's what the finished app will look like on iOS: And here's what the app will look like on Android:
Vincit/objection.js: An SQL-friendly ORM for Node.js Game AI: The Bots Strike Back! The following is a short extract taken from our new book, HTML5 Games: Novice to Ninja, written by Earle Castledine. Access to the book is included with SitePoint Premium membership, or you can grab a copy in stores worldwide. You can check out a free sample of the first chapter here. We have all the tools at our disposal now to make fantastically detailed worlds to explore and inhabit. Artificial intelligence is a huge and extremely complex field. Like collision detection, AI is often best when it’s not too good. But we don’t let them know that! Intentional Movement Choosing how sprites move around in the game is great fun. The way an entity moves is determined by how much we alter its x and y position every frame (“move everything a tiny bit!”). To make straight lines more fun, inject a bit of trigonometry. You can combine waves to get even more interesting results. The important aspect of this is that movements can be combined to make more complex-looking behaviors. Waypoints
ES modules: A cartoon deep-dive – Mozilla Hacks – the Web developer blog ES modules bring an official, standardized module system to JavaScript. It took a while to get here, though — nearly 10 years of standardization work. But the wait is almost over. Many JavaScript developers know that ES modules have been controversial. Let’s take a look at what problem ES modules solve and how they are different from modules in other module systems. What problem do modules solve? When you think about it, coding in JavaScript is all about managing variables. Because so much of your code is just about changing variables, how you organize these variables is going to have a big impact on how well you can code… and how well you can maintain that code. Having just a few variables to think about at one time makes things easier. This is good. It also has a downside, though. What if you do want to share your variable outside of a scope? You probably remember this from the jQuery days. This works, but they are some annoying problems that result. This makes maintaining code tricky.
5 More JavaScript Interview Exercises Based on the statistics of my previous article 5 Typical JavaScript Interview Exercises, it seems that a lot of you are searching for a new job or, at least, want to test their JavaScript knowledge. Regardless of the reason(s) that lead you to read the article, in agreement with the JavaScript channel editor Colin Ihrig, I decided to write another one about some other typical questions asked at interviews. Have fun! Question 1: Closures Consider the following code: var nodes = document.getElementsByTagName('button');for (var i = 0; i < nodes.length; i++) { nodes[i].addEventListener('click', function() { console.log('You clicked element #' + i); });} What will be printed on the console if a user clicks the first and the fourth button in the list? Answer The code above tests a very important concept of JavaScript: closures. That said, the code prints two times You clicked element #NODES_LENGTH where NODES_LENGTH is the number of the nodes retrieved. Question 2: Closures Question 3: Data Types