When cloning from github using http through a http proxy, I was getting the following error message:
error: error setting certificate verify locations:
CAfile: /bin/curl-ca-bundle.crt
CApath: none
git config --system http.sslcainfo \\bin\\curl-ca-bundle.crt
Part 1 is meant to give you a basic overview of the game we will create and introduce you with the library and tools we are going to use. Additionally, we will create a first skeleton of the game.
So, let’s start!
We’re going to use Prototype to make development easier, faster, and to spend less time fighting cross-browser issues.
We’re going to use basic HTML elements to draw the different sprites. We could also use a <canvas> element to draw the sprites, but this is more advanced and might be covered in a later part of the series.
The game will be organized in the following file structure:
The HTML document that we’re going to use is actually only containing the game canvas, everything else is going to be generated by JavaScript.
For now, the stylesheet will only contain some basic markup to set up the #canvas and #ship elements.
This will add a black border around the #canvas element, and will clip elements that are contained in it but move out of its borders.
The #ship element will get a background image, the correct width and height, and is made absolute, so it can easily be positioned inside the canvas.
The Ship graphic was taken from the kongregate.com Shootorials. Get it from here and save it as ship.png in the assets folder.
Now, let’s add our first lines of game code! As you might have noticed, we don’t the #ship element is never added to the canvas, so this is going to be the first thing we’ll have to do!
As you might have imagined, Prototype’s document.observe method allows us to listen to events that happen on the whole page.
The dom:loaded event is a special event that is fired once by Prototype as soon as the HTML page was built. In case this special event is fired, we use Prototype’s Element constructor to create a new div with the id ship and insert it into the canvas.
The result of this first part will be the following:
In the next part, we’ll discuss ways to add ship movement and implement it!
All source code is also available at my github repo.
I want to start a new series of blog posts giving a detailed insight into cross-browser JavaScript game development. This series will not be intended to be an introduction to JavaScript development in general, but basic JavaScript and DOM knowledge will be presumed.
The whole series will be heavily inspired by the shootorials that can be found over on the kongregate.com website, and will aim at building the same game in JavaScript.
The series will cover “drawing” game elements using HTML and CSS, handling key events to control the game and more that is important for game development in JavaScript.
I’m not yet sure about the number of parts this series will stretch over, or how deep I’ll go into details, but we’ll see. :)
I’ve been experiencing SSH timeouts after letting a connection to another server idle for some time. Apparently, this is caused by one of my routers, a Netgear RP614v2, which has a fixed timeout of 10 minutes or so for idling connections. After some googling, I found the following solution to this problem:
Open your ssh config file (should be .ssh/config on *nix systems) and add the following lines:
There will come soft rains and the smell of the ground,
And swallows circling with their shimmering sound;
And frogs in the pool singing at night,
And wild plum trees in tremulous white;
Robins will wear their feathery fire,
Whistling their whims on a low fence-wire;
And not one will know of the war, not one
Will care at last when it is done.
Not one would mind, neither bird nor tree,
If mankind perished utterly;
And Spring herself when she woke at dawn
Would scarcely know that we were gone.
| — | Sara Teasdale, 1920 |
