Строка
Комментарий к строке
|
|
<html>
|
Открывающий тег <html> – этим тегом начается любая Html-страница
|
|
<head>
|
Заголовок Html-страницы
|
|
<title>Камень-ножницы-бумага</title>
|
Заглавие окна браузера – надпись "Камень-ножницы-бумага" появляется слева сверху окна обозревателя (на синем фоне)
|
|
</head>
|
Окончание заголовка Html-страницы
|
|
<body>
|
Начивается <body> – видимая часть Html-страницы
|
|
<table width=100%>
|
Прозрачная таблица во всю ширину экрана
|
|
<tr>
|
Новая строка таблицы
|
|
<td width=100%>
|
Новая ячейка таблицы шириной в 100%
|
|
<center>
|
Центрирование (последующие элементы располагаются по центру экрана
|
|
<h2><a id=mys>0</a>:<a id=kos>0</a></h2>
|
Внутри заголовка H2 располагаются два функциональных текста, разделённых двоеточием, которым присвоены id=mys и id=kos, что нужно для возможности изменять содержимое этих функциональных текстов (для сообщения счёта игрока и счёта компьютера)
|
|
<tr>
|
Новая строка таблицы
|
|
<td width=100%>
|
Новая ячейка таблицы шириной в 100%
|
|
<center>
|
Центрирование
|
|
<h2><a id=sost>Это игра 'Камень-ножницы-бумага'. Ваш соперник – компьютер. Выбирайте, кликнув по картинке. Игра идёт до тех пор, пока кто-нибудь не накопит 20 очков</a></h2>
|
Внутри заголовка H2 располагается функциональный текст (id=sost), в котором вначале игры написаны правила, а потом – выиграл или проиграл человек после того или иного хода
|
|
<tr>
|
Новая строка таблицы
|
|
<td width=50%>
|
Новая ячейка таблицы шириной в 50%
|
|
<center>
|
Центрирование
|
|
<img src=pus.GIF name="myw" height=200>
|
Рисунок, изображение на котором – файл pus.GIF, ему присвоено имя name="myw", чтобы можно было изменять его изображение
|
|
<td width=50%>
|
Новая ячейка таблицы шириной в 50%
|
|
<center>
|
Центрирование
|
|
<img src=pus.GIF name="kow" height=200>
|
Рисунок, изображение на котором – файл pus.GIF, ему присвоено имя name="kow", чтобы можно было изменять его изображение
|
|
<tr>
|
Новая строка таблицы
|
|
<td width=50%>
|
Новая ячейка таблицы шириной в 50%
|
|
<center>
|
Центрирование
|
|
<fieldset id=vibor>
|
Рамочка для элементов
|
|
<center>
|
Центрирование
|
|
<legend>Выберите камень, ножницы или бумагу</legend>
|
Легенда рамочки
|
|
<input type=image src=kam.GIF onclick=kamonclick() width=150 onmouseover="document.myw.src='kam.GIF';">
|
Кнопка-изображение, при нажатии на которую запускается подпрограмма kamonclick() (смотри СКРИПТ); при наведении мыши на которую изображение на рисунке "myw" сменяется на 'kam.GIF'
|
|
<input type=image src=nos.GIF onclick=nosonclick() width=150 onmouseover="document.myw.src='nos.GIF';">
|
Кнопка-изображение, при нажатии на которую запускается подпрограмма nosonclick() (смотри СКРИПТ); при наведении мыши на которую изображение на рисунке "myw" сменяется на 'nos.GIF'
|
|
<input type=image src=bum.GIF onclick=bumonclick() width=150 onmouseover="document.myw.src='bum.GIF';">
|
Кнопка-изображение, при нажатии на которую запускается подпрограмма bumonclick() (смотри СКРИПТ); при наведении мыши на которую изображение на рисунке "myw" сменяется на 'bum.GIF'
|
|
</fieldset>
|
Окончание рамочки
|
|
</table>
|
Окончание таблицы
|
|
<br><br>
|
2 раза новая строка
|
|
<h5>Игру подготовил Нагаев Борис. <a href="http://bnagaev.narod.ru">bnagaev.narod.ru</a></h5>
|
Моя подпись и ссылка на мой сайт
|
|
<center>
|
Центрирование
|
|
<h2><a href="kam_js.htm" id=again style= "visibility = hidden">Сыграть ещё раз</a></h2>
|
Спрятанная ссылка на этот файл, нужная, чтобы "сыграть ещё раз"
|
|
<script language="javascript">
|
Вот здесь и начинается самое интересное. Здесь начинается сам скрипт (написанный на языке javascript). Всё, что было до этого – было форматирование, а это – уже само программирование.
|
|
var myss;
|
Объявление переменной myss (количество очков игрока). Обратите внимание: после каждого действия в javascript следует писать точку с запятой. Это одычно не обязательно, но в некоторых случаях (например, при приравнивании со сложением) необходимо. Поэтому проще привыкнуть ставит всегда!
|
|
var koss;
|
Объявление переменной koss (количество очков компьютера)
|
|
var wib;
|
Объявление переменной wib (выбор компьютера в игре – соответственно КАМЕНЬ , НОЖНИЦЫ или БУМАГА
|
|
myss = 0;
|
Приравнивание переменной myss к 0
|
|
koss = 0;
|
Приравнивание переменной koss к 0
|
|
function kamonclick()
|
Выбор игроком камня. Подпрограмма, которая выполняется, когдаа игрок нажимает на изображение камня. В javascript подпрограммы объявляются при помощи function. "Тело" программы, то есть её содержимое, "обрамляют" в знаки "{" (вначале) и "}" (вконце)
|
|
{
|
"Тело" программы, то есть её содержимое, "обрамляют" в знаки "{" (вначале) и "}" (вконце)
|
|
wib=Math.floor(Math.random()*3+1);
|
Приравнивание переменной wib к случайному числу: 1, 2 или 3.Математическое выражение Math.floor(Math.random()*3+1) соответствует случайному выбору чисел 1, 2 или 3. Math.floor(x) – целая часть (обратите внимание: не округление!) числа x. Math.random() – случайное нецелое число от нуля до единицы
|
|
if(wib == 1)
|
Условие, что переменная wib равна 1 (выпал камень). Внимание: в условиях следует писать не один знак "=", а два! Иначе произойдёт приравнивание!
|
|
{
|
"Тело" условия, то есть его содержимое, "обрамляют" в знаки "{" (вначале) и "}" (вконце)
|
|
document.kow.src="kam.GIF";
|
Изображение на рисунке kow сменилось на kam.GIF
|
|
setTimeout("nich()", 0);
|
Через 0 секунд запусти подпрограмму nich() (выпала ничья: и у компьютера, и у игрока камни)
|
|
}
|
"Тело" условия, то есть его содержимое, "обрамляют" в знаки "{" (вначале) и "}" (вконце)
|
|
if(wib == 2)
|
Условие, что переменная wib равна 2 (выпали ножницы).
|
|
{
|
"Тело" условия, то есть его содержимое, "обрамляют" в знаки "{" (вначале) и "}" (вконце)
|
|
document.kow.src="nos.GIF";
|
Изображение на рисунке kow сменилось на nos.GIF
|
|
myss = myss + 1;
|
Счёт игрока увеличился на 1
|
|
setTimeout("ya()", 0);
|
Через 0 секунд запусти подпрограмму ya() (добавь игроку очко на экране)
|
|
if(myss == 20)
|
Условие, что переменная myss равна 20 (игрок набрал максимальное количество очков)
|
|
{
|
"Тело" условия, то есть его содержимое, "обрамляют" в знаки "{" (вначале) и "}" (вконце)
|
|
alert("Вы победили");
|
Выведи сообщение на экран: "Вы победили"
|
|
vibor.style.visibility = "hidden";
|
Спрячь рамочку с кнопками-изображениями, чтобы игрок не продолжил ненароком игру ;)
|
|
again.style.visibility = "";
|
Покажи ссылку "Сыграть ещё раз"
|
|
}
|
Содержимое условия "обрамляют" в знаки "{" (вначале) и "}" (вконце)
|
|
}
|
Содержимое условия "обрамляют" в знаки "{" (вначале) и "}" (вконце)
|
|
if(wib == 3)
|
Условие, что переменная wib равна 3 (выпала бумага).
|
|
{
|
Содержимое условия "обрамляют" в знаки "{" (вначале) и "}" (вконце)
|
|
document.kow.src="bum.GIF";
|
Изображение на рисунке kow сменилось на bum.GIF
|
|
koss = koss + 1;
|
Счёт компьютера увеличился на один
|
|
setTimeout("ko()", 0);
|
Через 0 секунд запусти подпрограмму ko() (добавь компьютеру очко на экране)
|
|
if(koss == 20)
|
Условие, что переменная koss равна 20 (компьютер набрал максимальное количество очков)
|
|
{
|
Содержимое условия "обрамляют" в знаки "{" (вначале) и "}" (вконце)
|
|
alert("Вы проиграли!");
|
Выведи сообщение на экран: "Вы проиграли!"
|
|
vibor.style.visibility = "hidden";
|
Спрячь рамочку с кнопками-изображениями
|
|
again.style.visibility = "";
|
Покажи ссылку "Сыграть ещё раз"
|
|
}
|
Содержимое условия "обрамляют" в знаки "{" (вначале) и "}" (вконце)
|
|
}
|
Содержимое условия "обрамляют" в знаки "{" (вначале) и "}" (вконце)
|
|
}
|
Содержимое подпрограммы "обрамляют" в знаки "{" (вначале) и "}" (вконце)
|
|
function nosonclick()
|
Выбор игроком ножниц
|
|
{
|
Внимание! Эта и следующая подпрограммы не комментируются, так как в них всё аналогично предыдущей. Больше ясности это комментирование не внесёт
|
|
wib=Math.floor(Math.random()*3+1);
|
|
|
if(wib == 2) //выпали ножницы
|
|
|
{
|
|
|
document.kow.src="nos.GIF";
|
|
|
setTimeout("nich()", 0);
|
|
|
}
|
|
|
if(wib == 3) //выпала бумага
|
|
|
{
|
|
|
document.kow.src="bum.GIF";
|
|
|
myss = myss + 1;
|
|
|
setTimeout("ya()", 0);
|
|
|
if(myss == 20)
|
|
|
{
|
|
|
alert("Вы победили");
|
|
|
vibor.style.visibility = "hidden";
|
|
|
again.style.visibility = "";
|
|
|
}
|
|
|
}
|
|
|
if(wib == 1) //выпал камень
|
|
|
{
|
|
|
document.kow.src="kam.GIF";
|
|
|
koss = koss + 1;
|
|
|
setTimeout("ko()", 0);
|
|
|
if(koss == 20)
|
|
|
{
|
|
|
alert("Вы проиграли!");
|
|
|
vibor.style.visibility = "hidden";
|
|
|
again.style.visibility = "";
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
function bumonclick() //выбор игроком бумаги
|
|
|
{
|
|
|
wib=Math.floor(Math.random()*3+1);
|
|
|
if(wib == 3) //выпала бумага
|
|
|
{
|
|
|
document.kow.src="bum.GIF";
|
|
|
setTimeout("nich()", 0);
|
|
|
}
|
|
|
if(wib == 1) //выпал камень
|
|
|
{
|
|
|
document.kow.src="kam.GIF";
|
|
|
myss = myss + 1;
|
|
|
setTimeout("ya()", 0);
|
|
|
if(myss == 20)
|
|
|
{
|
|
|
alert("Вы победили");
|
|
|
vibor.style.visibility = "hidden";
|
|
|
again.style.visibility = "";
|
|
|
}
|
|
|
}
|
|
|
if(wib == 2) //выпали ножницы
|
|
|
{
|
|
|
document.kow.src="nos.GIF";
|
|
|
koss = koss + 1;
|
|
|
setTimeout("ko()", 0);
|
|
|
if(koss == 20)
|
|
|
{
|
|
|
alert("Вы проиграли!");
|
|
|
vibor.style.visibility = "hidden";
|
|
|
again.style.visibility = "";
|
|
|
}
|
|
|
}
|
|
|
}
|
С этой строки комментарии возобновляются
|
|
function nich() //выведение счета и состояния игры на экран
|
Подпрограмма ya – выведение на экран разных надписей, показывающих, что этот ход – ничья
|
|
{
|
|
|
sost.innerText="Ничья!";
|
Содержимое функционального текста sost сменяется на "Ничья!"
|
|
}
|
|
|
function ya()
|
Подпрограмма ya – выведение на экран разных надписей, показывающих, что этот ход выиграл игрок
|
|
{
|
|
|
sost.innerText = "Вы получаете очко!";
|
Содержимое функционального текста sost сменяется на "Вы получаете очко!"
|
|
mys.innerText = myss;
|
Содержимое функционального текста mys сменяется на значение переменной myss
|
|
}
|
|
|
function ko()
|
Подпрограмма ko – выведение на экран разных надписей, показывающих, что этот ход выиграл компьютер
|
|
{
|
|
|
sost.innerText="Компьютер получает очко!";
|
Содержимое функционального текста sost сменяется на "Компьютер получает очко!"
|
|
kos.innerText=koss;
|
Содержимое функционального текста kos сменяется на значение переменной koss
|
|
}
|
|
|
</script>
|
Завершение скрипта
|
|
</body>
|
Завершение видимой части html-страницы
|
|
</html>
|
Завершение html-страницы
|