React Game- Elephant Taco Hunt

Developer
Sarah Drasner
Size
23,726 Kb
Views
56,672
  1. React Game- Elephant Taco Hunt Previews
  2. React Game- Elephant Taco Hunt HTML Codes
  3. React Game- Elephant Taco Hunt CSS Codes
  4. React Game- Elephant Taco Hunt JS Codes

How do I make an react game- elephant taco hunt?

This game is built with React, SVG, and GreenSock. It's about a hipster elephant who wants to get tacos but his friends keep trying to change plans and text him. Margaritas are extra points. This game is based on real life events. Someday I'll convert it to ES6.. What is a react game- elephant taco hunt? How do you make a react game- elephant taco hunt? This script and codes were developed by Sarah Drasner on 12 June 2022, Sunday.

React Game- Elephant Taco Hunt Previews
IQ Test

React Game- Elephant Taco Hunt - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>React Game- Elephant Taco Hunt</title> <link href='https://fonts.googleapis.com/css?family=Fira+Mono' rel='stylesheet' type='text/css'>
<meta property="og:image" content="https://s3-us-west-2.amazonaws.com/s.cdpn.io/28963/og-elephanttaco.jpg" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="824" />
<meta property="og:image:secure_url" content="https://s3-us-west-2.amazonaws.com/s.cdpn.io/28963/og-elephanttaco.jpg" />
<meta property="og:image:type" content="image/jpeg" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="container"> <div class="dots"></div> <svg class="cloud" width="477.5" height="89.5" viewBox="0 0 477.5 89.5" role="presentation"><path d="M477.5 41.4a369.1 369.1 0 0 1-47 3.4c-.5-3.2-5-5.7-10.5-5.7s-9.1 2.1-10.2 4.8a109.9 109.9 0 0 1-16.6-2.8c-.3-4.3-6.4-7.7-14-7.7h-2.3a19.2 19.2 0 0 1-3.5-3.9C357.7 6.3 334 20.8 334 20.8a41 41 0 0 1-11.4 4.1c-.9-7.8-10.6-14-22.4-14a30 30 0 0 0-13.3 2.9l-1-1c-16.5-17.5-38-10.1-47.5-5.4-4.3-4.5-11.5-7.4-19.8-7.4-12.3 0-22.4 6.5-23.7 14.9-6.6.6-13.3 1.2-19.7 1.5-3.3-3.2-9.2-5.4-16-5.4a26.2 26.2 0 0 0-13.1 3.2l-.6-.5c-9-8.4-33.6-1.3-34 9.6 0 .9-.9 1.9-2.5 2.8-2.7-2.8-10.4-3.7-18.9-2.1-10.2 1.9-17.9 6.9-17.1 11v.3l-.9.2c-1.1-3.4-6-6-11.8-6s-12 3.4-12 7.5a4.9 4.9 0 0 0 .4 1.9C23.5 42.5 0 44.7 0 44.7s38.3.8 75 8.4a7.7 7.7 0 0 0-.1 1.3c0 7.2 10 13 22.3 13a32.6 32.6 0 0 0 14.8-3.3c21 8.6 42.4 9.5 56 8.9.9 6.2 8.5 11.1 17.8 11.1a24 24 0 0 0 10-2.1c12.6 4.4 31.1 4.3 46.8 3a21.1 21.1 0 0 0 13.6 4.6c7.5 0 14-3.5 17-8.7 14.5 12 38.7 5.2 53.5-.8 2.8 4.4 9.7 7.5 17.8 7.5a28 28 0 0 0 10.9-2.1c8.8 2.7 17.6 1 19.2-8.8 3.2.4 8.7-1.8 14.2-5.9a41.6 41.6 0 0 0 5.3-4.7 27.1 27.1 0 0 0 10.7-2.2c5.5-2.2 9.7-5.3 10.7-7.8 28.7-8.5 62-14.7 62-14.7z" fill="#231f20"/></svg> <svg class="cloud2" width="477.5" height="89.5" viewBox="0 0 477.5 89.5" role="presentation"><path d="M477.5 41.4a369.1 369.1 0 0 1-47 3.4c-.5-3.2-5-5.7-10.5-5.7s-9.1 2.1-10.2 4.8a109.9 109.9 0 0 1-16.6-2.8c-.3-4.3-6.4-7.7-14-7.7h-2.3a19.2 19.2 0 0 1-3.5-3.9C357.7 6.3 334 20.8 334 20.8a41 41 0 0 1-11.4 4.1c-.9-7.8-10.6-14-22.4-14a30 30 0 0 0-13.3 2.9l-1-1c-16.5-17.5-38-10.1-47.5-5.4-4.3-4.5-11.5-7.4-19.8-7.4-12.3 0-22.4 6.5-23.7 14.9-6.6.6-13.3 1.2-19.7 1.5-3.3-3.2-9.2-5.4-16-5.4a26.2 26.2 0 0 0-13.1 3.2l-.6-.5c-9-8.4-33.6-1.3-34 9.6 0 .9-.9 1.9-2.5 2.8-2.7-2.8-10.4-3.7-18.9-2.1-10.2 1.9-17.9 6.9-17.1 11v.3l-.9.2c-1.1-3.4-6-6-11.8-6s-12 3.4-12 7.5a4.9 4.9 0 0 0 .4 1.9C23.5 42.5 0 44.7 0 44.7s38.3.8 75 8.4a7.7 7.7 0 0 0-.1 1.3c0 7.2 10 13 22.3 13a32.6 32.6 0 0 0 14.8-3.3c21 8.6 42.4 9.5 56 8.9.9 6.2 8.5 11.1 17.8 11.1a24 24 0 0 0 10-2.1c12.6 4.4 31.1 4.3 46.8 3a21.1 21.1 0 0 0 13.6 4.6c7.5 0 14-3.5 17-8.7 14.5 12 38.7 5.2 53.5-.8 2.8 4.4 9.7 7.5 17.8 7.5a28 28 0 0 0 10.9-2.1c8.8 2.7 17.6 1 19.2-8.8 3.2.4 8.7-1.8 14.2-5.9a41.6 41.6 0 0 0 5.3-4.7 27.1 27.1 0 0 0 10.7-2.2c5.5-2.2 9.7-5.3 10.7-7.8 28.7-8.5 62-14.7 62-14.7z" fill="#231f20"/></svg> <svg class="cloud3" width="477.5" height="89.5" viewBox="0 0 477.5 89.5" role="presentation"><path d="M477.5 41.4a369.1 369.1 0 0 1-47 3.4c-.5-3.2-5-5.7-10.5-5.7s-9.1 2.1-10.2 4.8a109.9 109.9 0 0 1-16.6-2.8c-.3-4.3-6.4-7.7-14-7.7h-2.3a19.2 19.2 0 0 1-3.5-3.9C357.7 6.3 334 20.8 334 20.8a41 41 0 0 1-11.4 4.1c-.9-7.8-10.6-14-22.4-14a30 30 0 0 0-13.3 2.9l-1-1c-16.5-17.5-38-10.1-47.5-5.4-4.3-4.5-11.5-7.4-19.8-7.4-12.3 0-22.4 6.5-23.7 14.9-6.6.6-13.3 1.2-19.7 1.5-3.3-3.2-9.2-5.4-16-5.4a26.2 26.2 0 0 0-13.1 3.2l-.6-.5c-9-8.4-33.6-1.3-34 9.6 0 .9-.9 1.9-2.5 2.8-2.7-2.8-10.4-3.7-18.9-2.1-10.2 1.9-17.9 6.9-17.1 11v.3l-.9.2c-1.1-3.4-6-6-11.8-6s-12 3.4-12 7.5a4.9 4.9 0 0 0 .4 1.9C23.5 42.5 0 44.7 0 44.7s38.3.8 75 8.4a7.7 7.7 0 0 0-.1 1.3c0 7.2 10 13 22.3 13a32.6 32.6 0 0 0 14.8-3.3c21 8.6 42.4 9.5 56 8.9.9 6.2 8.5 11.1 17.8 11.1a24 24 0 0 0 10-2.1c12.6 4.4 31.1 4.3 46.8 3a21.1 21.1 0 0 0 13.6 4.6c7.5 0 14-3.5 17-8.7 14.5 12 38.7 5.2 53.5-.8 2.8 4.4 9.7 7.5 17.8 7.5a28 28 0 0 0 10.9-2.1c8.8 2.7 17.6 1 19.2-8.8 3.2.4 8.7-1.8 14.2-5.9a41.6 41.6 0 0 0 5.3-4.7 27.1 27.1 0 0 0 10.7-2.2c5.5-2.2 9.7-5.3 10.7-7.8 28.7-8.5 62-14.7 62-14.7z" fill="#231f20"/></svg> <svg class="controls controls-bottom" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 210.8 101.5" role="presentation"> <path id="cloudmove2" d="M33.5 45.4c-1 4.1 3.9 8.8 11 10.5l3.4.6c1.9 4.1 10.7 9 21.9 11.8 9.5 2.4 18.1 2.6 22.7 1a11.6 11.6 0 0 0 6.7 4.7c4.9 1.2 9.9-1 13-5.1a19.6 19.6 0 0 0 10.4 6.6c9.3 2.3 18.8-2.5 23.3-11.2a19 19 0 0 0 10.5 7c11.7 2.9 24-6.2 27.5-20.3 2.7-10.7-.5-21.2-7.3-26.9l-.8-.3.2-.2.6.5 1.2.4a12.3 12.3 0 1 0-6.3-19.9l-1.3-.4a11.7 11.7 0 0 0-13.8 7.1 17.1 17.1 0 0 0-5.3-2.3A17.4 17.4 0 0 0 130 21.7a16.9 16.9 0 0 0-.5 4 14.6 14.6 0 0 0-22.5 8.5 14.7 14.7 0 0 0-.4 3.4l-1.2-.4c-5.1-1.3-10 .6-10.9 4.2a5.8 5.8 0 0 0 1.4 5.1h.4a4.3 4.3 0 0 1 1.7.8l-.7.4-1.3-1.3a4.4 4.4 0 0 0-5 3.3 4.2 4.2 0 0 0-.1.7A84.1 84.1 0 0 0 80.1 47l-5.5-1.2c0-4.1-4.1-8.3-9.9-9.8s-12.7.8-13.8 5.4v.6l-2.6-.8c-7.3-1.7-13.8.2-14.8 4.2z" fill="#b5b1a8" stroke="#000" stroke-miterlimit="10" stroke-width=".5"/><path d="M70.7 54.7h1.4l-.3-.4h-.7c-4.4 0-8.1-.7-8.1-1.5s3.5-1.4 7.9-1.5v-.2c0-4 4.1-7.3 9.2-7.3a11.5 11.5 0 0 1 3 .4 4.2 4.2 0 0 1-.8-2.4c0-3.3 4.1-5.9 9.1-5.9a13.6 13.6 0 0 1 3.4.4v-.4a9.9 9.9 0 0 1 19.2-3.6 23.2 23.2 0 0 1 7.6-1.2 21.2 21.2 0 0 1 12.9 4.1c1.2-2.2 4.2-3.8 7.8-4a16 16 0 1 1 31.6-3.2v.7a9.1 9.1 0 0 1 5.1 10.8c7.6 1.5 13.2 6 13.2 11.4a9.3 9.3 0 0 1-3.4 6.8c4.6 4.2 7.2 9.1 7.2 14.4 0 15.8-23.8 28.5-53.1 28.5S89.7 87.8 89.7 72.1c0-4.6 2-8.9 5.6-12.8L78 58.5h-7.3c-11.5 0-20.8-.9-20.8-2s9.3-1.8 20.8-1.8z" fill="#000"/><ellipse cx="132.3" cy="72.1" rx="1.3" fill="#000"/> <ellipse cx="36.3" cy="56.6" rx="17.2" ry="9.1" fill="#000"/><ellipse cx="78.5" cy="77.2" rx="24.4" ry="11.8" fill="#000"/><ellipse cx="55.6" cy="76.8" rx="19.3" ry="4.7" fill="#000"/><ellipse cx="31" cy="70.6" rx="15.5" ry="6.6" fill="#000"/><ellipse cx="23.2" cy="77.9" rx="23.2" ry="2.7" fill="#000"/><ellipse cx="52" cy="63.6" rx="21.5" ry="2.8" fill="#000"/><ellipse cx="194" cy="74.5" rx="16.7" ry="6.1" fill="#000"/><ellipse cx="168.9" cy="97.5" rx="36.5" ry="3.2" fill="#000"/><ellipse cx="166" cy="91.7" rx="32.4" ry="1.6" fill="#000"/><ellipse cx="131.2" cy="98.9" rx="21" ry="2.6" fill="#000"/><path d="M75.5 75.8c-12.2 0-23.1.5-30.1 1.2a48 48 0 0 0-5.5-.3 38.7 38.7 0 0 0-13.6 2.2h-1.6c-10.2 0-18.5.7-18.5 1.5s6.7 1.4 15.4 1.5a3.4 3.4 0 0 0-.8 2.1c-10.6.2-18.4.8-18.4 1.5s8.7 1.4 20.2 1.5c3 2.5 9.6 4.2 17.2 4.2a47.5 47.5 0 0 0 6.1-.4c.3 3.7 6 6.6 12.8 6.6s12.9-3.1 12.9-6.9-2.2-4.4-5.5-5.7A3.6 3.6 0 0 0 68 82v-.2h7.4c21.2 0 38.3-1.4 38.3-3s-17-3-38.2-3z" fill="#b5b1a8" stroke="#000" stroke-miterlimit="10" stroke-width=".5" opacity=".75"/></svg> <svg class="bk-clouds" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 228.3 155.1"><title>bk-clouds</title><path d="M183 44.5a57.9 57.9 0 0 0-26.3-6.1c-25.5 0-46.1 15.2-46.1 33.9a27.6 27.6 0 0 0 7 18l-5.3-.8a69.8 69.8 0 0 1-7.9-2 62.8 62.8 0 0 1-6.8-2.5C81.1 77.7 70 64.4 70 49.2c0-23 25.4-41.7 56.7-41.7 19 0 35.8 6.9 46.1 17.5a41.7 41.7 0 0 1 4.3 5.2 35.3 35.3 0 0 1 4 7.4 31.5 31.5 0 0 1 1.9 6.9z" fill="#000"/><path d="M189.5 43.9a35.2 35.2 0 0 0-4-7.2A46 46 0 0 0 172.9 25c-9.7-6.2-22.5-10-36.4-10C105.9 15 81 33.3 81 55.8c0 11.5 6.4 21.8 16.7 29.2a58.7 58.7 0 0 0 15.4 7.8 64.8 64.8 0 0 0 6.6 1.9l3.2.7a36.7 36.7 0 0 1-5.2-5 27.6 27.6 0 0 1-7-18c0-18.7 20.6-33.9 46.1-33.9a57.9 57.9 0 0 1 26.3 6.1 44.5 44.5 0 0 1 8.3 5.5 31.1 31.1 0 0 0-1.9-6.2z" fill="#b5b1a8"/><path d="M193.7 48.7a36.7 36.7 0 0 0-8.3-12 47.9 47.9 0 0 0-8.3-6.5c-9.3-5.8-21.3-9.3-34.4-9.3-29.5 0-53.4 17.6-53.4 39.3 0 10.6 5.8 20.3 15.1 27.4a52.4 52.4 0 0 0 8.6 5.3 61.4 61.4 0 0 0 10.9 4.1l1.6.4-2.7-2a36.7 36.7 0 0 1-5.2-5 27.6 27.6 0 0 1-7-18c0-18.7 20.6-33.9 46.1-33.9a57.9 57.9 0 0 1 26.3 6.1 44.5 44.5 0 0 1 8.3 5.5 36.5 36.5 0 0 1 4 3.9 30.2 30.2 0 0 0-1.6-5.3z" fill="#000"/><path d="M193.7 48.7a38.7 38.7 0 0 0-4.2-4.8 44.1 44.1 0 0 0-8.4-6.3 61.1 61.1 0 0 0-31-8c-27.4 0-49.5 16.3-49.5 36.5 0 9 4.4 17.2 11.7 23.5a45.6 45.6 0 0 0 7.3 5.2l4.3 2.2 2.7 1.2-1.1-.7-2.7-2a36.7 36.7 0 0 1-5.2-5 27.6 27.6 0 0 1-7-18c0-18.7 20.6-33.9 46.1-33.9a57.9 57.9 0 0 1 26.3 6.1 44.5 44.5 0 0 1 8.3 5.5 36.5 36.5 0 0 1 4 3.9 31.3 31.3 0 0 1 3.1 4.1 30.9 30.9 0 0 0-4.7-9.5z" fill="#b5b1a8"/><path id="cloudmove4" d="M95.6 71.5c0 2.6-3 4.7-6.7 4.7a8.3 8.3 0 0 1-5-1.6c-4.7 4.3-11.9 7.1-20.1 7.1-13.9 0-25.1-8-25.1-17.9v-.5H38c-16.4 0-20.7-12-20.7-26.8 0-8.4-4.8-15.8 1.9-20.7-1.6-1.6.3-2.5.3-4.6C19.4 5.6 23.5 0 32.1 0c5.5 0 10.3 1.9 13.1 4.7 5.9.1 10.4.7 10.4 1.4S52 7.3 47 7.4a6.9 6.9 0 0 1 .6 2.8 6.4 6.4 0 0 1-.1 1 30.6 30.6 0 0 1 6.7 2.9 22.4 22.4 0 0 1 24.3 31.5h1.1a7.2 7.2 0 0 1 5.6 8.5v.3a14.2 14.2 0 0 1 3.7 9.3 13.1 13.1 0 0 1-.4 3h.4c3.7.2 6.7 2.2 6.7 4.8z" fill="#000"/><path id="cloudmove2" d="M179.7 84.9c1 4.1-3.9 8.8-11 10.5l-3.4.6c-1.9 4.1-10.7 9-21.9 11.8-9.5 2.4-18.1 2.6-22.7 1a11.6 11.6 0 0 1-6.7 4.7c-4.9 1.2-9.9-1-13-5.1a19.6 19.6 0 0 1-10.4 6.6c-9.3 2.3-18.8-2.5-23.3-11.2a19 19 0 0 1-10.5 7c-11.7 2.9-24-6.2-27.5-20.3-2.7-10.7.5-21.2 7.3-26.9l.8-.3-.2-.2-.6.5-1.2.4a12.3 12.3 0 1 1 6.3-19.9l1.3-.4a11.7 11.7 0 0 1 13.8 7.1 17.1 17.1 0 0 1 5.3-2.3A17.4 17.4 0 0 1 83.2 61a16.9 16.9 0 0 1 .5 4 14.6 14.6 0 0 1 22.5 8.5 14.7 14.7 0 0 1 .4 3.4l1.2-.4c5.1-1.3 10 .6 10.9 4.2a5.8 5.8 0 0 1-1.4 5.1h-.4a4.3 4.3 0 0 0-1.7.8l.7.4 1.3-1.3a4.4 4.4 0 0 1 4.9 3.3 4.2 4.2 0 0 1 .1.7 84.1 84.1 0 0 1 10.8-3.4l5.5-1.2c0-4.1 4.1-8.3 9.9-9.8s12.7.8 13.8 5.4v.6l2.6-.8c7.3-1.6 13.9.3 14.9 4.4z" fill="#b5b1a8" stroke="#000" stroke-miterlimit="10"/><path d="M202.3 109.8l-.6-.8c2.1-.7 3.5-1.6 3.5-2.6s-3.7-3.2-8.5-3.5a2.4 2.4 0 0 0 0-3.3h1.5c6.9 0 12.5-.9 12.5-2.1s-5.6-2.1-12.5-2.1h-1.7a7 7 0 0 0 .8-3.4c-.1-4.8-5.1-8.6-11.3-8.5s-11.1 4-11.1 8.8v.2l-1.2.7a5.8 5.8 0 0 0-4.3-1.7l-1.6.2c-2.3-5.8-10.8-10-20.8-9.8-6.3.1-11.9 1.9-15.8 4.7-.6-1.5-2.6-2.6-5-2.7a7.8 7.8 0 0 0 .2-1.6c-.1-5-4.9-9.1-10.9-9a10.9 10.9 0 0 0-9.8 5.4h-.9c-7.1.1-13.1 2.6-15.6 6a18.8 18.8 0 0 0-4.4-.5c-6.7.1-12.1 3.5-12 7.7a5.5 5.5 0 0 0 1.7 3.8h-4l.3 17.7 111.4-1.6c1.2 1.8 5.2 3.2 10 3.2s8.7-1.3 9.9-3.1c4.9-.1 8.6-.5 8.6-1.1s-3.5-.9-8.4-1z" fill="#000"/><path d="M77.3 71.5h-.8a12 12 0 0 0 .8-4.2c0-8-7.9-14.4-17.6-14.4s-17.5 6.5-17.5 14.4 7.9 14.4 17.6 14.4l3.1-.2a9.8 9.8 0 0 0-.2 1.9c0 6.6 6.6 11.9 14.7 11.9S92.1 90 92.1 83.4s-6.6-11.9-14.8-11.9z" fill="#000"/><path id="cloudmove1" d="M138.2 99.2c0 4.2-5.9 7.6-13.2 7.6l-3.5-.3c-2.8 3.5-12.5 6.1-24.1 6.1-9.7 0-18.2-1.9-22.3-4.6a11.6 11.6 0 0 1-7.7 3c-5 0-9.3-3.3-11.3-8.1a19.6 19.6 0 0 1-11.6 3.8c-9.6 0-22.1 18.2-24.3 8.7-3.4 2.7-3-20.9-7.4-20.9-12 0 1.5-12.2 1.5-26.7 0-11-8.7-20.1-.7-24h.8v-.2l-.7.3Q4.2 44.8.1 31.7l12.2-12.3a12.3 12.3 0 0 1 11 6.8h1.3c6 0 6.5 3.5 7.3 9.2 1.8-.6-.9 0 1.1 0a17.4 17.4 0 0 1 17.4 17.3 16.9 16.9 0 0 1-.5 4 14.6 14.6 0 0 1 19.7 13.7 14.7 14.7 0 0 1-.4 3.4h1.2c5.3 0 9.6 3 9.6 6.7a5.8 5.8 0 0 1-2.6 4.6H77a4.3 4.3 0 0 0-1.8.4l.6.6 1.6-1a4.4 4.4 0 0 1 4 4.4 4.2 4.2 0 0 1-.1.7 84.1 84.1 0 0 1 11.3-.7l5.6.2c1-4 6-7.1 11.9-7.1s12.3 3.8 12.3 8.5v.6l2.7-.2c7.2.1 13.1 3.5 13.1 7.7z" fill="#b5b1a8"/><path d="M22 118.1h-.8l.7-.3z" fill="#9b9a9a"/><path d="M22 118.1h-.8l.7-.3z" fill="#9b9a9a"/><ellipse cx="153.9" cy="49.9" rx="21.5" ry="3.2" fill="#000"/><ellipse cx="199.9" cy="31.3" rx="12.5" ry="1.8" fill="#000"/><ellipse cx="146.3" cy="45.1" rx="8.4" ry="4.7" fill="#000"/><ellipse cx="208.7" cy="45.2" rx="17.4" ry="7.8" fill="#000"/><ellipse cx="150.3" cy="37.9" rx="8.4" ry="6.6" fill="#000"/><path id="cloudmove3" d="M216.4 49.4h-.8c-.6-2.5-4.2-4.3-8.5-4.3a14.1 14.1 0 0 0-3.1.3 19.7 19.7 0 0 0-11.8-9.6 8.4 8.4 0 0 0-6.6-12.7v-.6a8.1 8.1 0 1 0-8.9 8 8.4 8.4 0 0 0-.1.9 8.3 8.3 0 0 0 1.3 4.5 21.8 21.8 0 0 0-4.1 1.8l-.8-1a2.8 2.8 0 0 0 2-2.5c0-1.6-1.6-2.8-3.5-2.8a3.4 3.4 0 0 0-3.4 2.2 17.7 17.7 0 0 0-5.8-1c-7.1 0-12.8 3.9-12.8 8.7a6.3 6.3 0 0 0 1 3.4c-5.7.2-9.9.8-9.9 1.6s6 1.6 13.3 1.6a16.6 16.6 0 0 0 8.3 2.1l2.7-.2a15.6 15.6 0 0 0-.2 2.7c0 9.8 9.2 17.8 20.5 17.8S204 63.6 205.5 55h1.6a11.4 11.4 0 0 0 6.9-2h2.4c6.4 0 11.7-.8 11.7-1.9s-5.3-1.7-11.7-1.7z" fill="#b5b1a8" stroke="#000" stroke-miterlimit="10" stroke-width=".5"/><path d="M167.4 142c0-2-11.7-3.6-28.2-4.3 1.9-.3 3.1-.6 3.1-1s-5.6-1.5-12.6-1.5h-1a17.2 17.2 0 0 0-6.9-5.9c1.9-.9 3.1-2 3.1-3.3v-.2c4.4-.8 7.5-2.8 7.5-5v-.1h6c11.5 0 20.8-.9 20.8-2s-9.3-2-20.8-2H137l.3-.4h.7c4.4 0 8.1-.7 8.1-1.5s-3.5-1.4-7.9-1.5v-.2c0-4-4.1-7.3-9.2-7.3a11.5 11.5 0 0 0-3 .4 4.2 4.2 0 0 0 .8-2.4c0-3.3-4.1-5.9-9.1-5.9a13.6 13.6 0 0 0-3.4.4v-.4a9.9 9.9 0 0 0-19.2-3.6 23.2 23.2 0 0 0-7.6-1.2 21.2 21.2 0 0 0-12.9 4.1c-1.2-2.2-4.2-3.8-7.8-4A16 16 0 1 0 35.2 90v.7a9.1 9.1 0 0 0-5.1 10.8c-7.6 1.5-13.2 6-13.2 11.4a9.3 9.3 0 0 0 3.4 6.8c-4.6 4.2-7.2-1.9-7.2 3.4 0 7.4 5.2 14.1 13.7 19.1a4.9 4.9 0 0 0-1.8 3.5c0 4 6.1 7.2 13.7 7.2a20 20 0 0 0 10.8-2.8 95.6 95.6 0 0 0 16.7 1.6l7.5-.3c.7 2 4.7 3.4 9.5 3.2s8.5-2 9.1-4a28.9 28.9 0 0 0 16 4.4 28.9 28.9 0 0 0 16-4.4l3 .3c4.9 0 8.8-2 8.9-4.4 18.1-.6 31.2-2.4 31.2-4.5z" fill="#000"/></svg> <div id="app"></div>
</div> <script src='https://npmcdn.com/[email protected]/dist/react.min.js'></script>
<script src='https://npmcdn.com/[email protected]/dist/react-dom.min.js'></script>
<script src='http://s.cdpn.io/3/reqAnimFramePolyfill.js'></script>
<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/TweenMax-latest-beta.js?v=55'></script>
<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/28963/baffle.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

