Everywhere you look you find games, games and more games. They are on your cell phone, connected to your TV via a gaming console and everywhere you look on the web. People love their games, even the corny ones.
So, why not attract new visitors or keep visitors coming back with some games on your website? It’s not as hard as you might think. There are basically three methods that you can use to add some gaming fun to your website. And depending on how much effort you want to put forth, the games can be as elaborate or as simple as you like.
Write Your Own Simple Game in JavaScript
It doesn’t take much effort come up with a simple JavaScript driven game. I put together the trivia game code example below in about an hour. It took me much more than an hour to come up with the questions, though. The game is a simple true/false trivia game about the history of video games. I didn’t use any fancy image graphics although I would suggest doing so if you decide to really use this example on a website. Here’s the HTML code:
<p>
Video Game Trivia
<br />
Asking question <span id=”NumberAsked”>1</span> of 10 with <span id=”NumberCorrect”>0</span> answers correct</p>
<p>
<span id=”TriviaQuestion”>???</span>
</p>
<p>
<input id=”RadioTrue” type=”radio” value=”true” name=”answer” checked=”checked” /> True
<input id=”RadioFalse” type=”radio” value=”false” name=”answer” /> False
</p>
<p>
<input id=”ButtonContinue” onclick=”checkAnswer();” type=”button” value=”continue” />
</p>
<script language=”javascript” type=”text/javascript”>
// Array of trivia data
var TriviaData = new Array(10)
createTwoDimensionalArray(3);
// Variables to track state of the game
// i.e. number questions asked, current correct total and current question
var questionsAsked = 0;
var totalCorrect = 0;
var currentQuestion = 0;
var selectionValid = false;
// Questions
TriviaData[0][0] = “Donkey Kong, Pac-Man and Tempest were all released in the same year.”;
TriviaData[1][0] = “Capcom is a Chinese company.”;
TriviaData[2][0] = “Othello was the first arcade game released by Nintendo.”;
TriviaData[3][0] = “The Atari 2600 video game system was first released in 1975.”;
TriviaData[4][0] = “The Sega Saturn game system was released first in the U.S. in 1995.”;
TriviaData[5][0] = “The legendary game Doom was released in 1993 for the PC.”;
TriviaData[6][0] = “Dragon’s Lair was the first arcade game to feature laser-disc technology.”;
TriviaData[7][0] = “In 1990, Nintendo and Sega went to court over the rights to Tetris.”;
TriviaData[8][0] = “In 1996 Nintendo sells its billionth cartridge worldwide.”;
TriviaData[9][0] = “Microsoft first released the Xbox gaming system worldwide in 2001.”;
// Answers
TriviaData[0][1] = “true”;
TriviaData[1][1] = “false”;
TriviaData[2][1] = “true”;
TriviaData[3][1] = “false”;
TriviaData[4][1] = “false”;
TriviaData[5][1] = “true”;
TriviaData[6][1] = “true”;
TriviaData[7][1] = “false”;
TriviaData[8][1] = “true”;
TriviaData[9][1] = “false”;
// Has question been asked
// — necessary because we are asking in random order
TriviaData[0][2] = “no”;
TriviaData[1][2] = “no”;
TriviaData[2][2] = “no”;
TriviaData[3][2] = “no”;
TriviaData[4][2] = “no”;
TriviaData[5][2] = “no”;
TriviaData[6][2] = “no”;
TriviaData[7][2] = “no”;
TriviaData[8][2] = “no”;
TriviaData[9][2] = “no”;
// Load up first question
setQuestion();
// Sets question text and indicator so that we know the question has been displayed
function setQuestion() {
selectionValid = false; // Flag to make sure question has not been asked yet
while (selectionValid == false) {
currentQuestion = Math.floor(Math.random() * 10); // randomly select starting question
if (TriviaData[currentQuestion][2] == “no”) {
selectionValid = true;
}
}
document.getElementById(“TriviaQuestion”).innerHTML = TriviaData[currentQuestion][0];
TriviaData[currentQuestion][2] = “yes”;
questionsAsked = questionsAsked + 1;
}
function processAnswer(myAnswer) {
if (TriviaData[currentQuestion][1] == myAnswer) {
// answer correct
totalCorrect = totalCorrect + 1;
}
}
// This function creates our two dimensional array
function createTwoDimensionalArray(arraySize) {
for (i = 0; i < TriviaData.length; ++i)
TriviaData[i] = new Array(arraySize);
}
// This function checks the answer, updates correct total
// and randomly selects the next question
function checkAnswer() {
if (document.getElementById(“RadioTrue”).checked) {
processAnswer(“true”);
}
else {
processAnswer(“false”);
}
// get next question if not asked all yet
if (questionsAsked < 10) {
setQuestion();
}
// final question asked – disable button and show final results
else {
alert(“Quiz complete! You got “ + totalCorrect + ” correct out of 10.”);
document.getElementById(“ButtonContinue”).disabled = true;
}
// update totals
document.getElementById(“NumberAsked”).innerHTML = questionsAsked;
document.getElementById(“NumberCorrect”).innerHTML = totalCorrect;
}
</script>
You could expand the example above to multiple choice answers instead of just true/false by changing the script a bit and extending the array. You could also make it more interesting with some background colors, graphics, sounds, etc. You are not going to be making the next Space Invaders with JavaScript but you can make some interesting little text-based games with not much effort. Just remember to keep the game fresh by changing up your questions periodically.
Put Free Third Party Games on Your Website
There are several different websites now that specialize in providing free games that you can include on your own website. Most of the free games are fairly simple to play and similar to what you will find in many cell phone game apps. You won’t be playing anything as cool as Halo™ or Mario Bros.™ but many of the games are fun and, most importantly, free.
My two favorite places to download games are Crazy Monkey Games and Free Games Jungle. As with these websites, the vast majority of web-based games are Flash. These sites and others usually zip up the HTML markup that you will need along with the .swf Flash file that is the actual game.
Adding free games offered by other websites is a quick no-cost way to get some gaming fun on your website but you will need to pay careful attention to a few things before downloading. First, be sure to read any licensing and/or terms of use agreements before downloading. Often you will find wording that may restrict use based on commercial versus personal websites, requirements for linking to the site you download the game from, etc. Second, many sites offer free downloads but the games they offer for free have limits built into them like only allowing the first 5 levels to be playable. You will then have to buy the full version to open up the complete game. Of course, that is fine if you love the game but just be aware that “free” is not always what it seems.
Create Your Own Flash Game
If you want to go all out and build your own stellar Flash game for your website then I suggest that you start by playing a variety of other Flash games to get a feel for what works and what doesn’t. Then once you come up with your concept here are a few websites and tools that might help you in your endeavor.
1. Download Flash Free Trial – If you don’t already have Adobe Flash then I suggest you download the free trial to see if Flash programming is right for you. Programming in Flash is very different from HTML, Javascript, etc., so you may want to try it out before you commit.
2. Read some Tutorials at Flashkit.com – There are tutorials here for everything from getting started with your first game to the more advanced physics in game development.
3. Sprites and Textures – Find some textures and sprites to use. There are quite a few sprite & texture sets available to get you into development quickly and many are free. This can be a great time saver, especially in the beginning of your game development. You can always create your own custom sprites and textures later in the project if you like.
Have Fun, Make Fun
Adding games to your website can be fun for your visitors but also for you as a developer as well. After all, someone has to test out all those games before deciding what options are best for your website. Enjoy!
