Javascript Quest / Javascript квест: index.html

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Javascript Quest</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<style type="text/css">

body {
margin-top: 10px;
background-image: url('http://www.storybookkidsonmapleridge.com/book_background.jpg');
background-repeat: no-repeat;
}

Zaryad 29.06.14 в 20:23

h1 {
margin-top: 30px;
text-align: center;
width: 250px;
margin-left: 50px;

font-size: 20px;

font-family: "Georgia", serif;
}

Zaryad 29.06.14 в 20:23

img {
position: absolute;
top: 50px;
width: 240px;
left: 380px;

}

Zaryad 29.06.14 в 20:23

p.text {
width: 240px;
margin-left: 50px;
font-family: 'Helvetica', sans-serif;
margin-top: 30px;
line-height: 20px;
}

Zaryad 29.06.14 в 20:23

div.buttons {
text-align: center;
width: 250px;
margin-left: 50px;
margin-top: 60px;
}

Zaryad 29.06.14 в 20:23

div.buttons span {
font-family: 'Georgia', serif;
font-size: 12px;
line-height: 40px;
background-color: lightyellow;
border: 1px outset grey;
padding: 6px;
color: blue;
border-radius: 10px;
margin-right: 10px;
cursor: pointer;
white-space: nowrap;

-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}

Zaryad 29.06.14 в 20:24

div.buttons span:hover {
background-color: white;
}

Zaryad 29.06.14 в 20:24

div.buttons span:active {
border: 1px inset grey;
}

Zaryad 29.06.14 в 20:24

</style>

Zaryad 29.06.14 в 20:24

<script type="text/javascript">