React Game- Elephant Taco Hunt - Script Codes CSS Codes

body { overflow: hidden; background: #000;
}
#container { background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/28963/grunge2.jpg"); position: absolute; top: 0; left: 0; right: 0; bottom: 0; max-width: 1300px; max-height: 650px; margin: auto; overflow: hidden;
}
.opener, .winning, .hangry { position: absolute; width: 60vw; background: black; font-size: 1.1em; left: 50%; color: white; margin-left: -33.33333vw; margin-top: 10vh; border-radius: 10px; font-family: 'Fira Mono', monospace; padding: 10vmin 4%; line-height: 2em; overflow: scroll;
}
.opener { z-index: 7000;
}
.winning, .hangry, .twitter { z-index: 30000; font-size: 1em; text-align: center; min-height: 60px;
}
.winning a, .hangry a, .twitter a { color: #00ffff; -webkit-transition: 0.3s color ease; transition: 0.3s color ease; vertical-align: top; text-decoration: none;
}
.winning a:hover, .hangry a:hover, .twitter a:hover { color: #0ecece;
}
h1.winning, h1.hangry-text { text-align: center; font-size: 20px;
}
.award, .hangry-svg { width: 85px; height: 90px; display: table; margin: 30px auto;
}
.award { background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/28963/award-export.svg") no-repeat;
}
.hangry-svg { background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/28963/hangry-export.svg") no-repeat;
}
.overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100vw; height: 100vh; background: #ff0032;
}
.overlayOpener { z-index: 6000;
}
.overlayLosing, .overlayWinning { z-index: 20000;
}
.overlayMargarita { z-index: 6000; visibility: hidden; opacity: 0; background: #cbdf26;
}
.loseContainer, .winContainer { visibility: hidden; opacity: 0;
}
.mutebutton { position: absolute; top: 10px; right: 10px; cursor: pointer; z-index: 10000;
}
.start { padding: .5em 1em; background: #00ffff; color: black; border-radius: 4px; border: none; margin: 30px auto 0; display: table; -webkit-transition: background 0.5s ease; transition: background 0.5s ease;
}
.start:hover { background: #13d0d0; -webkit-transition: background 0.3s ease; transition: background 0.3s ease;
}
.dots { background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/28963/dot3.svg); background-size: 30px; width: 100vw; height: 100vh; opacity: 0.8; position: absolute;
}
#app { position: relative;
}
.bk-clouds { position: absolute; left: -5vw; top: 30px; width: 40vw;
}
.cloud { position: absolute; top: 30px; width: 40vw;
}
.cloud2 { position: absolute; bottom: 10px; width: 20vw; opacity: 0.3;
}
.cloud3 { position: absolute; top: 200px; width: 30vw; opacity: 0.5;
}
.controls { position: absolute; right: -3vw; width: 30vw; top: 40vh;
}
.controls #up, .controls #down, .controls #left, .controls #right { cursor: pointer;
}
.elephantContainer { position: absolute; top: 15vh; left: 35vw; width: 30vw;
}
.taco { background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/28963/taco-export.svg"); background-size: cover; width: 95px; height: 65px;
}
.margarita { background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/28963/margarita-export.svg"); background-size: cover; width: 65px; height: 75px;
}
.tacoContainer, .textContainer, .margaritaContainer { position: absolute; -webkit-transform: translate3d(105vw, 0, 0); transform: translate3d(105vw, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-perspective: 1000px; perspective: 1000px;
}
.heartmeter { position: absolute; top: 0; left: 50%; margin-left: -6vw; width: 15vw; z-index: 3000;
}
.wow { background-size: cover; width: 150px; position: absolute; right: 0; top: 50px; visibility: hidden;
}
.inWow { background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/28963/wow.png") no-repeat; height: 120px;
}
.deWow { background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/28963/bang2.png") no-repeat; height: 150px;
}
.mWow { background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/28963/margarita-pow.png") no-repeat; height: 250px; width: 400px;
}
.relative { position: relative;
}
pre { position: absolute; top: 70vh; left: 35vw; width: 30vw; background: #eee; opacity: 0.8; z-index: 100000000;
}
.controls-top { z-index: 3000;
}
.mute { position: absolute; top: 10px; right: 10px; z-index: 6000; cursor: pointer;
}
.st0 { fill: #e2dfd8; stroke: #050606; stroke-width: 0.5; stroke-miterlimit: 10;
}
.st1 { fill: #e2dfd8; stroke: #050505; stroke-width: 0.5; stroke-miterlimit: 10;
}
.st2 { fill: #050606;
}
.st3 { fill: #020202;
}
.st4 { fill: none; stroke: #020202; stroke-miterlimit: 10;
}

React Game- Elephant Taco Hunt - Script Codes JS Codes

'use strict';
var urlSrc = "https://s3-us-west-2.amazonaws.com/s.cdpn.io/28963", fullAudio = new Audio(urlSrc + '/airship.mp4'), audioIncrease = new Audio(urlSrc + '/coin2.mp4'), audioDecrease = new Audio(urlSrc + '/attack_hit.mp4'), audioMargarita = new Audio(urlSrc + '/Pickup_04.mp3');
var App = React.createClass({ displayName: 'App', getInitialState: function getInitialState() { return { isMuted: false, isPlaying: false, score: 500, startTime: 0, finalScore: 0 }; }, componentDidMount: function componentDidMount() { if (typeof fullAudio.loop == 'boolean') { fullAudio.loop = true; } else { fullAudio.addEventListener('ended', function () { this.currentTime = 0; this.play(); }, false); } fullAudio.play(); }, startGame: function startGame(setGameToStart) { this.setState({ isPlaying: setGameToStart, score: 500, startTime: Date.now() }); }, _handleSoundChange: function _handleSoundChange() { this.setState({ isMuted: !this.state.isMuted }); fullAudio.muted = audioIncrease.muted = audioDecrease.muted = audioMargarita.muted = !this.state.isMuted; fullAudio.currentTime = this.state.isMuted ? fullAudio.currentTime : 0; }, _updateScore: function _updateScore(scoreDelta) { var score = Math.min(Math.max(0, this.state.score + scoreDelta), 1270); this.setState({ score: score }); if (score === 0 || score === 1270) { this.setState({ isPlaying: false, finalScore: 10000 - Math.round((Date.now() - this.state.startTime) / 30) }); } }, _isGameOver: function _isGameOver() { return this._isGameLost() || this._isGameWon(); }, _isGameLost: function _isGameLost() { return this.state.score === 0; }, _isGameWon: function _isGameWon() { return this.state.score === 1270; }, render: function render() { var source = this.state.isMuted ? 'sounds.svg' : 'mute.svg', url = 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/28963/' + source; return React.createElement( 'div', null, React.createElement( 'div', { className: 'mutebutton', onClick: this._handleSoundChange }, React.createElement('img', { src: url }) ), React.createElement(Controls, { _updateScore: this._updateScore, isPlaying: this.state.isPlaying, _isGameOver: this._isGameOver }), React.createElement(HeartMeter, { score: this.state.score }), React.createElement(Opener, { startGame: this.startGame }), React.createElement(Won, { _isGameWon: this._isGameWon, startGame: this.startGame, finalScore: this.state.finalScore }), React.createElement(Lost, { _isGameLost: this._isGameLost, startGame: this.startGame }) ); }
});
var Controls = React.createClass({ displayName: 'Controls', getInitialState: function getInitialState() { return { countY: 0, countX: 0, tacoPassed: false, margaritaPassed: false, textPassed: false }; }, _flyBy: function _flyBy(el, amt, name, delay) { if (this.props._isGameOver()) return; var obj = {}, offset = document.getElementById('container').offsetHeight, randY = Math.random() * (offset - 1) + 1; //randY = amt * 50; this is for testing obj[name] = false; this.setState(obj); TweenMax.fromTo(el, amt, { rotation: 0, y: randY, x: window.innerWidth + 200 }, { x: -200, y: randY, rotation: 360, delay: delay, onComplete: this._flyBy, onCompleteParams: [el, amt, name, delay], ease: Power1.easeInOut }); }, _elephantDirection: function _elephantDirection(e) { var currentCountX = this.state.countX, currentCountY = this.state.countY, amt = 20; if (e == "left" || e.keyCode == "37") { currentCountX -= amt; } else if (e == "right" || e.keyCode == "39") { currentCountX += amt; } else if (e == "up" || e.keyCode == "38") { currentCountY -= amt; } else if (e == "down" || e.keyCode == "40") { currentCountY += amt; } this.setState({ countX: currentCountX, countY: currentCountY }); var elContainer = this.refs.elContainer; TweenMax.to(elContainer, 0.2, { x: currentCountX, y: currentCountY, ease: Power4.easeOut }); }, componentDidMount: function componentDidMount() { window.addEventListener("keydown", this._elephantDirection, false); var tC1 = this.refs.tContainer, txC1 = this.refs.txContainer, mC1 = this.refs.mContainer, ele1 = this.refs.elContainer, getHitTestIncrease = this._hitTestIncrease, getHitTestDecrease = this._hitTestDecrease, getHitTestMargarita = this._hitTestMargarita; (function getCoords() { var tCoords = tC1.getBoundingClientRect(), txCoords = txC1.getBoundingClientRect(), mCoords = mC1.getBoundingClientRect(), elCoords = ele1.getBoundingClientRect(); function intersectRect(a, b) { return Math.max(a.left, b.left + 40) < Math.min(a.right, b.right - 40) && Math.max(a.top, b.top + 40) < Math.min(a.bottom, b.bottom - 40); } // can't do if/else because sometimes they both come out at once and one of them will be ignored if (intersectRect(tCoords, elCoords)) { getHitTestIncrease(); } if (intersectRect(txCoords, elCoords)) { getHitTestDecrease(); } if (intersectRect(mCoords, elCoords)) { getHitTestMargarita(); } requestAnimationFrame(getCoords); })(); }, componentDidUpdate: function componentDidUpdate(prevProps) { if (this.props.isPlaying && !prevProps.isPlaying) { var tC1 = this.refs.tContainer, txC1 = this.refs.txContainer, mC1 = this.refs.mContainer; this._flyBy(tC1, 5, "tacoPassed", 0.1); this._flyBy(txC1, 4, "textPassed", 0.2); this._flyBy(mC1, 4, "margaritaPassed", 13); } }, _hitTestIncrease: function _hitTestIncrease() { if (!this.state.tacoPassed && this.props.isPlaying) { //animation for wowie var inWow = this.refs.inWow, tl = new TimelineLite(); audioIncrease.play(); tl.fromTo(inWow, 0.4, { autoAlpha: 0, scale: 0.5 }, { autoAlpha: 1, scale: 1, ease: Power4.easeOut }); tl.to(inWow, 0.2, { autoAlpha: 0, scale: 0.5, ease: Power2.easeIn }, "+=0.3"); this.setState({ tacoPassed: true }); this.props._updateScore(75); } }, _hitTestDecrease: function _hitTestDecrease() { if (!this.state.textPassed && this.props.isPlaying) { //animation for uhoh var deWow = this.refs.deWow, tl = new TimelineLite();; audioDecrease.play(); tl.fromTo(deWow, 0.4, { autoAlpha: 0, scale: 0.5 }, { autoAlpha: 1, scale: 1, ease: Bounce.easeOut }); tl.to(deWow, 0.3, { autoAlpha: 0, scale: 0.5, ease: Power3.easeIn }, "+=0.3"); this.setState({ textPassed: true }); this.props._updateScore(-200); } }, _hitTestMargarita: function _hitTestMargarita() { if (!this.state.margaritaPassed && this.props.isPlaying) { //animation for margarita var mWow = this.refs.mWow, overlayM = this.refs.overlayM, tl = new TimelineLite(); audioMargarita.play(); tl.add("start"); tl.fromTo(mWow, 0.4, { autoAlpha: 0, scale: 0.5 }, { autoAlpha: 1, scale: 1, ease: Bounce.easeOut }, "start"); tl.to(overlayM, 0.4, { ease: RoughEase.ease.config({ template: Power2.easeOut, strength: 1.5, points: 20, taper: "none", randomize: true, clamp: false }), autoAlpha: 0.6 }, "start"); tl.to(mWow, 0.3, { autoAlpha: 0, scale: 0.5, ease: Power3.easeIn }, "start+=0.5"); tl.to(overlayM, 0.3, { autoAlpha: 0, ease: Power3.easeIn }, "start+=0.4"); this.setState({ margaritaPassed: true }); this.props._updateScore(+200); } }, render: function render() { return React.createElement( 'div', null, React.createElement( 'svg', { className: 'controls controls-top', id: 'touch-controls', xmlns: 'http://www.w3.org/2000/svg', viewBox: '0 0 210.8 101.5', 'aria-labelledby': 'title' }, React.createElement( 'title', { id: 'controls' }, 'controls' ), React.createElement('rect', { x: '120.2', y: '44.7', width: '59.3', height: '49.21', rx: '15', ry: '15', transform: 'rotate(-180 146.45 66.7)', fill: '#006666' }), React.createElement( 'g', { id: 'up', onClick: this._elephantDirection.bind(this, "up") }, React.createElement('path', { fill: '#fff', d: 'M150.9 49.5l-7.1-4.6-7.1 4.6h2.9V57h6.2v-7.5h5.1z' }), React.createElement('path', { d: 'M138.7 50.4h-4.4L144 44l8.4 5.5-1.4.9h-3.1v6.5l-1.4.9h-7.8zm-1.3-.9h2.6v7.4h5.2v-7.4h2.6l-5.2-3.4z', fill: '#000' }) ), React.createElement( 'g', { id: 'right', onClick: this._elephantDirection.bind(this, "right") }, React.createElement('path', { fill: '#fff', d: 'M160.8 71.6l4.6-7.5-4.6-7.6v3.1h-7.5v6.6h7.5v5.4z' }), React.createElement('path', { d: 'M159.9 58.6v-4.7l6.4 10.4-5.5 8.9-.9-1.5v-3.2h-6.5l-.9-1.5v-8.4zm.9-1.4V60h-7.4v5.6h7.4v2.8l3.4-5.6z', fill: '#000' }) ), React.createElement( 'g', { id: 'down', onClick: this._elephantDirection.bind(this, "down") }, React.createElement('path', { fill: '#fff', d: 'M150.9 78l-7.1 4.6-7-4.6h2.9v-7.5h6.2V78h5z' }), React.createElement('path', { d: 'M138.8 69.7h7.7l1.4.9v6.5h3l1.4.9-8.3 5.5-9.7-6.4h4.4zm3.9 11.7l5.2-3.4h-2.6v-7.4h-5.2V78h-2.6z', fill: '#000' }) ), React.createElement( 'g', { id: 'left', onClick: this._elephantDirection.bind(this, "left") }, React.createElement('path', { fill: '#fff', d: 'M126.2 71.6l-4.7-7.5 4.7-7.6v3.1h7.4v6.6h-7.4v5.4z' }), React.createElement('path', { d: 'M134.4 58.6v8.3l-.9 1.5H127v3.3l-.9 1.5-5.5-8.9 6.4-10.4v4.8zm-11.7 4.2l3.4 5.6v-2.8h7.4V60h-7.4v-2.8z', fill: '#000' }) ) ), React.createElement( 'div', { className: 'elephantContainer', ref: 'elContainer' }, React.createElement(Elephant, null), React.createElement('div', { className: 'deWow wow', ref: 'deWow' }), React.createElement('div', { className: 'inWow wow', ref: 'inWow' }), React.createElement('div', { className: 'mWow wow', ref: 'mWow' }) ), React.createElement( 'div', { className: 'tacoContainer', ref: 'tContainer' }, React.createElement('div', { className: 'taco', ref: 'taco' }) ), React.createElement( 'div', { className: 'margaritaContainer', ref: 'mContainer' }, React.createElement('div', { className: 'margarita', ref: 'margarita' }) ), React.createElement( 'div', { className: 'textContainer', ref: 'txContainer' }, React.createElement(Text, { ref: 'textmessages' }) ), React.createElement('div', { className: 'overlay overlayMargarita', ref: 'overlayM' }) ); }
});
var HeartMeter = React.createClass({ displayName: 'HeartMeter', render: function render() { return React.createElement( 'div', null, React.createElement( 'svg', { className: 'heartmeter', xmlns: 'http://www.w3.org/2000/svg', width: '250', height: '50', viewBox: '0 0 1741.8 395.6' }, React.createElement('path', { d: 'M1741.8 197.7c0 109.3-89 197.8-198.8 197.8a198.6 198.6 0 0 1-158.5-78.4H11.2A11.2 11.2 0 0 1 0 305.9V89.5a11.2 11.2 0 0 1 11.2-11.1h1373.4A198.8 198.8 0 0 1 1543 0c109.8 0 198.8 88.5 198.8 197.7z', fill: '#000' }), React.createElement('path', { d: 'M1591.8 127c-18.3 0-34.1 14.8-41.4 30.3-7.3-15.5-23.1-30.3-41.4-30.3a45.7 45.7 0 0 0-45.7 45.5c0 51.1 51.8 64.5 87.1 115.1 33.4-50.2 87.1-65.6 87.1-115.1a45.7 45.7 0 0 0-45.7-45.5z', fill: '#b29968' }), React.createElement('rect', { x: '68.2', y: '140.8', width: this.props.score, height: '101.55', fill: '#9391aa' }) ) ); }
});
var Won = React.createClass({ displayName: 'Won', componentWillUpdate: function componentWillUpdate() { if (this.props._isGameWon() === true) { this._youWon(); } }, _youWon: function _youWon() { var winContainer = this.refs.winContainer; TweenMax.fromTo(winContainer, 0.2, { autoAlpha: 0 }, { autoAlpha: 1, ease: Power3.easeOut }); var b = baffle('.winning-text'); b.set({ characters: '+-•~░█▓ ▓▒░!=*' }); b.start(); b.reveal(2000); }, _handleRestartClick: function _handleRestartClick() { var winContainer = this.refs.winContainer; TweenMax.fromTo(winContainer, 0.2, { autoAlpha: 1 }, { autoAlpha: 0, ease: Power3.easeOut }); this.props.startGame(true); }, render: function render() { var final = this.props.finalScore, twitterURL = "https://twitter.com/intent/tweet?text=I+won+at+Elephant+Taco+Hunt+on+@CodePen!+My+score+was+" + final + "!+You+can+play+here:+http://codepen.io/sdras/full/YWBdQd&via=sarah_edo"; return React.createElement( 'div', { className: 'winContainer', ref: 'winContainer' }, React.createElement('div', { className: 'overlay overlayWinning' }), React.createElement( 'div', { className: 'winning' }, React.createElement( 'h1', { className: 'winning-text' }, 'Congrats!' ), React.createElement( 'div', { className: 'winning-text' }, 'You got to eat tacos and nobody changed your plans! Super.' ), React.createElement( 'div', { className: 'twitter' }, React.createElement( 'a', { href: twitterURL, target: '_blank' }, 'Tweet your score! ', React.createElement( 'svg', { xmlns: 'http://www.w3.org/2000/svg', width: '25', height: '25', viewBox: '0 0 32 32' }, React.createElement('path', { fill: '#00ffff', d: 'M32 7.075c-1.175.525-2.444.875-3.77 1.03 1.357-.812 2.395-2.1 2.888-3.63-1.27.75-2.675 1.3-4.17 1.594C25.75 4.793 24.044 4 22.156 4c-3.625 0-6.563 2.938-6.563 6.563 0 .512.056 1.012.17 1.494C10.304 11.782 5.466 9.17 2.23 5.195c-.563.97-.887 2.1-.887 3.3 0 2.275 1.156 4.287 2.92 5.463-1.076-.03-2.088-.33-2.976-.82v.082c0 3.18 2.263 5.838 5.27 6.437-.55.15-1.132.23-1.732.23-.425 0-.83-.043-1.237-.118.838 2.605 3.263 4.505 6.13 4.562-2.25 1.762-5.074 2.813-8.155 2.813-.53 0-1.05-.03-1.57-.094C2.908 28.92 6.357 30 10.064 30c12.075 0 18.68-10.005 18.68-18.68 0-.287-.005-.57-.018-.85 1.28-.92 2.394-2.075 3.275-3.394z' }) ) ) ), React.createElement('div', { className: 'award' }), React.createElement( 'button', { className: 'start', onClick: this._handleRestartClick }, 'Play again!' ) ) ); }
});
var Lost = React.createClass({ displayName: 'Lost', componentWillUpdate: function componentWillUpdate() { if (this.props._isGameLost() === true) { this._youLose(); } }, _youLose: function _youLose() { var loseContainer = this.refs.loseContainer; TweenMax.fromTo(loseContainer, 0.2, { autoAlpha: 0 }, { autoAlpha: 1, ease: Power3.easeOut }); var b = baffle('.hangry-text'); b.set({ characters: '+-•~░█▓ ▓▒░!=*' }); b.start(); b.reveal(2000); }, _handleRestartClick: function _handleRestartClick() { var loseContainer = this.refs.loseContainer; TweenMax.fromTo(loseContainer, 0.2, { autoAlpha: 1 }, { autoAlpha: 0, ease: Power3.easeOut }); this.props.startGame(true); }, render: function render() { return React.createElement( 'div', { className: 'loseContainer', ref: 'loseContainer' }, React.createElement('div', { className: 'overlay overlayLosing' }), React.createElement( 'div', { className: 'hangry' }, React.createElement( 'h1', { className: 'hangry-text' }, 'Aw Nuts!' ), React.createElement( 'div', { className: 'hangry-text' }, 'You were overruled and didn\'t get to eat any tacos. Sounds like you\'re going to a movie you already saw instead.' ), React.createElement('div', { className: 'hangry-svg' }), React.createElement( 'button', { className: 'start', onClick: this._handleRestartClick }, 'Play again!' ) ) ); }
});
var Text = React.createClass({ displayName: 'Text', componentDidMount: function componentDidMount() { var bkT = this.refs.bkText; TweenMax.to(bkT, 0.5, { ease: RoughEase.ease.config({ template: Power0.easeNone, strength: 1, points: 10, taper: "none", randomize: true, clamp: false }), repeat: -1, yoyo: true, fill: "#eee" }); }, render: function render() { return React.createElement( 'svg', { className: 'text', width: '65.9', height: '80.6', viewBox: '0 0 65.9 80.6', role: 'presentation' }, React.createElement('path', { ref: 'bkText', fill: '#d16f43', d: 'M.4 7.4H46v62.47H.4z' }), React.createElement('path', { fill: '#fcfbfa', d: 'M27.5 29.8h33v13.75h-33z' }), React.createElement('path', { fill: '#e2dfd8', d: 'M17.2 69.8h13.4v10.79H17.2z' }), React.createElement('path', { d: 'M54.8 21.2H34.6a11.2 11.2 0 0 0-11.1 11.1v8.2a11 11 0 0 0 1.5 5.7 9.3 9.3 0 0 1-4 4.6.8.8 0 0 0 .2 1.4 10.8 10.8 0 0 0 8.2-1.9 11 11 0 0 0 5.2 1.3h20.2a11.2 11.2 0 0 0 11.1-11.1v-8.2a11.2 11.2 0 0 0-11.1-11.1zM34 39.8a3.4 3.4 0 0 1-3.4-3V36a3.4 3.4 0 1 1 3.4 3.8zm10.6.2a3.4 3.4 0 1 1 3.4-3.4 3.4 3.4 0 0 1-3.4 3.4zm10.6.2h-.7l-.6-.2a3.4 3.4 0 0 1 0-6.3l.6-.2h.7a3.4 3.4 0 0 1 0 6.9zM42.3 50.8v15.8a2.2 2.2 0 0 1-2.2 2.2H6.8a2.2 2.2 0 0 1-2.2-2.2V14a2.2 2.2 0 0 1 2.2-2.2h33.3a2.2 2.2 0 0 1 2.2 2.2v8h4.6V8.7A8.7 8.7 0 0 0 38.3 0H8.7A8.7 8.7 0 0 0 0 8.7v63.2a8.7 8.7 0 0 0 8.7 8.7h29.6a8.7 8.7 0 0 0 8.7-8.7V50.8zm-18.9 28a4 4 0 1 1 4-4 4 4 0 0 1-3.9 4z' }) ); }
});
var Elephant = React.createClass({ displayName: 'Elephant', render: function render() { return React.createElement( 'svg', { className: 'elephant', xmlns: 'http://www.w3.org/2000/svg', viewBox: '15 15 255 130' }, React.createElement('path', { id: 'ear-right', className: 'st0', d: 'M173.9 62s58.7-16.7 68.3-32.3c9.7-15.7 19.7-11 18-2.7-1.7 8.3-40 49.3-49.7 47.7-9.7-1.7-27.7 7.1-31 0-3.2-7-15.7-9-5.6-12.7z' }), React.createElement('path', { className: 'st1', d: 'M154.1 117.3s16.5 6.9 18.5 11.2c2 4.2 1.5 6 3.5 5.8s11.2-5.8 8-12.9-23-24.9-28.8-17.4-6.2 12.4-1.2 13.3z' }), React.createElement('ellipse', { className: 'st0', cx: '130.8', cy: '88.7', rx: '35.2', ry: '28.7' }), React.createElement('ellipse', { className: 'st2', cx: '87.4', cy: '92.8', rx: '10.8', ry: '4.2' }), React.createElement('path', { className: 'st1', d: 'M208.3 104.6c0 .3-.1.5-.4.6l-16.1 2.8c-.3 0-.5-.1-.6-.4l-2.3-12.3c0-.3.1-.5.5-.6l16-3.8h.1c.1 0 .2.1.3.1.1 0 .2.1.2.3l2.3 13.3z' }), React.createElement('path', { className: 'st1', d: 'M245.4 85.4c-.3-1.3-.8-2.5-1.7-3.6-2.7-3.3-7.4-3.9-10.3-1.5-3 2.5-3.2 7.1-.5 10.4 2.2 2.6 5.6 3.6 8.4 2.6v.3c1 13-14.1 6.7-14.1 6.7-.2-.6-.4-1.2-.6-1.7l-2.2.7c-.5-.6-1.1-1.1-1.9-1.5l3.1-1c-.9-1.2-2.2-2.2-4.1-3.2.1-.8.1-2.7.1-3.5v-.8l-5.3.4c-.2 0-.5.2-.6.4-.2.2-.2.5-.2.8l1.1 6.4c-.7.2-1.3.5-1.9.9l-.7-3.8-4.3 1.2 1.5 8.4c.3 1.9-.9 3.7-2.8 4l-16.1 2.8h-.6c-1.7 0-3.2-1.2-3.5-2.9l-2.3-12.3c-.3-1.9.9-3.7 2.8-4.1l16-3.8c1-.2 1.9 0 2.7.6.8.5 1.3 1.3 1.4 2.3l.5 3 4.3-1.2-.2-1.2c-.1-.8 0-1.6.5-2.2.5-.7 1.2-1.1 1.9-1.2h.1l5.4-.4c-.5-5.2-2.5-10-5.6-14.2-2.9-3.9-6.8-7.2-11.3-9.8-5.5-3-11.9-4.9-18.8-5.1H184c-10.8 0-20.5 3.8-27.3 10-.2.2-.4.3-.5.5-5.2 4.9-8.6 11.1-9.4 17.9-.1 1.1-.2 2.2-.2 3.3-1.3 2.2-1.7 4.7-1.5 7.5.2 2.1.8 4.4 1.8 6.6 1 2.3 2.5 4.5 4.4 6.6.2.3.5.5.7.8.7.8 1.6 1.5 2.4 2.3l.3.3c4 3.3 8.5 5.2 12.7 5.9 4.6 2.4 10.6 4.2 17.4 4.9.7.1 1.4.1 2.2.2 10 .7 19-1.2 24.7-4.6 1.9-.5 3.8-1.3 5.5-2.1 1.2-.6 2.4-1.3 3.4-2 8.2 3.5 17.8 3.1 17.8 3.1 21.3-.2 13-24.1 7-34.1z' }), React.createElement('path', { className: 'st2', d: 'M120.9 116.5s-20.3-44.5-7.5-52.8c0 0-65.1 26.3 7.5 52.8z' }), React.createElement('ellipse', { className: 'st2', cx: '87.8', cy: '99.8', rx: '19.2', ry: '7.8' }), React.createElement('path', { className: 'st2', d: 'M204.8 63.6s-20.1-29.6-44-11.9c0 0-3.9-3.3-7.3 3.3-4 7.9-5.1 7.3-5.1 7.3s-6-4.2-6.9 10.5c-.8 14.7-15.7 22.5-4.8 26.2 10.8 3.7 31.8-23.7 31.8-23.7s19.7-16.8 36.3-11.7z' }), React.createElement('path', { id: 'ear-left', className: 'st0', d: 'M160.3 68.7S111.6 63 64 78.4c0 0-31.3 5.7-35 0 0 0-18.7-5.3-5.7 5.2 0 0 20.3 15.8 55.3 16s60.7-11.2 60.7-11.2l23.7-4.8c-.1-.1 23.3-13.9-2.7-14.9z' }), React.createElement( 'g', { id: 'eyes' }, React.createElement('ellipse', { className: 'st3', cx: '200.7', cy: '99.5', rx: '2.2', ry: '4.5' }), React.createElement('ellipse', { className: 'st3', cx: '219.1', cy: '94.4', rx: '.8', ry: '2.6' }) ), React.createElement('path', { className: 'st4', d: 'M217.1 118.3s-14.5 2-16.3-4M205.3 110.7s2 6-10.7 3.8' }), React.createElement('path', { className: 'st1', d: 'M162.3 129s-4.2-.8-6-8c-1.8-7.2-2-18-13-17s-12.5 8.8-12.5 8.8-4 6.7 7.5 17.2c0 0 2.7 1.8 3.6 6.5 1.5 8.1 20.4-7.5 20.4-7.5z' }), React.createElement('ellipse', { transform: 'rotate(-20.12 152.072 132.685)', className: 'st1', cx: '152.1', cy: '132.7', rx: '10.9', ry: '6.7' }), React.createElement('path', { d: 'M141.6 112.8c-.3.1-.6 0-.7-.3-.1-.3 0-.6.3-.7.3-.1.6 0 .7.3.1.3-.1.6-.3.7zm5.7 2.4l-1-1.5c-.1-.1-.3-.2-.4-.1-.1 0-.2.1-.2.2l-.7 1.6v.1c0 .2.1.4.3.4h.4c.1.9-.3 1.8-1.1 2.4l-2.4-5.2c.3-.4.4-.9.2-1.4-.3-.6-1-.9-1.7-.6-.6.3-.9 1-.6 1.7.2.5.7.7 1.2.7l2.4 5.2c-.9.2-1.9 0-2.6-.7l.2-.2.1-.1c.1-.2 0-.4-.1-.5h-.1l-1.7-.6h-.3c-.2.1-.2.2-.2.4l.5 1.7v.1c.1.2.3.3.5.2 0 0 .1 0 .1-.1l.2-.2c1 1.1 2.7 1.5 4.2.8s2.3-2.2 2.1-3.7h.4c.4-.1.5-.3.3-.6.1 0 .1 0 0 0z' }), React.createElement( 'g', { id: 'glasses' }, React.createElement('path', { className: 'st2', d: 'M229.1 95.2l-.3-5.5v-.1c-.1-.8-.6-1.5-1.2-1.9-.6-.5-1.4-.6-2.2-.5l-3.9.3-5.4.4h-.1c-.8.1-1.5.6-1.9 1.2-.5.7-.6 1.5-.5 2.2l.2 1.2-4.3 1.2-.5-3c-.2-.9-.7-1.7-1.4-2.3-.8-.5-1.7-.8-2.7-.6l-16 3.8c-1.9.3-3.2 2.1-2.8 4.1l2.3 12.3c.3 1.7 1.8 2.9 3.5 2.9h.6l16.1-2.8c1.9-.3 3.2-2.1 2.8-4l-1.5-8.4 4.3-1.2.7 3.8c.6-.4 1.2-.7 1.9-.9l-1.1-6.4c0-.3 0-.5.2-.8.1-.2.4-.3.6-.4l5.3-.4 4-.3h.1c.3 0 .5 0 .8.2.2.2.3.4.4.6l.3 5.5v.1c0 .3 0 .5-.2.7-.2.2-.4.4-.7.4l-.7.2-3.1 1c.8.4 1.4.9 1.9 1.5l2.2-.7h.1c.8-.1 1.4-.6 1.9-1.2.2-.6.4-1.4.3-2.2zm-21.3 10l-16.1 2.8c-.3 0-.5-.1-.6-.4l-2.3-12.3c0-.3.1-.5.5-.6l16-3.8h.1c.1 0 .2.1.3.1.1 0 .2.1.2.3l2.3 13.4c.1.1-.1.4-.4.5z' }) ) ); }
});
var Opener = React.createClass({ displayName: 'Opener', componentDidMount: function componentDidMount() { var o = baffle('.opener-text'); o.set({ characters: '+-•~░█▓ ▓▒░!=*' }); o.start(); o.reveal(2000); }, _handleOpenClick: function _handleOpenClick() { TweenMax.to(".openContainer", 1, { autoAlpha: 0 }); this.props.startGame(true); }, render: function render() { return React.createElement( 'div', { className: 'openContainer' }, React.createElement('div', { className: 'overlay overlayOpener' }), React.createElement( 'div', { className: 'opener' }, React.createElement( 'div', { id: 'opener-text' }, 'Once there was an elephant. He was excited to go out with his friends and get tacos, but they kept texting him to change the plans. Help the elephant get all the tacos and avoid flakey text messages to get to delicious glory!' ), React.createElement( 'button', { className: 'start', onClick: this._handleOpenClick }, 'Let\'s go!' ) ) ); }
});
ReactDOM.render(React.createElement(App, null), document.getElementById('app'));
//animation that's repeated for all of the sections
function revolve() { var tl = new TimelineMax(), cm1 = dc("cloudmove1"), cm2 = dc("cloudmove2"), cm3 = dc("cloudmove3"), ear1 = dc("ear-right"), ear2 = dc("ear-left"); function dc(el) { return document.getElementById(el); } tl.add("begin"); tl.to(cm1, 4, { x: 4, y: 10, repeat: -1, yoyo: true, ease: Linear.easeNone }, "begin"); tl.to(cm2, 4, { x: 20, y: 3, repeat: -1, yoyo: true, ease: Linear.easeNone }, "begin"); tl.to(cm3, 4, { x: -10, y: 3, repeat: -1, yoyo: true, ease: Linear.easeNone }, "begin"); //ears tl.to(ear1, 1, { y: 3, transformOrigin: "0% 100%", rotation: 5, repeat: -1, yoyo: true, ease: Sine.easeInOut }, "begin"); tl.to(ear2, 1, { transformOrigin: "100% 30%", rotation: -10, repeat: -1, yoyo: true, ease: Sine.easeInOut }, "begin"); tl.to(".elephant", 2, { y: 10, yoyo: true, repeat: -1, ease: Sine.easeInOut }, "begin"); tl.fromTo(".cloud", 20, { x: 2000 }, { x: -500, repeat: -1, ease: Linear.easeNone }, "begin"); tl.fromTo(".cloud2", 25, { x: 1200 }, { x: -500, repeat: -1, ease: Linear.easeNone }, "begin"); tl.fromTo(".cloud3", 22, { x: 1200 }, { x: -500, repeat: -1, repeatDelay: 10, ease: Linear.easeNone }, "begin"); return tl;
}
var repeat = new TimelineMax();
repeat.add(revolve());
var controlsMQ = document.getElementById("touch-controls"), openerMQ = document.getElementById("opener-text"), rotateMQ = document.getElementById("rotate-mobile"), dialogMQ = document.querySelectorAll("div.opener, div.winning, div.hangry"), elephantMQ = document.querySelectorAll("div.elephantContainer")[0], endsvgMQ = document.querySelectorAll("div.award, div.hangry-svg");
// media query event handler
if (matchMedia) { var mq = window.matchMedia("(min-width: 800px)"); mq.addListener(WidthChange); WidthChange(mq);
}
// media query change
function WidthChange(mq) { if (mq.matches) { // window width is at least 800px controlsMQ.style.width = "30vw"; controlsMQ.style.top = "40vh"; controlsMQ.style.right = "-3vw"; openerMQ.style.minHeight = "155px"; elephantMQ.style.width = "30vw"; for (var i = 0; i < dialogMQ.length; i++) { dialogMQ[i].style.fontSize = "1.1em"; dialogMQ[i].style.lineHeight = "2em"; } for (var i = 0; i < endsvgMQ.length; i++) { endsvgMQ[i].style.display = "block"; } } else { // window width is less than 800px controlsMQ.style.width = "80vw"; controlsMQ.style.top = "30vh"; controlsMQ.style.right = "-15vw"; openerMQ.style.minHeight = "0"; elephantMQ.style.width = "45vw"; for (var i = 0; i < dialogMQ.length; i++) { dialogMQ[i].style.fontSize = "0.8em"; dialogMQ[i].style.lineHeight = "1.4em"; } for (var i = 0; i < endsvgMQ.length; i++) { endsvgMQ[i].style.display = "none"; } }
}
React Game- Elephant Taco Hunt - Script Codes
React Game- Elephant Taco Hunt - Script Codes
Home Page Home
Developer Sarah Drasner
Username sdras
Uploaded June 12, 2022
Rating 4.5
Size 23,726 Kb
Views 56,672
Do you need developer help for React Game- Elephant Taco Hunt?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Sarah Drasner (sdras) Script Codes
Name
Chart made with Vue, Transitioning State
Working with Chartist and Animations
Trying out React Motion
Animated Flow Chart to demo animating viewBox
Animated viewBox Data Visualization
Form with Animation That Assists in UX
Google Material Design
Polyscape
Make a Party
Responsive SVG Sprite Animation that Adjusts Based on Viewport
Create amazing SEO content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!