Build New Games

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Build New Games</title> <meta name="author" content="Bocoup"> <meta name="description" content="Build New Games fuses game programming, web development & open web technology to continue to push the boundaries of game development on all …">  <meta name="HandheldFriendly" content="True"> <meta name="MobileOptimized" content="320"> <meta name="viewport" content="width=device-width, initial-scale=1">  <link rel="canonical" href="http://buildnewgames.com"> <link href="/favicon.png" rel="icon"> <link href="/assets/css/reset.css" media="screen, projection" rel="stylesheet" type="text/css"> <link rel="stylesheet" href="assets/css/factory.css">  <link href="/assets/css/fonts.css" media="screen, projection" rel="stylesheet" type="text/css">  <link href="/assets/css/base.css" media="screen, projection" rel="stylesheet" type="text/css">  <link href="/assets/css/screen-medium.css" rel="stylesheet" type="text/css"> <link href="/atom.xml" rel="alternate" title="Build New Games" type="application/atom+xml">  </head> <body class="clearfix pyramid home page"> <banner> <header id="header"> <a href="/" class="bng-logo"> <img src="/images/bng-logo.png" alt="BNG"> </a> <nav class="large-nav"> <ul> <li><a href="/articles/">Articles</a></li> <li><a href="/authors/">Authors</a></li> <li><a href="/about/">About</a></li> </ul> </nav> <div class="home-page-info"> <h1><a href="/">Build New Games</a></h1> <p>Open Web techniques for cutting-edge game development</p> </div> </header> </banner> <aside class="category-list medium"> <h2>Topics</h2> <ul> <li><a class='category' href='/blog/categories/design/'>Design</a></li> <li><a class='category' href='/blog/categories/engines/'>Engines</a></li> <li><a class='category' href='/blog/categories/graphics/'>Graphics</a></li> <li><a class='category' href='/blog/categories/javascript/'>JavaScript</a></li> <li><a class='category' href='/blog/categories/mobile/'>Mobile</a></li> <li><a class='category' href='/blog/categories/multiplayer/'>Multiplayer</a></li> <li><a class='category' href='/blog/categories/platform/'>Platform</a></li> </ul> <div class="advertisement"> <script type='text/javascript'></script><noscript><a href='http://revive.bocoup.com/www/delivery/ck.php?n=a23a1951&cb=INSERT_RANDOM_NUMBER_HERE' target='_blank'><img src='http://revive.bocoup.com/www/delivery/avw.php?zoneid=6&cb=INSERT_RANDOM_NUMBER_HERE&n=a23a1951' border='0' alt='' /></a></noscript> <span class="fine">Ads by <a href="http://bocoup.com">Bocoup</a></span> </div> </aside> <div class="home-content"> <p style="line-height: 1.3; margin-bottom: 1.5em;">Build New Games published a series of awesome HTML5 game development articles in 2012 and 2013. While we're currently not publishing new content, the current archive will continue to be available for your enjoyment. For questions or comments <a style="font-size: 1em;" href="mailto:buildnewgames@bocoup.com">drop us an email</a>.</p> <aside class="recent-articles"> <h2 class="medium">Recent articles</h2> <ul class="article-list"> <li> <a href="/webgl-threejs/">Creating a 3D game with Three.js and WebGL</a> <span class="byline">Jul 24<span>th</span>, 2013 | Nikhil Suresh</span> <a href="/webgl-threejs/"> <img class="article-preview-image" src="/images/article-previews/threejs-webgl-pong.png" alt=""> </a> <p>In order to learn the basics of Three.js and its use in 3D games, we will be creating a simple Pong clone with basic materials, lights and shadows. This will also cover some of the basic logic code required for a functional Pong game.</p> </li> <li> <a href="/simulating-natural-systems/">Simulating Natural Systems in a Web Browser</a> <span class="byline">Jul 16<span>th</span>, 2013 | Vince Allen</span> <a href="/simulating-natural-systems/"> <img class="article-preview-image" src="/images/article-previews/simulating-natural-systems.jpg" alt=""> </a> <p>My feline QA team was hard at work batting down digital fireflies while I thought about the threshold of belief. What were the compelling qualities of the system I created that convinced her these targets were real enough to attack?</p> </li> <li> <a href="/making-games-fun/">Making Games Fun</a> <span class="byline">Jun 5<span>th</span>, 2013 | Burak Kanber</span> <a href="/making-games-fun/"> <img class="article-preview-image" src="/images/article-previews/making-games-fun.jpg" alt=""> </a> <p>There are surprisingly few people studying the fun of video games, considering the market size and broad applications of the ability to make things fun. But the (growing) few who have studied this have certainly come up with interesting observations.</p> </li> <li> <a href="/vector-field-collision-avoidance/">Vector Field Obstacle Avoidance</a> <span class="byline">May 31<span>st</span>, 2013 | Alexander Sutherland</span> <a href="/vector-field-collision-avoidance/"> <img class="article-preview-image" src="/images/article-previews/vector-field-obstacle-avoidance.png" alt=""> </a> <p>This technique provides realistic, seemingly "intelligent" behaviors in a wide class of games with very simple and highly reusable code.</p> </li> <li> <a href="/introduction-to-crafty/">An introduction to the Crafty game engine</a> <span class="byline">Feb 1<span>st</span>, 2013 | Darren Torpey</span> <a href="/introduction-to-crafty/"> <img class="article-preview-image" src="/images/article-previews/introduction-to-crafty.png" alt=""> </a> <p>This tutorial introduces the core components of the Crafty game engine and walks you through the process of creating a simple adventure game.</p> </li> </ul> </aside> <p> <a class="all-articles" href="http://buildnewgames.com/articles/">View all articles</a> </p> </div> <section id="main" class=""> </section> <script src="/js/lib/modernizr.js"></script> <div id="anim-placeholder"> <img src="/images/anim-placeholder.png"> </div> <div id="anim-wrapper"> <div id="anim-buffer"></div> <div id="anim-container-background"> <div id="anim-container"> <div id="anim-fake-wall"></div> <div id="anim-pipe"></div> <div id="anim-machine"></div> <div id="anim-crusher-upper-arm"></div> <div id="anim-crusher-lower-arm"></div> <div id="anim-crusher-machine-upper"></div> <div id="anim-crusher-machine-lower"></div> <div id="anim-paint"></div> <div id="anim-belt"></div> <div id="anim-belt-2"></div> <div id="anim-blinker"></div> <img id="anim-ship-1" class="anim-ship" src="images/factory/state-1.jpg"> <img id="anim-ship-2" class="anim-ship" src="images/factory/state-1.jpg"> <img id="anim-ship-3" class="anim-ship" src="images/factory/state-1.jpg"> <img id="anim-ship-4" class="anim-ship" src="images/factory/state-1.jpg"> <img id="anim-ship-5" class="anim-ship" src="images/factory/state-1.jpg"> <img id="anim-ship-6" class="anim-ship" src="images/factory/state-1.jpg"> <img id="anim-ship-7" class="anim-ship" src="images/factory/state-1.jpg"> <img id="anim-ship-8" class="anim-ship" src="images/factory/state-1.jpg"> </div> </div> </div> <script src="/js/factory.js"></script> <footer class="medium"> Edited and operated by <a href="http://bocoup.com">Bocoup</a>. </footer> <footer class="small"> <p> Edited and operated by <a href="http://bocoup.com">Bocoup</a> </p> </footer> <script type="text/javascript"> // GA stuffs var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-1464992-54']); _gaq.push(['_trackPageview']); (function() { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })(); </script> </body> </html>

CINXE.COM

Build New Games