開発環境
- 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 2(Advanced JavaScript)、Chapter 11(Find the Buried Treasure!)、PROGRAMMING CHALLENGES、(No. 3155)を取り組んでみる。
PROGRAMMING CHALLENGES(No. 3155)
コード(Emacs)
<!doctype html>
<html>
<head>
<title>Find the buried treasure! </title>
</head>
<body>
<h1 id="heading0">Find the buried treasure!</h1>
<img id="map0" width="650" height="650"
src="http://nostarch.com/images/treasuremap.png">
<p id="distance0"></p>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.min.js"></script>
<script src="treasure.js"></script>
</body>
</html>
/*jslint browser : true, continue : true,
devel : true, indent : 4, maxerr : 50,
newcap : true, nomen : false, plusplus : false,
regexp : false, sloppy : true, vars : false,
white : false
*/
/*global $*/
var getRandomNumber,
getDistance,
getDistanceHint,
target,
width = 650,
height = 650,
clicks = 0,
click_limit = 100,
$map = $('#map0'),
$distance = $('#distance0');
getRandomNumber = function (size) {
return Math.floor(Math.random() * size);
};
getDistance = function (event, target) {
var diffX = event.offsetX - target.x,
diffY = event.offsetY - target.y;
return Math.sqrt((diffX * diffX) + (diffY * diffY));
};
getDistanceHint = function (distance) {
if (distance < 5) {
return 'Boiling hot!';
}
if (distance < 10) {
return 'Really really hot';
}
if (distance < 20) {
return 'Really hot';
}
if (distance < 40) {
return 'Hot';
}
if (distance < 80) {
return 'Warm';
}
if (distance < 160) {
return 'Cold';
}
if (distance < 320) {
return 'Really cold';
}
if (distance < 640) {
return 'Really really cold';
}
return 'Freezing';
};
target = {
x: getRandomNumber(width),
y: getRandomNumber(height)
};
$map.click(function (event) {
var distance = getDistance(event, target),
distanceHint = getDistanceHint(distance);
clicks += 1;
$distance.text(distanceHint + ' (Remaining clicks: ' +
(click_limit - clicks) + ')');
if (distance < 8) {
alert('Found the treasure in ' + clicks + ' clicks!');
clicks = 0;
target = {
x: getRandomNumber(width),
y: getRandomNumber(height)
};
}
if (clicks === click_limit) {
alert('Game over. target: ' + target.x + ' x' + target.y);
clicks = 0;
target = {
x: getRandomNumber(width),
y: getRandomNumber(height)
};
}
});
0 コメント:
コメントを投稿