Would like help with step 3 please. doesn’t matter ifyou can’t execute it. would like to just see how it is set up.written in C, CGI, and HTML
QUESTION: Web Game
We will build a simple multi user web dungeon crawler-like game.You or your team must build it cooperatively with your classmates.You can only use HTML, CGI and C. No CSS. No JS, etc.
The goal of the game will be to get 100 gold pieces.
You start the game with 10 gold pieces.
Each dungeon room you enter results in a win of 10 gold piecesor a loss of 5 gold pieces. You will gain or lose gold by engagingin a Q/A activity. Each room will have either a single COMP206question or a single Zelda question. If the player answerscorrectly they get 10 gold pieces. If they answer incorrectly, theylose 5 gold pieces. When you cannot pay, you die. When you get 100gold pieces, you win.
This is an equal opportunity dungeon, so you can start from anyroom. Simply type the URL of anyone’s room to start the game. Yourroom does not need to be pretty. It only needs to be functional. Ifyou want to make it pretty, then please go ahead, but stick toHTML, CGI and C. Have fun with this.
Each room is responsible to (1) show a question, (2) a picture,(3) be able to process the user’s response to the question, (4)award 10 gold or (5) remove 5 gold, (6) display how much gold theuser has, (7) display a DIE and (8) WIN message.
Each room will have a textbox input field and a submit button.In that textbox the user can either answer the question posed bythe room to win 10 gold pieces or lose 5 gold pieces, or they caninput a command. Valid commands are: NORTH, SOUTH, EAST, WEST, orGOLD. Each of the directions is connected to another classmate’sroom. This means that your room must connect to four other rooms.If we do this right, a player will be able to travel to all 250-500rooms. You only need to make sure that your room connects to fourother rooms.
Once the user has 100 gold they win. When a user presses submitwith 0 gold a lose message is automatically displayed. If the userhas some gold, even 1 gold piece, the game validates the attempt.If the person got it correct, then they get 10 more gold pieces,otherwise they lose 5 gold pieces. If they do not have enough goldpieces to pay for the loss, then they automatically die.
This is what you need to do:
STEP 0 – The public_html directory
Lab J shows you how to create the public_html directory. Pleasedo this.
You will need to create four files: index.html, answers.c,addgold.c and a picture.
The index.html file will be your dungeon room. The rest of thefiles are described below.
STEP 1 – Build the room using HTML and CGI Your dungeon roommust look like this:
You can center your NAME OF ROOM with the tag
.
To make the game more fun you must add at least one picture toyour page. Use the command:
The tag displays a .gif or .jpg or .png file stored in yourpublic_html directory. Write the filename in the src=”filename”attribute and specify how big you want the picture to be using theheight and width attributes.
Then write the question. Possible tags you might want to useare: bold, underline.
Then write the instruction: “Please type NORTH, SOUTH, EAST,WEST, GOLD, or answer the question.”
All the initial interaction with the room will be through thetextbox and submit button. The player will need to enter one of thefive commands NORTH, SOUTH, EAST, WEST, or GOLD, or provide theanswer to the question in the textbox and then press the submitbutton. Pressing the submit button will call the program answer(from gcc -o answer answer.c) to process the player’s request.
The commands NORTH, SOUTH, EAST, and WEST are movement commands.These commands cause the player to exit the room and enter anotherroom. You will need to talk to four other teams in our class to gettheir room URL.
The command GOLD will display the number of gold pieces theplayer currently possesses.
The player will input their command in the textbox and thenpress the submit button. The submit button will call the programanswer. This will be implemented using the
tag as covered in class. You may use either the POST or GETmethod to communicate with the C program.
Your web page can look basic and you will receive fullmarks.
If you want to take the time to make it fun looking, then please doso.
STEP 2 – The Submit button calls a C program called ./answer
Create a C program called answer.c and compile it to theexecutable answer using gcc -o answer answer.c. This programreceives two possible strings from your webpage. The first stringis one of the five commands “NORTH”, “SOUTH”, “EAST”, “WEST”, or“GOLD” in all caps. The second string is the answer to thequestion. You will extract this string from the shell memory if theform used GET or from STDIN if the form used POST (see lecturenotes). It is easiest to check for the command first. If the stringis not a command, then it must be an attempted answer to thequestion.
If the player input the word NORTH, SOUTH, EAST, or WEST, theprogram will programmatically generate a webpage that hyperlinks toanother room. Review from the lecture notes how to printf() to thebrowser. You will need to do something like this:
printf(“Press HERE to go North”);
The above printf() will display on the browser a hyperlink. Theplayer will simply click on the word Press HERE to go North withtheir mouse to cause the browser
to change to another webpage. The HTML tag to link to anotherwebpage is:
TEXT TO CLICK. You will need to do this for each
direction: NORTH, SOUTH, EAST and WEST.
If the player input the word GOLD, the program willprogrammatically generate a webpage that displays the amount ofgold pieces the player currently owns and a hyperlink to return theplayer back to the current room.
If the number of gold pieces is 0 or 100 the program mustprogrammatically generate a webpage that displays “YOU WIN” or “YOULOSE” without a hyperlink to another webpage. The game is now over.This message can be basic looking, or you can make it funlooking.
STEP 3 – The URL and Gold Pieces
Processing the gold pieces is the hardest part of thisassignment. It is probably a good idea to leave this to the end.Get steps 1 and 2 working without gold pieces. Once that works,then add the gold pieces.
We need a special HTML tag to handle the gold pieces. Use:
The input type “hidden” is an invisible input field. The usercannot see it. The user cannot interact with it. But you canprogrammatically manipulate it.
Your index.html page should not have the hidden field at thebeginning. Do not write it in your index.html file. When a userenters the game for the first time, they will do this by inputtinga room URL into their browser to start the game. Your game willassume that a missing hidden field means that the user is startingthe game and will assume the player has only 10 gold pieces. So,your index.html file should not contain a hidden field. This willbe added later through the answer.c program.
When the user presses the submit button the CGI payload willlook something like this:
http://URL/answer?command=NORTH
or
http://URL/answer?command=NORTH&gold=50
The payload format will depend on the presence of the hiddenfield. In the first case the hidden field was not present, so we donot see a gold argument. In the second case the hidden field waspresent.
When your program attempts to extract the gold argument from thepayload and does not find it, the program will assume 10 goldpieces.
When you hyperlink NORTH, SOUTH, EAST, WEST, or back to thecurrent page, you will need to programmatically insert the hiddenfield with the correct amount of gold into the destination page.Unfortunately, you are not permitted to
edit someone else’s webpage because it has been chmodread/execute only. The way to get around this is for the owner ofthe room to provide a service program. Let us call this serviceprogram gcc -o addgold addgold.c. Instead of the hyperlinks fromSTEP 2 directing the player to the index.html page of the nextroom, the hyperlink will direct the player to the addgold programof the next room. The addgold program will display the webpage andinsert the hidden field into the webpage.
The URL to the addgold program works like this:
-
Assume my game webpage is at http://www.cs.mcgill.ca/~usernameThe player would type that URL at the browser to start thegame.
-
When the player presses the submit button (when they want toinput a command or answer the question) the form calls thefollowing URL (let us assume the player wanted to go north):http://www.cs.mcgill.ca/~username/cgi-bin/answer?command=NORTH&gold=50
(Note: all executable programs must be in subdirectorycgi-bin)
-
The answer program will programmatically display a webpage witha hyperlink to the northern webpage using this URL:http://www.cs.mcgill.ca/~otherpage/cgi-bin/addgold?gold=50
-
The addgold program will display the room owner’s index.htmlpage with the hidden field. We are now at step 2 and we can input acommand on their page, which leads us to step 3, etc. until WIN orDIE.
The addgold program does its magic in the following way:
-
– It will fopen(“index.html”,”rt”) and fgets() each line andprintf() each line of the file to the player’s browser.
-
– When the printing comes to the tag, it inserts an extraprintf() that adds the gold. As in:
printf(“Note the following:
o ” prints out the double quote. This is unfortunate butnecessary in C.
o I am assuming goldpieces is an integer and I am adding it intothe output with the %d, but there are other ways to do this (maybethe gold was still a string).
-
– After the inserted line, it continues to read and write theindex.html file until the entire file has been printed to theplayer’s browser. The addgold program terminates.
-
– The player now sees the new webpage with the hidden gold tag.You have now successfully passed a value from your website to theother website.
That is it.
The rest should be straight forward.
Expert Answer
Answer to Would like help with step 3 please. doesn’t matter if you can’t execute it. would like to just see how it is set up. wri…