EaselHangman

by mifeng

HTML

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<div id="wrapper">
    <canvas id="testCanvas" width="400" height="350"></canvas>
    <div id="buttondiv"></div>
</div>

CSS

#wrapper {
    width: 450px;
}

JavaScript

var canvas = document.getElementById("testCanvas");
var stage = new createjs.Stage(canvas);

var alphabetArray = ["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"];
var wordList = ["apple", "orange", "dog", "rabbit", "nettuts", "envato", "jquery", "php", "laravel"];
var theWord = "";
var guessWord = [];
var newGuessWord = "";
var numWrong = 0;
var gameOver = false;
var guessedLetters = [];
var hangmanShape = new createjs.Shape();
var theWordText = new createjs.Text("", "bold 35px Arial", "#000000");
var theOutComeText = new createjs.Text("", "bold 50px Arial", "#FF0000");
theOutComeText.x = 90;
theOutComeText.y = 200;
theWordText.x = 50;
theWordText.y = 27;
stage.addChild(theWordText, theOutComeText);
stage.addChild(hangmanShape);
createjs.Ticker.addEventListener("tick", handleTick);
function handleTick(event) {
  stage.update()
}


function startGame() {
    hangmanShape.graphics.clear();
    createGuessWord();
    drawCanvas();
    theOutComeText.text = "";
    enableButtons();
    addKeyListener();
    
}

function createGuessWord() {
    guessWord = new Array();
    var randomWord = Math.floor(Math.random() * wordList.length);
    theWord = wordList[randomWord];
    for (var i = 0; i < theWord.length; i++) {
        guessWord[i] = "?";
    }
    newGuessWord = guessWord.join("");
}

function drawGallows() {
    hangmanShape.graphics.moveTo(120, 305);
    hangmanShape.graphics.lineTo(280, 305);
    hangmanShape.graphics.moveTo(260, 305);
    hangmanShape.graphics.lineTo(260, 70);
    hangmanShape.graphics.lineTo(180, 70);
    hangmanShape.graphics.lineTo(180, 96);


}

function drawHead() {
    hangmanShape.graphics.arc(180, 120, 23, 0, Math.PI * 2, false);
    hangmanShape.graphics.closePath();

}

function drawBody() {
    hangmanShape.graphics.moveTo(180, 143);
    hangmanShape.graphics.lineTo(180, 248);

}

function drawArm1() {
    hangmanShape.graphics.moveTo(180, 175);
   ...