Gulp is a Node.js package that acts as a plugin to automate all kinds of web development workflow tasks. According to the official gulp website: gulp is a toolkit for automating painful or time-consuming tasks in your development workflow, so you can stop messing around and build something. To install Gulp, we need to install … Continue reading JavaScript: How to install Gulp via NPM
JavaScript Language
JavaScript: How to use NPM to install packages
NPM or “npm” stands for Node Package Manager. It is the default package manager for the JavaScript runtime environment Node.js. The NPM program is installed on your computer when you install Node.js. The website npmjs.com contains hundreds of thousands of free open source code packages that can be downloaded and used via npm. Downloading Individual … Continue reading JavaScript: How to use NPM to install packages
JavaScript: Intro to Web Game Development – Part 7: add title screen and settings
As of the previous article, the game can be considered to be in a “complete” state, but I want to add a few features, such as a title screen, some options such as score to win, ball speed, and game colors. I also want to add a link back to the title screen from the … Continue reading JavaScript: Intro to Web Game Development – Part 7: add title screen and settings
JavaScript: Intro to Web Game Development – Part 6: add win screen and replay
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
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
JavaScript: How to install JavaScript kernel in Jupyter Notebook
It is possible to run JavaScript (Node.js in REPL mode) in a Jupyter Notebook on a Windows machine. In order to do so, you will need to install the JavaScript (Node.js) kernel. This can be done easily assuming Node.js, npm, and Jupyter Notebook are already installed on your machine. The following instructions are for adding … Continue reading JavaScript: How to install JavaScript kernel in Jupyter Notebook