In the previous article, scoring was introduced, but there was no win detection that would end the game. The previous article in the series can be read here: JavaScript: Intro to Web Game Development – Part 5: ball handling, scoring, and A.I. In this article, I will show how to detect when a game ends … Continue reading JavaScript: Intro to Web Game Development – Part 6: add win screen and replay
p5.js: How to build a Menger sponge
According to Wikipedia, a Menger sponge is: In mathematics, the Menger sponge (also known as the Menger universal curve) is a fractal curve. It is a three-dimensional generalization of the Cantor set and Sierpinski carpet, though it is slightly different from a Sierpinski sponge. It was first described by Karl Menger in 1926, in his … Continue reading p5.js: How to build a Menger sponge
p5.js: How to build a starfield
In this article, I will show how to build a starfield in p5.js. The starfield is presented as if you are flying through a field of stars, where the closer stars are bigger and there is an appearance of light streaking as your speed increases. This sketch is interactive in that moving the mouse to … Continue reading p5.js: How to build a starfield
JavaScript: Intro to Web Game Development – Part 5: ball handling, scoring, and A.I.
In the previous article of the series, I described how to animate the left paddle using mouse movements. See: In this article, I will detail how to animate the ball, use an AI function to animate the right (computer) paddle, and take care of scoring. Step 1: Get the ball moving First I will need … Continue reading JavaScript: Intro to Web Game Development – Part 5: ball handling, scoring, and A.I.
JavaScript: Intro to Web Game Development – Part 4: animate left paddle
This is the fourth part in the series on how to create a web browser game of Pong using JavaScript. Part 3 can be read here: For this article, I will demonstrate how to add mouse control to the left paddle so that it moves straight up and down on the Y axis, based on … Continue reading JavaScript: Intro to Web Game Development – Part 4: animate left paddle
JavaScript: Intro to Web Game Development – Part 3: add graphical components
Continuing the series on how to create a web browser game of Pong using JavaScript, this post will show how to add some graphical components to the game, such as the right and left paddles, ball, net and score placeholders. Part 2 is here: JavaScript: Intro to Web Game Development – Part 2: canvasContext with … Continue reading JavaScript: Intro to Web Game Development – Part 3: add graphical components
JavaScript: Intro to Web Game Development – Part 2: canvasContext with rounded corners
This is Part 2 of the series where I walk through the steps to create a Pong game in the web browser using JavaScript. Part 1 is here: JavaScript: Intro to Web Game Development – Part 1: canvas element In this step, I will create the black background for the pong game, but instead of … Continue reading JavaScript: Intro to Web Game Development – Part 2: canvasContext with rounded corners
JavaScript: Intro to Web Game Development – Part 1: canvas element
For this series, I am going to detail how to use JavaScript to create a web based browser game by going step by step through all of the concepts involved in creating the game of Pong. I will be using parts of the tutorial written by Chris DeLeon, but greatly expanding on and customizing his … Continue reading JavaScript: Intro to Web Game Development – Part 1: canvas element
p5.js: A better (web based) IDE
Since writing my article about getting started with p5.js: p5.js: Getting Started I have since found a better Integrated Development Environment (IDE) for p5.js which also happens to be web based. This IDE is flexible, updated, and fast enough such that it is fun to experiment and save multiple project iterations easily. The web IDE … Continue reading p5.js: A better (web based) IDE
p5.js: How to rotate 3D objects on the X, Y, and Z axis
On the 2D plain of a browser window p5.js can represent 3D space using WEBGL. This is specified as the third argument to the createCanvas() function in the setup portion of the sketch: createCanvas(400, 300, WEBGL); Here is some code that demonstrates how to rotate a 2D rectangle on the X axis, using rotateX(), which … Continue reading p5.js: How to rotate 3D objects on the X, Y, and Z axis