開発環境
- OS X El Capitan - Apple (OS)
- Emacs (Text Editor)
- JavaScript (プログラミング言語)
- jQuery (Library)
- Safari(Web browser)
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 コメント:
コメントを投稿