2016年5月15日日曜日

開発環境

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)
        };
    }
});

Find the buried treasure!

0 コメント:

コメントを投稿