var Hangmanizr = React.createClass({ getInitialState: function () { return { alphabet: ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z", "@", "-"], words: '', randomWord: '', letters: [], clickedLetters: [], matchedLetters: [], lives: 6, initialLives: 6, clickedButton: null, gameStarted: false, nextWord: false, chosenLevel: 'medium', score: 0, gameOver: false } }, animalsGame: function (e) { var animals = ["aardvark", "albatross", "alligator", "alpaca", "ant", "anteater", "antelope", "ape", "armadillo", "donkey", "baboon", "badger", "barracuda", "bat", "bear", "beaver", "bee", "bison", "boar", "buffalo", "butterfly", "camel", "capybara", "caribou", "cassowary", "cat", "caterpillar", "cattle", "chamois", "cheetah", "chicken", "chimpanzee", "chinchilla", "chough", "clam", "cobra", "cockroach", "cod", "cormorant", "coyote", "crab", "crane", "crocodile", "crow", "curlew", "deer", "dinosaur", "dog", "dogfish", "dolphin", "donkey", "dotterel", "dove", "dragonfly", "duck", "dugong", "dunlin", "eagle", "echidna", "eel", "eland", "elephant", "elephant-seal", "elk", "emu", "falcon", "ferret", "finch", "fish", "flamingo", "fly", "fox", "frog", "gaur", "gazelle", "gerbil", "giant-panda", "giraffe", "gnat", "gnu", "goat", "goose", "goldfinch", "goldfish", "gorilla", "goshawk", "grasshopper", "grouse", "guanaco", "guinea-fowl", "guinea-pig", "gull", "hamster", "hare", "hawk", "hedgehog", "heron", "herring", "hippopotamus", "hornet", "horse", "human", "hummingbird", "hyena", "ibex", "ibis", "jackal", "jaguar", "jay", "jellyfish", "kangaroo", "kingfisher", "koala", "komodo-dragon", "kookabura", "kouprey", "kudu", "lapwing", "lark", "lemur", "leopard", "lion", "llama", "lobster", "locust", "loris", "louse", "lyrebird", "magpie", "mallard", "manatee", "mandrill", "mantis", "marten", "meerkat", "mink", "mole", "mongoose", "monkey", "moose", "mouse", "mosquito", "mule", "narwhal", "newt", "nightingale", "octopus", "okapi", "opossum", "oryx", "ostrich", "otter", "owl", "ox", "oyster", "panther", "parrot", "partridge", "peafowl", "pelican", "penguin", "pheasant", "pig", "pigeon", "polar-bear", "pony", "porcupine", "porpoise", "prairie-dog", "quail", "quelea", "quetzal", "rabbit", "raccoon", "rail", "ram", "rat", "raven", "red-deer", "red-panda", "reindeer", "rhinoceros", "rook", "salamander", "salmon", "sand-dollar", "sandpiper", "sardine", "scorpion", "sea-lion", "sea-urchin", "seahorse", "seal", "shark", "sheep", "shrew", "skunk", "snail", "snake", "sparrow", "spider", "spoonbill", "squid", "squirrel", "starling", "stingray", "stinkbug", "stork", "swallow", "swan", "tapir", "tarsier", "termite", "tiger", "toad", "trout", "turkey", "turtle", "vicuña", "viper", "vulture", "wallaby", "walrus", "wasp", "water-buffalo", "weasel", "whale", "wolf", "wolverine", "wombat", "woodcock", "woodpecker", "worm", "wren", "yak", "zebra"]; this.setState({ words: animals, letters: [], clickedLetters: [], matchedLetters: [], lives: this.state.initialLives, clickedButton: e.target.value, gameStarted: true, score: 0 }) setTimeout(function () { this.getRandom(); }.bind(this), 100); }, cssPropertiesGame: function (e) { var cssProperties = ["align-content", "align-items", "align-self", "all", "animation", "animation-delay", "animation-direction", "animation-duration", "animation-fill-mode", "animation-iteration-count", "animation-name", "animation-play-state", "animation-timing-function", "backface-visibility", "background", "background-attachment", "background-blend-mode", "background-clip", "background-color", "background-image", "background-origin", "background-position", "background-repeat", "background-size", "border", "border-bottom", "border-bottom-color", "border-bottom-left-radius", "border-bottom-right-radius", "border-bottom-style", "border-bottom-width", "border-collapse", "border-color", "border-image", "border-image-outset", "border-image-repeat", "border-image-slice", "border-image-source", "border-image-width", "border-left", "border-left-color", "border-left-style", "border-left-width", "border-radius", "border-right", "border-right-color", "border-right-style", "border-right-width", "border-spacing", "border-style", "border-top", "border-top-color", "border-top-left-radius", "border-top-right-radius", "border-top-style", "border-top-width", "border-width", "bottom", "box-shadow", "box-sizing", "caption-side", "clear", "clip", "color", "column-count", "column-fill", "column-gap", "column-rule", "column-rule-color", "column-rule-style", "column-rule-width", "column-span", "column-width", "columns", "content", "counter-increment", "counter-reset", "cursor", "direction", "display", "empty-cells", "filter", "flex", "flex-basis", "flex-direction", "flex-flow", "flex-grow", "flex-shrink", "flex-wrap", "float", "font", "@font-face", "font-family", "font-size", "font-size-adjust", "font-stretch", "font-style", "font-variant", "font-weight", "hanging-punctuation", "height", "justify-content", "@keyframes", "left", "letter-spacing", "line-height", "list-style", "list-style-image", "list-style-position", "list-style-type", "margin", "margin-bottom", "margin-left", "margin-right", "margin-top", "max-height", "max-width", "@media", "min-height", "min-width", "nav-down", "nav-index", "nav-left", "nav-right", "nav-up", "opacity", "order", "outline", "outline-color", "outline-offset", "outline-style", "outline-width", "overflow", "overflow-x", "overflow-y", "padding", "padding-bottom", "padding-left", "padding-right", "padding-top", "page-break-after", "page-break-before", "page-break-inside", "perspective", "perspective-origin", "position", "quotes", "resize", "right", "tab-size", "table-layout", "text-align", "text-align-last", "text-decoration", "text-decoration-color", "text-decoration-line", "text-decoration-style", "text-indent", "text-justify", "text-overflow", "text-shadow", "text-transform", "top", "transform", "transform-origin", "transform-style", "transition", "transition-delay", "transition-duration", "transition-property", "transition-timing-function", "unicode-bidi", "vertical-align", "visibility", "white-space", "width", "word-break", "word-spacing", "word-wrap", "z-index"]; this.setState({ words: cssProperties, letters: [], clickedLetters: [], matchedLetters: [], lives: this.state.initialLives, clickedButton: e.target.value, gameStarted: true, score: 0 }) setTimeout(function () { this.getRandom(); }.bind(this), 100); }, htmlElementsGame: function (e) { var htmlElements = ["base", "head", "link", "metal", "style", "title", "address", "article", "aside", "footer", "header", "hgroup", "nav", "section", "dd", "div", "dl", "dt", "figcaption", "figure", "hr", "li", "main", "ol", "p", "pre", "ul", "a", "abbr", "b", "bdi", "bdo", "br", "cite", "code", "data", "dfn", "em", "i", "kbd", "mark", "q", "rp", "rt", "rtc", "ruby", "s", "samp", "small", "span", "strong", "sub", "sup", "time", "u", "var", "wbr", "area", "audio", "img", "map", "track", "video", "embed", "object", "param", "source", "canvas", "noscript", "script", "del", "ins", "caption", "col", "colgroup", "table", "tbody", "td", "tfoot", "th", "thead", "tr", "button", "datalist", "fieldset", "form", "input", "label", "legend", "meter", "optgroup", "option", "output", "progress", "select", "textarea", "details", "dialog", "menu", "menuitem", "summary", "content", "element", "shadow", "template", "acronym", "applet", "basefont", "big", "blink", "center", "command", "content", "dir", "font", "frame", "frameset", "isindex", "keygen", "listing", "marquee", "multicol", "nextid", "noembed", "plaintext", "spacer", "strike", "tt", "xmp"]; this.setState({ words: htmlElements, letters: [], clickedLetters: [], matchedLetters: [], lives: this.state.initialLives, clickedButton: e.target.value, gameStarted: true, score: 0 }) setTimeout(function () { this.getRandom(); }.bind(this), 100); }, phrasalVerbsGame: function (e) { var phrasalVerbs = ["add-up", "blow-up", "bring-up", "call-off", "carry-on", "get-along", "look-up", "pull-over", "turn-up", "watch-out"]; this.setState({ words: phrasalVerbs, letters: [], clickedLetters: [], matchedLetters: [], lives: this.state.initialLives, clickedButton: e.target.value, gameStarted: true, score: 0 }) setTimeout(function () { this.getRandom(); }.bind(this), 100); }, getRandom: function () { var randomNum = Math.floor((Math.random() * this.state.words.length)) var random = this.state.words[randomNum]; this.state.words.splice(randomNum, 1); this.setState({ randomWord: random, }); {/* click start and trigger splitLetters() */ } setTimeout(function () { this.splitLetters(); }.bind(this), 100); {/* click start and trigger splitLetters() */ } }, splitLetters: function () { var s = this.state.randomWord.toUpperCase(); for (var i = 0; i < s.length; i++) { this.state.letters.push(s.charAt(i)); } this.setState({ letters: this.state.letters }); }, checkLetter: function (e) { var val = e.currentTarget.textContent; this.state.clickedLetters.push(val); this.setState({ clickedLetters: this.state.clickedLetters, lives: this.state.lives - 1 }); var _this = this; this.state.letters.forEach(function (letter) { if (letter === val) { _this.state.matchedLetters.push(letter) _this.setState({ matchedLetters: _this.state.matchedLetters, lives: _this.state.lives }); if (_this.state.lives < 1) { if (_this.state.letters.length !== _this.state.matchedLetters.length) { this.setState({ nextWord: false }); } } } }); if (this.state.lives < 1) { // if lives... this.setState({ nextWord: true, lives: '' }); setTimeout(function () { this.state.matchedLetters.splice(0, this.state.matchedLetters.length); this.state.matchedLetters.splice.apply(this.state.matchedLetters, [0, this.state.letters.length].concat(this.state.letters)) this.setState({ matchedLetters: this.state.matchedLetters }); {/* second setTimeout */ } setTimeout(function () { this.setState({ clickedLetters: [], matchedLetters: [], lives: this.state.initialLives, nextWord: false }); this.state.letters.splice(0, this.state.letters.length); {/* get new random word */ } var randomNum = Math.floor((Math.random() * this.state.words.length)) var random = this.state.words[randomNum]; this.state.words.splice(randomNum, 1); this.setState({ randomWord: random, }); {/* get new random word*/ } {/* push new random word's letters to letters array */ } var s = random.toUpperCase(); for (var i = 0; i < s.length; i++) { this.state.letters.splice() this.state.letters.push(s.charAt(i)); } this.setState({ letters: this.state.letters }); {/* push new random word's letters to letters array */ } }.bind(this), 2000); {/* second setTimeout */ } }.bind(this), 750); {/* check game setTimeout */ } setTimeout(function () { {/* check if game is over */ } if (this.state.words.length === 0) { //alert("Game is over! "); this.setState({ gameOver: true }) //this.setState(this.getInitialState()); } {/* check if game is over*/ } }.bind(this), 2500); {/* check game setTimeout */ } }// if lives... {/* if the word is found, continue the game */ } if (this.state.letters.length == this.state.matchedLetters.length) { //alert("You found the word!"); this.setState({ nextWord: true, lives: '' }); setTimeout(function () { this.setState({ clickedLetters: [], lives: this.state.initialLives, nextWord: false, score: this.state.score + 1 }); {/* check if game is over */ } if (this.state.words.length === 0) { this.setState({ gameOver: true }) //this.setState(this.getInitialState()); } {/* check if game is over*/ } {/* reset lives and clear the matchedLetters array */ } this.setState({ matchedLetters: [], lives: this.state.initialLives }); {/* reset lives and clear the matchedLetters array */ } this.state.letters.splice(0, this.state.letters.length); {/* get new random word */ } var randomNum = Math.floor((Math.random() * this.state.words.length)) var random = this.state.words[randomNum]; this.state.words.splice(randomNum, 1); this.setState({ randomWord: random, }); {/* get new random word */ } {/* push the new random words letters to letters array */ } var s = random.toUpperCase(); for (var i = 0; i < s.length; i++) { this.state.letters.splice() this.state.letters.push(s.charAt(i)); } this.setState({ letters: this.state.letters }); {/* push the new random words letters to letters array */ } }.bind(this), 2000); } {/* if the word is found, continue the game */ } }, easyLevel: function (e) { this.setState({ initialLives: 10, chosenLevel: e.target.value }) }, mediumLevel: function (e) { this.setState({ initialLives: 6, chosenLevel: e.target.value }) }, hardLevel: function (e) { this.setState({ initialLives: 2, chosenLevel: e.target.value }) }, closeModal: function () { this.setState(this.getInitialState()); }, render: function () { return (
HANGMANIZR

Quick Hangman Game

Github Fork Twitter Tweet

Choose your level and start playing by clicking the topics below.

You have {this.state.initialLives} lives.

Have fun!

{/* letters-wrapper */}
    {this.state.letters.map(function (item) { return ( //
  • {item}
  • {item}
    • ) }, this) }
{/* letters-wrapper */}
{/* alphabet-wrapper */}
    {this.state.alphabet.map(function (item) { return (
  • {item}
    • ) }, this) }
{/* alphabet-wrapper */}
{/* lives-words-left-wrapper */}

Your lives: {this.state.lives}

Words left: {this.state.words.length}

Score: {this.state.score}

{/* lives-words-left-wrapper */}

X

GAME OVER!

Your score is {this.state.score}.

); } }); ReactDOM.render( , document.getElementById("app") );