Developing a street basketball game. Part ll: Throw a ball into a basket.

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

Alexander Buzin
Aug 16, 2016 · 4 min read
Image for post
Image for post

Two more files.

We compile this project using rollup.js, it means we can use es6 modules without any restrictions. Let’s add two files that will handle: 1) Events, 2) Loops.

Image for post
Image for post
App “js” folder structure

Backboard & basketball net

Backboard is just a WHS.Box with applied map, normalMap (defines how light will be casted on texture) and displacementMap. Backboard will be 41 x 28 and with depth of 1. We don’t want backboard to fall down, so it’s mass will be 0 as with wall and ground.

Setting config and variables…

We have already added some configuration details and isMobile variable. Now it’s time to fill all other properties and explain for what do we need each one.

New file: events.js

I splitted app.js into several files to make it smaller and show how to use ES6 module syntax in such apps. The first file i created will contain functions that register events:

  • updateCoords(), updates local cursor position variables.
  • checkKeys(), checks for “Spacebar” key pressed. If yes — resets ball position.
  • detectDoubleTap(), does the same as checkKeys(), but with double tap event and is more useful for mobile devices.

New file: loops.js

To keep a ball we need reset it’s position on each frame. We’ll call keepBall() function for that. But it should do it only if ball isn’t previously thrown by player and haven’t been returned to it’s default position with pressed spacebar or double tap.

One thing left

There are only one thing that we forgot to do. I mean that we forgot to start our keep_ball loop, it should be in init() function, that’s why i left it for last part.


Result

Image for post
Image for post
Result of part 2.

Links

WhitestormJS Framework

Framework for developing 3D web apps with physics

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store