Tag Archives: HTML5

Developing a street basketball game. Part lll: Level selecting and stats.

Creating a 3D browser game with physics in a few steps.

Street Basketball Tutorial Part 3

This is a final part of “Developing a street basketball game” trilogy. If you haven’t checked Part I: Getting workflow ready and Part ll: Throw a ball into a basket. — do it first.

Today I will tell you about making new levels, creating a level selecting menu and showing player stats (How good is he as street basketball player).

Filling init()

First, note that we added 2 new files to app.js: levelData.js and utils/textures.js.

levelData will return an array that contains level objects, that are javascript objects filled with config that differs from defaults.

utils/textures returns functions for generating textures from inputed data. It will be used to print stats and level items in level menu.

Second thing is that we add a raycaster variable. This thing is used to check if 3D vector generated from 2D mouse position intersects with other scene objects.

And in last 21 lines of init() function we added checking for app loading status. I won’t describe this part cause it is not related to main application and you will probably skip or rewrite this part in your app. Just keep in mind that we use event listeners here to do various things that will make impact on app preloader. 

Three sections. What will be

By the way, let’s define three game sections:

  • Main game. Player throws the ball until he score a goal.
  • Goal details. Player scored a goal and now he see it’s time, attempts and accuracy.
  • Level selecting menu. Player wants to choose another level or get back to current one.

Game Screens

initMenu();

Ratio

Let’s make a nice transition for camera, goal stats and game headline.

At first, we need to define a variable (ratio in code below) that will store relation between window width and window height. THREE.PerspectiveCamera already has two methods that will give us width and height values ->.getFilmWidth() and .getFilmHeight()

Note that APP.camera is a whitestorm.js wrapper for camera, to get it’s Three.js camera use APP.camera.getNative()

Headline text

Let’s add a headline of this game. For that we use WHS.Text. We need to generate a .js font file, I used typeface.js generator to do this. I named my file 1.js, you can name it as you want. Note that in font parameter we type font url, not a font name like in three.js

Continue Reading →

Developing a street basketball game. Part I. Getting workflow ready.

Creating a 3D browser game with physics in a few steps.

Street Basketball Game Tutorial - Part 1

Some days ago I released a new version of WhitestormJS framework named r10 and decided to develop a game using almost all it’s functionality. (Just was curious how easy it would be). The task was to make a 3D game that requires complex 3D physics parts like concave objects and softbodies.

Setting up workflow

Before starting developing the game I added a couple of directories that I will use later: js, css, textures and img. Difference between textures and img folders is that textures folder will be used for images that will be used in 3D part of app and img is for images that are used in html, css and stuff like that.

Rollup

Useful thing when you need to work with es6 models in front-end, especially when you use most of es6 features and want them even on old browser versions. I used it with two plugins: babel for rollup and uglify for rollup to develop a cross-browser 3D app.

Bower
Some libraries are getting updates regularly (yep, like whitestorm.js). For them I need front-end package manager like bower (You can use npm too, but bower will be enough). For tweening I used GSAP library, because of it’s performance and also we need basket.js to keep such a large library as WhitestormJS in localStorage.

…And also i wrote a small bower plugin that will help me make preloading. Check it out there.

bower install whitestormjs gsap progress-loader basket.js

Okay, now seems to be ready…

My index.html file will be simple and will contain just loaded scripts and style.css for featured usage. Note that we don’t load whitestorm.js yet. We will add it then using basket.js.

app.js

As you already noticed, we have app.js included. So, let’s create an empty 3D world with enabled softbody physics(will be used later for a net), autoresize, filled background, camera position and aspect, + gravity:

Now we have a basic world that has 0xcccccc (grey) as it’s background color, gravity set as {x: 0, y: -200, z: 0} and camera that will be at same height as our basket. Also we start the app only after we have whitestorm.js loaded. Continue Reading →

HTML5 Bitcoin Wallet

HTML5 Bitcoin Wallet

I think Apple is starting to have a love-hate relationship with HTML5. When Apple bans an app in the App store or gets greedy, developers seem to always turn to HTML5. Do you remember the time Apple started requiring third-party app developers to sell any available content inside their apps instead of linking out to browser based items on a website? Apple wanted their 30 percent and a HTML5 Instant Reader was born. Well now Apple is having issues with bitcoin wallet apps. High-profile bitcoin wallet providers such as Coinbase and Blockchain have seen their apps removed from the App store. It was only in the past couple of days that Apple approved the bitWallet iOS App which without workarounds is almost useless because the bitcoin sending function is blocked. It’s kind of like having a traditional wallet full of cash that was glued together by your little brother. Sure, you can get the money out eventually but it will require some time and a speech to your brother about how glueing a strangers wallet together may result in a wedgie.

There is a HTML5 bitcoin wallet app outside of Apple’s sphere of influence called Coinpunk. It is an open source bitcoin wallet service that you can run on your own server. The user interface is entirely written in HTML with JavaScript and the backend is built with Node.js. The code is written to provide future support for more bitcoin node clients, including upcoming SPV-based wallets that require less resources to work. You can also accept payments via a QR code, do QR code scanning, and enjoy two-factor authentication.

Watch this HTML5 bitcoin wallet app being used to buy a Subway sandwich in Allentown, Pennsylvania.

Coinpunk is trying to raise funds to further the project on Indiegogo, an international crowdfunding platform. There are less than 48 hours to go on the campaign. They say they want to “prove that you can make 100% open source HTML5/JS bitcoin wallets that work just as well as proprietary native ones, if not better.”

I do not own any bitcoin and that makes me sad. I want start though and have created a bitcoin wallet where you can send me bitcoins: 19BxpcYMh44PXbR3ZDv7UcffasKnk1MHn3

Why would you send me bitcoins?

  • Support the HTML5 Blog
  • Advertise. If you send me 1 bitcoin or more you can advertise on this site for 3 months. It will be a 125×125 ad in the right sidebar. Just e-mail me the transaction id and ad details at stanbyme@html5blog.com, and I’ll set it up for you.
  • So that my lame HTML5 Halloween costume will look better this year.

Here is the QR code for my bitcoin wallet:

QR Code for HTML5 Blog

Thank you!