truth_or_dare
- Gif HD source address: https://user-images.githubusercontent.com/15868458/63646763-8ab2ed00-c74a-11e9-81e8-e224a0ef375c.gif
Truth Adventure Online Address: https://zhaoolee.com/ProgrammingWithChrome/zhaoolee_true_or_dare/
True Talk Big Adventure is a simple and easy game, the specific rules are usually 2 people, you can use the decision to guess the fist; 3 people, you can use the back of your hand to decide; if there are many people, you can draw cards, usually the one who draws the ghost will choose True Talk or Big Adventure.
- If you choose the truth, the winner will ask the loser questions at will, and the loser must answer all the questions truthfully.
[ "How old was your first kiss?Who seized it?", "How old was your first love??Who is it??", "Several courses have been suspended in university so far?", "How many people did you kiss?", "If you get another chance,Back to high school,What would you most like to say to the opposite sex??", "What's the name of your first favorite heterosexual person?", "Who ever did you mean to be present??If not in the past,Which one would you choose now? YY(Italian Phonetic Abbreviations)object?", "What do you want for your dream lover?", "A heterosexual name you've always remembered?Reason?", "Talked about love several times?", "Who do you remember before you go to bed every day?", "What is the thing or thing you fear most(Say Three)?", "Do you care ta Past,Why?", "When do you plan to get married?", "What's the name of the opposite sex I miss most now?", "How did your first love affect you?", "You care about your wife(Husband)Not a virgin(Male virgin)Are you??", "You'll sacrifice everything for love,Include life??", "Want to have a boy or a girl after marriage?Say why.", "Have an affair with how many heterosexuals?", "Which means did you cheat in the exam??", "What's the most humiliating thing you've ever done?", "Want to be taken care of by a rich man now?", "Say who wasn't in the shower yesterday?", "What's scariest to lose??", "When do you think you're physically mature?", "Who is in charge of your family??", "If you're in a bad mood right now,What happens?", "What is your favorite novel?", "What is the thing or thing you are most afraid of(Say 3)?", "You think your fart stinks?", "How many love letters have been written so far?", "What's the most humiliating thing I've ever done?", "Describe your current life in four words?", "How many times do I go to the toilet to sleep at night?", "Among the people present,Who do you want to fight the most?", "What's the most memorable gift I've ever received?", "What was your shortest love?", "What style of underwear do you find sexiest for heterosexuals?", "I pulled some shit today?", "What brand of underwear are you wearing now?", "You slept with several heterosexuals?", "How often do I change my underwear??", "Do you like to sleep naked?", "What do you think is your most depressed nickname??", "What step did you get in touch with your lover's body??", "How many small yellow movies do you have in your collection?", "Have you ever been a third party??", "Who do you think is sexiest here?", "With your lover ML What do I do when I call my name incorrectly?", "Identify love without sex?", "What was your last spring dream like?", "What do you think about sex?", "Who is your dream lover?Without,Tell me what you want your dream lover to look like?", "What is the most difficult thing to do in front of your favorite person?", "How do you feel about your growth?", "For the first time ML What does it feel like?", "What if you suddenly feel like going to your favorite family?", "What is your chest size?", "Under what circumstances did the first kiss not occur?", "What is the most luxurious consumption?", "Which of the opposite sex do you think can be your sex fantasy?", "You fall in love with at most a few people at the same time?", "What do you want to do in the future?What is your ideal career?", "Tell me what you really think of me?", "What touches you most?", "Now who is your favorite person in your heart?", "What's the craziest thing you've ever done so far?", "If you were given a chance to travel anywhere in the world, where would you go??", "If time can go back, which time do you want to go back to??", "What's your favorite food?", "If your spouse wants to go abroad,What would you do?", "Biggest wish now?", "Do you think a long-distance relationship is meant to be apart??So if you like people from a distant country,Will you choose to follow him??", "I'm dating you with your lover at the same time,Who will you accompany?", "Is there really love in the world?What is love in your eyes?", "What gift would you like to receive on Valentine's Day??", "What animations do you like to watch?", "Your predecessor is married,You are willing to join him/Is she getting married??", "Meet the robbers in the middle of the night,He said he would not let you go without singing,What will you sing?", "No kidding,Have you had a grooming session??", "You think you look good,Or the photos look good?", "What pet do you want most in your mind?", "One of your good-looking heterosexual friends calls you in the middle of the night to open a room with you ML,How about you??", "If you let me kiss An anisotropy in the field,Who would you choose?Why?", "You're still a virgin/Male??" ]
- Choose a big risk and the winner will try to solve any behavioral problems at will.
[ ""Taiwan has returned!"Taiwan has returned!Let's take a look at the central station..."(It's like that)", "please kiss Three seconds from one of your closest heterosexual classmates at this desk or in this classroom", "Please select a heterosexual classmate to present to him or her", "Stand on a stool to perform gorilla breast beating and shouting", "Take a supermodel walk around a table or classroom", "Embrace for ten seconds with one of your closest heterosexual classmates at this desk or in this classroom.", "Find a cross-sex singer present to sing.(Invitation, three failed penalty shows)", "Check with your classmate on your right and sing the climax of Mouse Love Rice to her or him.", "10 seconds to your nearest homosexual friend, and look at them and say with an affectionate eye: I love you.", "Hold the left earlobe with your right hand, bend down, turn clockwise for 10 turns, and the chicken will not fall for 15 seconds on its own.", "Anisotropy circles around the site.", "Make a happy face for everyone.", "Hold one heterosexual until the next big adventure is over.", "Anisotropic expression for 3 minutes.", "With one heterosexual ten fingers,Look at each other for 10 seconds.", "Invite a heterosexual person to sing you a love song,Or invite a opposite sex to sing your love song.", "Be Sexiest,The most charming expression or action.", "Eat any dish your friend has given you.", "A close heterosexual person,Unlimited location.", "Kissing wall for 10 seconds.", "Grab the iron door and shout "Let me out"!"", "Men's arms measure women's chest from the front or The waist circumference of a measuring man for a woman or Hipline.", "One man sucks a card with his mouth first,Another person sucks the card away from the other side with his mouth.", "Girls lie on their backs,Boys on top,Do five push-ups.", "Boy lying on his back,Girls on top,Hold for 5 seconds.", "Boys sit in bed,Girls lie in bed,Put the head on the boy's leg,Look at each other for 10 seconds.", "Boys push girls around the corner,Use "flirt" to support the wall with one hand,Two people look at each other for 10 seconds.", "Boys kneel on one leg,Girls reach out,Boy's Parent Girl's Back of Hand.", "Shout out of the window:"I am so lonely~".", "Call a heterosexual person on your phone and say:"Actually.....I am....pig."", "Say as you touch your closest homosexual chest, "Mammy,I'm hungry!"", "Run around the house,And shout, "I will never wet my bed again!"", "One centimeter away from your nearest heterosexual face to face,Then kiss for 10 seconds.", "Select a man,Hit him on the chest and say, "You hate it!~"", "Shout the names of the second heterosexual person from your left hand in the street,And add "I hate you",But I love you so much."", ""Thunder" shouted out of the door,Rain collects clothes~"", "Help the farthest opposite sex take off the outermost dress,And then help them put it on.", "Have a drink with the second opposite sex counting from your left hand.", "Touch your chest and say "Ouch",It's too small!"", "Describe in detail the whole process of your first kiss,If not, imagine it.", "If you choose to be a character in a movie,Who would you choose??Why?", "If one day I quarreled with you,What would you do??", "What is the saddest time to cry?Why?", "If you date someone you like,Meet your predecessor,What will you do??", "If one day I told you I loved you,What would you do??", "Girls sit on boys'calves,Five crunches for boys.", "Let a woman try to get a man excited.", "Two people rub face to face,Still have a twist in the butt,And sing'Break Remix,Break Remix~'" ]
- When completed, this round ends and the next round begins.
Game interface design
- Draw interface using sketch
image
- The sketch design draft download address is as follows:
https://github.com/zhaoolee/ProgrammingWithChrome/tree/master/pwc_source/truth_or_dare/
Achieve Game Effects
- The source code is as follows
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Truth or Dare</title> </head> <body> <div id="root"> <div class="nav"> <div class="nav_atom nav_atom_truth" id="truth"> //True words </div> <div class="nav_atom nav_atom_dare" id="dare"> //Great Adventure </div> </div> <div id="content"> <div style="text-align: center">Let's take a real risk~</div> </div> </div> <script> // List of True Words var truth_info = [ "How old was your first kiss?Who seized it?", "How old was your first love??Who is it??", "Several courses have been suspended in university so far?", "How many people did you kiss?", "If you get another chance,Back to high school,What would you most like to say to the opposite sex??", "What's the name of your first favorite heterosexual person?", "Who ever did you mean to be present??If not in the past,Which one would you choose now? YY(Italian Phonetic Abbreviations)object?", "What do you want for your dream lover?", "A heterosexual name you've always remembered?Reason?", "Talked about love several times?", "Who do you remember before you go to bed every day?", "What is the thing or thing you fear most(Say Three)?", "Do you care ta Past,Why?", "When do you plan to get married?", "What's the name of the opposite sex I miss most now?", "How did your first love affect you?", "You care about your wife(Husband)Not a virgin(Male virgin)Are you??", "You'll sacrifice everything for love,Include life??", "Want to have a boy or a girl after marriage?Say why.", "Have an affair with how many heterosexuals?", "Which means did you cheat in the exam??", "What's the most humiliating thing you've ever done?", "Want to be taken care of by a rich man now?", "Say who wasn't in the shower yesterday?", "What's scariest to lose??", "When do you think you're physically mature?", "Who is in charge of your family??", "If you're in a bad mood right now,What happens?", "What is your favorite novel?", "What is the thing or thing you are most afraid of(Say 3)?", "You think your fart stinks?", "How many love letters have been written so far?", "What's the most humiliating thing I've ever done?", "Describe your current life in four words?", "How many times do I go to the toilet to sleep at night?", "Among the people present,Who do you want to fight the most?", "What's the most memorable gift I've ever received?", "What was your shortest love?", "What style of underwear do you find sexiest for heterosexuals?", "I pulled some shit today?", "What brand of underwear are you wearing now?", "You slept with several heterosexuals?", "How often do I change my underwear??", "Do you like to sleep naked?", "What do you think is your most depressed nickname??", "What step did you get in touch with your lover's body??", "How many small yellow movies do you have in your collection?", "Have you ever been a third party??", "Who do you think is sexiest here?", "With your lover ML What do I do when I call my name incorrectly?", "Identify love without sex?", "What was your last spring dream like?", "What do you think about sex?", "Who is your dream lover?Without,Tell me what you want your dream lover to look like?", "What is the most difficult thing to do in front of your favorite person?", "How do you feel about your growth?", "For the first time ML What does it feel like?", "What if you suddenly feel like going to your favorite family?", "What is your chest size?", "Under what circumstances did the first kiss not occur?", "What is the most luxurious consumption?", "Which of the opposite sex do you think can be your sex fantasy?", "You fall in love with at most a few people at the same time?", "What do you want to do in the future?What is your ideal career?", "Tell me what you really think of me?", "What touches you most?", "Now who is your favorite person in your heart?", "What's the craziest thing you've ever done so far?", "If you were given a chance to travel anywhere in the world, where would you go??", "If time can go back, which time do you want to go back to??", "What's your favorite food?", "If your spouse wants to go abroad,What would you do?", "Biggest wish now?", "Do you think a long-distance relationship is meant to be apart??So if you like people from a distant country,Will you choose to follow him??", "I'm dating you with your lover at the same time,Who will you accompany?", "Is there really love in the world?What is love in your eyes?", "What gift would you like to receive on Valentine's Day??", "What animations do you like to watch?", "Your predecessor is married,You are willing to join him/Is she getting married??", "Meet the robbers in the middle of the night,He said he would not let you go without singing,What will you sing?", "No kidding,Have you had a grooming session??", "You think you look good,Or the photos look good?", "What pet do you want most in your mind?", "One of your good-looking heterosexual friends calls you in the middle of the night to open a room with you ML,How about you??", "If you let me kiss An anisotropy in the field,Who would you choose?Why?", "You're still a virgin/Male??" ]; // List of Great Adventures var dare_info = [ ""Taiwan has returned!"Taiwan has returned!Let's take a look at the central station..."(It's like that)", "please kiss Three seconds from one of your closest heterosexual classmates at this desk or in this classroom", "Please select a heterosexual classmate to present to him or her", "Stand on a stool to perform gorilla breast beating and shouting", "Take a supermodel walk around a table or classroom", "Embrace for ten seconds with one of your closest heterosexual classmates at this desk or in this classroom.", "Find a cross-sex singer present to sing.(Invitation, three failed penalty shows)", "Check with your classmate on your right and sing the climax of Mouse Love Rice to her or him.", "10 seconds to your nearest homosexual friend, and look at them and say with an affectionate eye: I love you.", "Hold the left earlobe with your right hand, bend down, turn clockwise for 10 turns, and the chicken will not fall for 15 seconds on its own.", "Anisotropy circles around the site.", "Make a happy face for everyone.", "Hold one heterosexual until the next big adventure is over.", "Anisotropic expression for 3 minutes.", "With one heterosexual ten fingers,Look at each other for 10 seconds.", "Invite a heterosexual person to sing you a love song,Or invite a opposite sex to sing your love song.", "Be Sexiest,The most charming expression or action.", "Eat any dish your friend has given you.", "A close heterosexual person,Unlimited location.", "Kissing wall for 10 seconds.", "Grab the iron door and shout "Let me out"!"", "Men's arms measure women's chest from the front or The waist circumference of a measuring man for a woman or Hipline.", "One man sucks a card with his mouth first,Another person sucks the card away from the other side with his mouth.", "Girls lie on their backs,Boys on top,Do five push-ups.", "Boy lying on his back,Girls on top,Hold for 5 seconds.", "Boys sit in bed,Girls lie in bed,Put the head on the boy's leg,Look at each other for 10 seconds.", "Boys push girls around the corner,Use "flirt" to support the wall with one hand,Two people look at each other for 10 seconds.", "Boys kneel on one leg,Girls reach out,Boy's Parent Girl's Back of Hand.", "Shout out of the window:"I am so lonely~".", "Call a heterosexual person on your phone and say:"Actually.....I am....pig."", "Say as you touch your closest homosexual chest, "Mammy,I'm hungry!"", "Run around the house,And shout, "I will never wet my bed again!"", "One centimeter away from your nearest heterosexual face to face,Then kiss for 10 seconds.", "Select a man,Hit him on the chest and say, "You hate it!~"", "Shout the names of the second heterosexual person from your left hand in the street,And add "I hate you",But I love you so much."", ""Thunder" shouted out of the door,Rain collects clothes~"", "Help the farthest opposite sex take off the outermost dress,And then help them put it on.", "Have a drink with the second opposite sex counting from your left hand.", "Touch your chest and say "Ouch",It's too small!"", "Describe in detail the whole process of your first kiss,If not, imagine it.", "If you choose to be a character in a movie,Who would you choose??Why?", "If one day I quarreled with you,What would you do??", "What is the saddest time to cry?Why?", "If you date someone you like,Meet your predecessor,What will you do??", "If one day I told you I loved you,What would you do??", "Girls sit on boys'calves,Five crunches for boys.", "Let a woman try to get a man excited.", "Two people rub face to face,Still have a twist in the butt,And sing'Break Remix,Break Remix~'" ]; function get_random_atom(current_array){ var random_num = Math.random(); var index = parseInt(random_num * (current_array.length)); return current_array[index]; } function get_current_nav(current_nav){ if(current_nav === 'truth'){ return get_random_atom(truth_info); } if(current_nav === 'dare'){ return get_random_atom(dare_info); } } var current_nav = ""; var truth_dom = document.getElementById('truth'); var dare_dom = document.getElementById('dare'); var content_dom = document.getElementById('content'); truth_dom.addEventListener('click', function(){ current_nav = "truth"; // Clear dare's underline style and add true's dare_dom.style = "text-decoration: none"; truth_dom.style = "text-decoration: underline"; // Get True var content = get_current_nav('truth'); content_dom.innerHTML = "<div style='color: #64B587'>"+content+"</div>";; }) dare_dom.addEventListener("click", function(){ current_nav = "dare"; // Clear the underline style of true and add the underline style of dare truth_dom.style = "text-decoration: none"; dare_dom.style = "text-decoration: underline"; // Take Great Adventures var content = get_current_nav('dare'); content_dom.innerHTML = "<div style='color: #EA3681'>"+content+"</div>"; }) </script> <style> html, body{ margin: 0; padding: 0; } .nav{ height: 40px; display: flex; color: #FFFFFF; text-align: center; font-size: 20px; line-height: 40px; } .nav_atom{ flex: 1 1 auto; user-select: none; cursor:pointer; } .nav_atom_truth{ background-color: #64B587; } .nav_atom_dare{ background-color: #EA3681; } #content{ margin: 0 30px; font-size: 20px; padding-top: 50px; font-weight: 700; text-align: center; } </style> </body> </html>
- The complete program has been uploaded to github and downloaded at the following address:
https://github.com/zhaoolee/ProgrammingWithChrome/tree/master/pwc_source/truth_or_dare/
Programming knowledges
- EventTarget.addEventListener() registers the specified listener on EventTarget, and when the object triggers the specified event, the specified callback function is executed. Professional Interpretation Links for MDN
Write at the end:
"Programming with Chrome (How to Elegantly Dress B with Chrome)" shows the Sao operation of Chrome with a Gif diagram to fully tap into Chrome's programming potential!
This article is from the Chrome Programming Collection, Github Open Source Address: https://github.com/zhaoolee/ProgrammingWithChrome
I need your support. If you like this collection, you are welcome to add a star to it.