HTML and CSS Reference
In-Depth Information
function flyin() {
ctx.drawImage(compimg, 70,100,size,size);
size +=5;
if (size>50) {
clearInterval(tid);
ctx.fillText(result,200,100,250);
document.f.score.value = String(newscore);
musicelements[musicch].play();
}
}
Adding the audio enhancement, like adding video, provides an exercise in examining just what needs to be
changed and what remains the same. It certainly makes sense to develop a basic application first.
My idea was to make sounds for the four results. You could also have applause for any player win, booing
for any player loss, and something in between for the ties.
Some people like to include additional possible moves, with funny remarks describing what beats what, or
even replacing rock, paper, and scissors with three or more other possibilities. A few students of mine
have produced this game using a different language, such as Spanish. The more challenging task is to
make the application multilingual in a systematic way, by isolating the spoken language components. One
approach would involve changing the
beats
array to an array of arrays of arrays, with the first index
corresponding to the language. The label in the markup that holds the word Score also would need to
change, which you could accomplish by making it an input field and using CSS to remove its border.
Preparing applications for what is termed
localization
has emerged as an important area of development
for the Web.
Testing and uploading the application
You need to create or acquire (a polite term for finding something and copying the file to your computer)
the three images to represent rock, paper, and scissors. If you decide to enhance the application by
adding sounds, you need to produce or find the audio clips, convert these to the two common formats, and
upload all the sounds: this is 4 files times 2 formats for a total of 8 files.
Because this application involves a random element, make a concerted effort to do all the testing. You
want to test a player throwing each of the three possibilities versus each of the three computer moves.
You also want to test that the score goes up and down and stays the same as the situation dictates.
Typically, my testing routine is to make the rock throw repeatedly until I see all three computer moves at
least two times. Then I move on to paper, and then scissors, and then I keep changing my throw, say,
paper, rock, paper, scissors.
Test the basic program and then decide on what enhancements youd like to make to the presentation and
to the scoring. The images and the HTML document need to be uploaded when youve tested the program
on your local computer and decide to upload it to a server. If you decide to use different images for
computer moves than for player moves, youll have to find and upload even more. Some people like to put
images and audio files in subfolders. If you do this, dont forget to use the correct names in the code.