$(document).ready(function(){

Zaryad 29.06.14 в 20:24

/* Hi! This is where you get to program the magic island adventure!

Zaryad 29.06.14 в 20:24

Stuff in between the slash-stars are called "comments" ... that means
the computer ignores them! So we can write any thing we want!!
HAHAHAHAHA...
*/

Zaryad 29.06.14 в 20:25

/* These are variable declarations. A variable is a box that stores information about
what's going on in the game! For instance, how tall the player is, whether or not they have
a key, whether or not a door is open, etc. Here we use "var" to tell the browser to create
a new variable, and we set it to the initial value */

Zaryad 29.06.14 в 20:25

/* This is how tall the player is! We start them at 4 ft tall, and then
they grow and shrink when they eat cookies. */
var person_height = 4;

Zaryad 29.06.14 в 20:25

/* We need to set has_wings to true once the player finds some wings!
That way, when they jump off the cliff, they can fly...
*/
var has_wings = false;

Zaryad 29.06.14 в 20:25

/* This is the number of trees in the endless forest */
var tree_count = 0;

Zaryad 29.06.14 в 20:26

/*this is the first thing that happens when a player starts the game... */
function the_beginning(){
change_image("http://top.freewallpaper-s.net/rwx/Magic_Island.jpg");
change_title('Глава 1: Мистический остров');
change_text("(это очень загадочно)");
change_buttons({
"Продолжить...": introduction /* this "introduction" references the function introduction we create below... */
});
}

Zaryad 29.06.14 в 20:27

/* this is the "introduction" we referenced above! When the player clicks "Continue....", this code runs! */
function introduction(){
change_title('');
change_text("Ты в центре мистического острова. Ты совершенно не помнишь, как очутился тут... это смутное воспоминание о твоём друге Фреде, ударяющем тебя на фоне гигантской плюшевой куклы Могучего рейнджера... Твоя мама всегда говорила тебе не играть с Могучими рейнджерами. Как бы то ни было, что ты собираешься делать?");
change_buttons({"Пробираться вперёд": island_center});
}

Zaryad 29.06.14 в 20:30

function island_center() {
change_image('http://www.nativenewsnetwork.com/image-files/run-to-the-east-film.gif');
change_title('');
change_text('Ты в середине острова. На западе виднеются скалы. На востоке пустая площадь, в центре которого стоит столик. На севере от тебя горная стена с пещерой внутри. На юге лес. Ты очень рад, что у тебя оказался компас с собой. Куда ты пойдешь?');
change_buttons({"На запад": cliffs, "На восток": plaza, "На север": hole, "На юг": forest});
}

Zaryad 02.07.14 в 18:08

function cliffs() {
change_image('http://www.theproducersperspective.com/wp-content/uploads/2013/01/cliff-lr-4.jpg');
change_text('Ты осматриваешь скалы. Чайки лениво летают вокруг. Волны спокойно плещутся взад и вперед. Ты можешь вдохнуть запах соли. Что ты хочешь сделать?');
change_buttons({'Я верю, что умею летать!': fly, "Осторожно спуститься вниз по скалам": not_done, "Вернуться": island_center});
}

Zaryad 02.07.14 в 18:27

function fly() {
if (has_wings) { /* if the player has wings... */

change_text('Ты летишь! УХУУУУУ!!!!! Ты выбрался с острова и направляешься домой! Ты прошёл игру!');

change_buttons({'Начать снова': the_beginning});

} else { /* sadly, they don't have wings... */

change_image('https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSVep9hWIHQ8N7iYIrL84JU8VHcsAlDz0BYG8q8bZNsf-v3iU8VAA');
change_text("Ты поверил, что можешь летать... но это не так.");
change_buttons({'Начать снова': the_beginning});
}
}

Zaryad 02.07.14 в 18:38

function not_done() {
change_image('http://blog.sysomos.com/wp-content/uploads/2010/05/question-mark.jpg');
change_text("...и.... ...и.... Я не знаю, что произошло дальше! Это еще не написанно! Эта игра еще не закончена! О нет! Тебе решать что будет дальше... открой javascript код, и напиши то, что по-твоему должно произойти дальше!");
change_buttons({'Начать снова': the_beginning});
}

Zaryad 02.07.14 в 18:38

function plaza() {
change_image('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTVBtqK0rPGxJZTpXtFB3_Oy_PRKXEfsfawN6nWjG6ZKwE3ScbVAg');
change_text('Ты пошёл на площадь... вот стол с красно-синим шоколадным печеньем. Ты никогда не ел обе половинки шоколадного печенья. Какую половинку ты собираешься съесть?');
show_cookie_buttons();
}

function show_cookie_buttons() {
change_buttons({'Съесть красную половинку': shrink, 'Съесть синюю половинку': grow, "Вернуться": island_center});
}

Zaryad 02.07.14 в 18:38

function shrink() {
/* This means, take the person's current height, subtract 1, and store it back in the person's height: */
person_height -= 1;

change_text('Ты съел красную половинку, и твой рост немного уменьшился!! Теперь ты на ' + person_height + ' фута(ов) ниже.');

if (person_height == 0) {
change_image('http://www.meaningfulmama.com/wp-content/uploads/2012/05/super-mario-bros-game-over.png');
change_text("Упс, теперь ты ростом в ноль футов... тебя больше не существует. лолчто. игра окончена, придурок.");

/* We reset the height back to 4 so if they start over and get
back here, they are the right height again */
person_height = 4;
change_buttons({'Начать снова': the_beginning});
}
else {
show_cookie_buttons();
}
}

Zaryad 02.07.14 в 18:38

function grow() {
/* This means, take the person's current height, add 1, and store it back in the person's height: */
person_height += 1;

change_text('Ты съел синюю половинку, и твой рост немного увеличился!! Теперь ты на ' + person_height + ' футов(а) выше.');
show_cookie_buttons();
}

Zaryad 02.07.14 в 18:38

function hole() {
change_image('https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQ73MNjK24zhAdmt8rMGZbqywoG42uY-Zf_wbqGhEvp9SRezXZM');
change_text('Вот маленькая пещера в горе....');
change_buttons({'Войти в пещеру': enter, "Вернуться": island_center});
}

Zaryad 02.07.14 в 18:39

function enter() {
if (person_height < 3) {
change_text('Со своим съёжившимся ростом ты протиснулся внутрь...');
change_buttons({"Продолжить...": not_done});
} else {
change_text('АЙ!!! Ты ударился своей головой об потолок. Ты слишком большой, чтобы попасть внутрь! Вообще то твой рост ' + person_height + ' фута(ов). Хотел бы я знать, есть ли способ стать меньше....');
}
}

Zaryad 02.07.14 в 18:39

function forest() {
change_image('https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQJKMfuNGOzBd15jqulaWyfT80fhryPYH1Uux-n5ph1VA2eLiiFkQ');
change_text('Ты у входа в лес. В стороне от тебя висит знак, говорящий "Бесконечный лес".')

/* If the player is short, they got lost in the endless forest. If the player is tall, they can walk over it */
if (person_height < 10) { /* too short... */
change_buttons({"Вернуться": island_center, "Идти вперёд": endless});
} else {
change_buttons({"Вернуться": island_center, "Идти вперёд": shrubs});
}
}

Zaryad 02.07.14 в 18:39

function endless() {
tree_count += 2;
text = 'Ты в лесу. Тут много дереьев. Много ';
for (var i = 0; i < tree_count; i++) {
text += 'и много ';
}
text += "деревьев. Ты действительно не любишь деревья, ни разу со времен случая на шалаше. Ты предпочитаешь короткие кустарники. Ты немного нервно вспоминаешь, что это называется 'Бесконечный лес'."
change_text(text);
change_buttons({"Вернуться": forest, "Идти вперёд": endless});
}

Zaryad 02.07.14 в 18:39

function shrubs() {
change_image('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTjwMoWBhFB54M_5jm4QRk-0JME08NV6xm4xPeoSy6MNo2VnJJ0bQ');
change_text("Ты пробираешься через лес, но если честно, это не так впечатляет... просто скопление маленьких кустов!" +
" Или может это просто ты очень высокий.... хммм. Вдалеке, ты видишь замок...");
change_buttons({"Идти в сторону замка": not_done, "Вернуться": forest});
}

Zaryad 02.07.14 в 18:39

/* Here are the functions that change the title, the text, the buttons, and the image */

Zaryad 02.07.14 в 18:39

function change_title(new_title) {
$('h1 span').remove();
var new_txt = $('<span>' + new_title + '</span>');
$('h1').append(new_txt);
new_txt.hide();
new_txt.fadeIn(200);
}

Zaryad 02.07.14 в 18:39

function change_text(new_text) {
$('p.text span').remove();
var new_txt = $('<span>' + new_text + '</span>');
$('p.text').append(new_txt);
new_txt.hide();
new_txt.fadeIn(200);
}

Zaryad 02.07.14 в 18:39

function change_image(new_image_url) {
$('img').attr('src', new_image_url);
}

Zaryad 02.07.14 в 18:39

function change_buttons(buttons) {
button_div = $('div.buttons')
button_div.empty();
for (btn_name in buttons) {
var new_button = $('<span></span>');
new_button.text(btn_name);
new_button.click(buttons[btn_name]);
button_div.append(new_button);
button_div.append(' '); /* so that the buttons wrap if they are too long */
}
}

Zaryad 02.07.14 в 18:39

/* Once we have defined all our functions, we call the_beginning to
start things off! */
the_beginning();

Zaryad 02.07.14 в 18:39

});

Zaryad 02.07.14 в 18:40

</script>
</head>
<body>
<h1>
<span style="display: inline;">О нет!!! Это баг!</span>
</h1>
<img src="http://top.freewallpaper-s.net/rwx/Magic_Island.jpg">
<p class="text">
<span style="display: inline;">Если вы видите этот текст, это значит что есть какая-то проблема в javascript коде!
Чтобы исправить проблему, посмотрите в javascript консоль, чтобы узнать что за ошибка произошла!</span>
</p>
<div class="buttons">
<span>Продолжить...</span>
</div>
</body>
</html>

Zaryad 02.07.14 в 18:40