An html multiple-choice game: The Spy part 2

<%= @topic_view.topic.title %>
<%= @topic_view.topic.average_rating %> <%= @topic_view.topic.posts.count { |p| !!p.custom_fields['rating'] } %>

How about a gray border and a greenish-gray background?

i think greenish-grey bg would be a good choice

1 Like

This good enough for you, man?

Here is how to use it:
//how to use the game engine
To use it, here are the basic steps:
first, in your html tab, create as many div’s as scenes you want. each div should look like this:
<div class = "storytile scene[number]" id = "scene[number]"></div>.

Now you have to make sure the class scene number is the same as the id scene number. in this game I had 51 scenes. and a 52nd one to keep the game alive. always start at scene1. not 0.

Once you have an idea about how many scenes you need, you may use my css, or you can style the scenes however you want.

to use the functions, you will first learn how to use the `newTile()` function.

so first, let's say I am going to use my first scene.

in my html tab, I will put :

`<div class = "storytile scene1" id = "scene1"></div>`

in my JS tab, I will put:

`newTile('1','[h1 text]','[paragraph or main text]','[text of first button]','[text of second button]','[text of third button]','scene[number of next scene]','[number of next scene]','[number of next scene]');`

A little confusing. to make my intro, for example, I will write this:

`newTile('1','A RANDOM GAME','welcome to the random game! you can put html in this tab and can make text <b>STRONG!</b> and <em>ITALIC!</em> to start the game, you need to pick the right choice! Here is the first riddle: What gets bigger the more you take away?','a hole','uh... void','negative numbers?','scene2','scene3','scene4');`

I will explain all of the parameters:
the first one is the scene number. that means that the first scene (1) gets styled as so.
if the second scene or first button was correct, you'd write newTile('2','blah -- and so on...') which would bring you to the next scene.
if scene 2 was the wrong answer, you'd put fail('2','you lost!','blah...')

the second one it the title of the scene. if you don't want a title, you could enter the value as ''.

the third one is the section that tells the story.

the fourth, fifth and sixth ones are the first, second, and third texts on the buttons.

the last three are what scenes the buttons bring you to.


@ConnerOw1115 bro, I did not get a chance to comment until now.
I have played the game and I died many times. You have to give me the cheat codes. Lol.

Here are the suggestions I have for you to improve your project.

  • Have only one ‘continue’ button on the first page or hide the other two.
  • Make the images bigger. I think that will make the game look nicer.
  • Set a minimum width on the text so that it will not go all the way across the screen on large monitors.
  • Make all the buttons the same size no matter what text is inside to keep things consistent.
  • You must add sound effects, that would be so cool since you created a game. There is a way to add sound to Codepen projects but I do not know how it is done.

I can tell you put a lot of work into the project. Good job!

1 Like

this bg color looks much more pleasant b/c it doesn’t cause any eye strain. Good job brother!

1 Like

Thank you sooo much for taking the time to create this awesome game and sharing your work with me brother. I really appreciate that. I’ll get back to you as soon as I have done my story game for English learners. You ROCK!

1 Like

I don’t know how to add sound either :frowning:
I have an answer button at the bottom of the other three.

I do have the cheat codes. there is a button that allows you to see the answers.

I was too lazy to only show one continue button.
I also couldn’t do sound effects. all other things you requested are done.

did you write this story on your own?

Yup. Parts are created along the way as I create more of the game.

Can you teach me how to write stories like yours?

I’m not sure it is a teachable thing… It just randomly comes from my mind.
I’ll give you some tips though.

  1. create a subject like a spy for example.
  2. think of what the character is going to do; what is he going to accomplish?
  3. start with the first part and tell the story as you go. It will be fun too because what the outcome is might surprise you. I like finding the ending of a story when I finish it.

@mbassador to come up with a story what you can do is come up with a silly idea and turn it into a story for your game.

1 Like

Wait, do you mean that I don’t really have to plan the whole story out thoroughly before writing? Can I just go with the flow and write the things as they come to my mind? Thanks for you tips sir!

brandon wallace can you pls give me an example?

Yes. That’s how I do it. I think of a spy and how his boss sends him on a mission and create the whole thing in my mind.

@mbassador Here is an example. I hear wood being sawed outside my home right now. I imagine it could be someone sawing a tree down until they made one toothpick. Then I would write a story about that. Or build a random word generator and make a story using the first five random words that appear. It could be whatever you imagine.

1 Like

Thats a great idea! Thank you Brandon!

1 Like