2016年6月27日月曜日

開発環境

Javascript for Kids (Nick Morgan 著、Angus Croll 寄稿、Miran Lipovaca イラスト、No Starch Press)のPart 3(Canvas)、Chapter 13(The Canvas Element)、PROGRAMMING CHALLENGES、#4:DRAWING THE MAN IN HANGMAN(No. 3720)を取り組んでみる。

PROGRAMMING CHALLENGES、#4:DRAWING THE MAN IN HANGMAN(No. 3720)

コード(Emacs)

<!doctype html>
<html>
  <head>
    <title></title>
  </head>
  <body>
    <canvas id="canvas0" width="650" height="250"
            style="border:solid brown; border-radius:10px">
    </canvas>
    <br>
    <button id="hangman_game">
      start
    </button>    
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>    
    <script src="hangman.js"></script>
  </body>
</html>
/*jslint         node    : true, continue : true,
  devel  : true, indent  : 2,    maxerr   : 50,
  newcap : true, nomen   : true, plusplus : true,
  regexp : true, sloppy  : true, vars     : false,
  white  : true
*/
/*global document, $ */
$('#hangman_game').click(function () {
    var canvas = document.querySelector('#canvas0'),
        ctx = canvas.getContext('2d'),
        head = 20,
        width = 4,
        x,
        y,
        tall = head * 5 + width,
        draw_hangman,
        words = ['javascript',
                 'monkey',
                 'amazing',
                 'pancake',
                 'scheme',
                 'c'
                ],
        words_len = words.length,
        word = words[Math.floor(Math.random() * words_len)],
        word_len = word.length,
        answer_array = [],
        i,
        remaining_letters = word_len,
        guess,
        count = 20,
        incorrect_count = 0,
        flags = [],
        flag = true;

    draw_hangman = function(incorrect_count) {
        if (flags[incorrect_count] === undefined) {
            switch (incorrect_count) {
            case 0:
                ctx.strokeStyle = 'rgb(' + Math.floor(Math.random() * 256) +
                    ',' + Math.floor(Math.random() * 256) + ',' +
                    Math.floor(Math.random() * 256) + ')';
                ctx.lineWidth = width;
                ctx.beginPath();
                x = canvas.width / 2 - head / 2;
                y = (canvas.height - tall) / 2;
                ctx.moveTo(x, y);
                ctx.lineTo(x + head, y);
                ctx.stroke();
                break;
            case 1:                
                ctx.lineTo(x + head, y + head);
                ctx.stroke();
                break;
            case 2:
                ctx.lineTo(x, y + head);
                ctx.stroke();
                break;
            case 3:
                ctx.lineTo(x, y);
                ctx.stroke();
                break;
            case 4:
                x = canvas.width / 2;
                y += head;
                ctx.moveTo(x, y);
                ctx.lineTo(x, y + head * 2);
                ctx.stroke();
                break;
            case 5:
                x = canvas.width / 2;
                y += head;
                ctx.moveTo(x, y);
                ctx.lineTo(x - head, y - head / 2);
                ctx.stroke();
                break;
            case 6:
                ctx.moveTo(x, y);
                ctx.lineTo(x + head, y - head / 2);
                ctx.stroke();
                break;
            case 7:
                y += head;
                ctx.moveTo(x, y);
                ctx.lineTo(x - head, y + head * 2);
                ctx.stroke();
                break;
            case 8:
                ctx.moveTo(x, y);
                ctx.lineTo(x + head, y + head * 2);
                ctx.stroke();
                break;
            }            
        }
        flags[incorrect_count] = 1;
    };
    for (i = 0; i < word_len; i += 1) {
        answer_array[i] = '*';
    }
    
    while (remaining_letters > 0 && count > 0) {
        alert(answer_array.join(' '));
        guess = prompt('Guess a letter, or click Cancel to stop playing.');
        if (guess === null || guess === '') {
            break;
        }
        if (guess.toLowerCase() !== guess) {
            alert('Please enter a lower letter.');
            guess = guess.toLowerCase();
        }
        if (guess.length !== 1) {
            alert('Please enter a single letter.');
        } else {
            for (i = 0; i < word_len; i += 1) {
                if (word[i] === guess) {
                    flag = false;
                    if (answer_array[i] === '*') {
                        answer_array[i] = guess;
                        remaining_letters -= 1;
                    } else {
                        alert('guessed already.');
                        break;
                    }
                }
            }
            if (flag) {
                draw_hangman(incorrect_count);
                incorrect_count += 1;
            } else {
                flag = true;
            }
        }
        count -= 1;
    }
    alert(answer_array.join(' '));
    alert('Good job! the answer was ' + word);
});

0 コメント:

コメントを投稿

Comments on Google+: