Ильницкий В.Г.
Старший преподаватель кафедры программного
обеспечения
Костанайского государственного университета
им.А.Байтурсынова. Казахстан
Применение
игровой программы для знакомства с
HTML, Java-Script и CSS
При изучении практически любых разделов программирования на мой взгляд могут быть использованы игровые программы. Это повышает интерес к программированию, материал усваивается с большей охотой и эффективностью.
Для начального знакомства и закрепления навыков программирования в, а также использования таблиц каскадных стилей CSS предлагается студентам разработать интересную логическую игру «Угадай число». Суть игры заключается в угадывании 4 чисел, загаданных программой. После каждой попытки программа сообщает, сколько цифр угадано и сколько цифр находятся на своем месте.
<!DOCTYPE
html>
<html><head>
<meta
http-equiv="Content-Type" content="text/html;
charset=UTF-8">
<link
rel="stylesheet" type="text/css" media="all"
href="My%20first%20simple%20game_files/style.css">
<script
src="My%20first%20simple%20game_files/jquery-1.js"></script>
<script
src="My%20first%20simple%20game_files/my.js"></script>
<title>My
first simple game</title>
</head>
<body>
<script>
$(document).ready(function ()
{start()});
</script>
<span id="rules">Суть игры заключается в отгадывании цифр стоящих на
месте Х, все цифры разные. Для проверки предположений вводить нужно так
же разные цифры.</span>
<div id="main">
<input size="2"
value="X" id="x" type="number">
<input size="2"
value="X" id="x" type="number">
<input size="2"
value="X" id="x" type="number">
<input size="2"
value="X" id="x" type="number">
<br>
</div>
<div
id="line">
</div>
<div
id="check">
<input size="2"
id="y1" type="number">
<input size="2"
id="y2" type="number">
<input size="2"
id="y3" type="number">
<input size="2"
id="y4" type="number">
<input value="Проверить" onclick="check()"
id="cb" type="button">
<input style="display: none;"
value="Начать заново"
onclick="reset_game()" id="rb" type="button">
</div>
// Содержимое файла my.js с основными функциями игры.
var x=[]; var step=0;
function
myrandom(){
return parseInt(Math.random()*10);};
function
start(){ step=0;
rnd=myrandom()
x[1]=rnd;
while (x[1]==rnd) {rnd=myrandom()}
x[2]=rnd;
while ((x[1]==rnd) || (x[2]==rnd))
{rnd=myrandom()} x[3]=rnd;
while ((x[1]==rnd) || (x[2]==rnd) ||
(x[3]==rnd)) {rnd=myrandom()} x[4]=rnd;
//alert(x)
$('#rb').hide();
}
function
check() {
step++; var y=[]; var
n=0; pos=0;
for (i=1;i<=4;i++){
y[i]=(parseInt(($('#y'+i).val())));}
for (i=1;i<=4;i++){
for (j=1;j<=4;j++){
if
(x[i]==y[j]) {n++; if (i==j){pos++}}
}
}
if (n==1) {sovp="1 совпадение"} else {sovp=n+" совпадения"}; if (n==0) {sovp="Нет совпадений"}
if (pos==0) {pozic="позиции не
совпали"} else
(pozic=pos+" позиции совпали"); if (pos==1) {pozic="1 позиция совпала"}
if ((n==0) && (pos==0))
{pozic=""}
mystr=sovp+", "+pozic
. . .
}
}
Литература:
1.Пауэлл Томас А. Web – дизайн: Пер. с англ. СПб.:БХВ – Петербург, 2002. – 1024с.
2.А.Д. Александровский. Создание Web – страниц с использованием FrontPage98 и JavaScript. – М.: ДМК, 1998 – 368 с.