Статті / Технології

web-конструювання

24 січня 2022
MORENKO OLEKSII

index.html - стартовий 

<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=windows-1251"> 
<LINK rel="stylesheet" type="text/css" href=style.css>
<SCRIPT language="JavaScript" src=script.js></SCRIPT>
<title>Крестики-нолики</title>
</HEAD>
<BODY bgcolor=white text=black onclick="Click()">

<h2>Крестики-нолики</h2>

<SCRIPT language=JavaScript>
<!--
Show(); 
//-->
</SCRIPT>
<p></p>
<FORM>
<INPUT type=button value=Очистка onclick="Clear();"> 
</F0RM>

</BODY>
</HTML>

Керування відбувається при натисканні на ліву кнопку миші за правилами гри

web-конструювання 1/7 web-конструювання 2/7 web-конструювання 3/7 web-конструювання 4/7 web-конструювання 5/7 web-конструювання 6/7 web-конструювання 7/7

File: style.css – оформлення сторінки

BODY
{
 margin:20px;
 padding:30px;
}

.empty /* Стиль пустой клетки. */
{
background-color:#EEE5DB; 
color:#EEE5DB; 
width:50; 
height: 60; 
text-align:center;
}

.busy /* Стиль занятой клетки. */
{
background-color:#D1B284; 
width:50;
height:60; 
text-align:center;
}

File: script.js програмний код сторінки

var nameId = "game"; // Основа идентификатора табличной клетки, 
// Построение игровой таблицы, 
function Show()
{
var str="<TABLE border=1 cellspacing=0 cellpadding=10>"; 
for(var i=0; i<3; i++)
{
str += "<TR>";
for(var j=0; j<3; j++)
{
str += "<TD class=empty id="+nameId+i+j+">e</TD>"; 
}
str += "</TR>";
}
str += "</TABLE>"; 
document.write(str);
}
// Обработка щелчка мыши, 
var PiCX="<img src=gx.gif width=45 heigth=45 border=0 alt=''>";
var PiCO="<img src=g0.gif width=45 heigth=45 border=0 alt=''>";
var stepX = true; // Ход "X"
function Click()
{
var obj = event.srcElement; // Тег, на котором щелкнули мышью, 
if(obj.className == "empty") // Если щелчок по пустой клетке.
{
obj.className="busy"; // Изменим стиль клетки,
//obj.innerHTML = stepX ? "X":"O"; // Запишем ход игрока. 
obj.innerHTML = stepX ? PiCX:PiCO; // Запишем ход игрока. 
stepX = !stepX;
}
}
function Clear()
{
for(var i=0; i<3; i++) 
{
for(var j=0; j<3; j++)
{
var obj=document.all[nameId+i+j]; 
obj.className="empty"; 
obj.innerText = "e";
}
step = "0";
}
}

12345

Якщо ви помітили помилку чи неточність, виділіть фрагмент тексту та натисніть Ctrl+Enter.

 

Автора Категорію Публікацію

500

Умови використання матеріалів сайту

Використання матеріалів можливе лише за умови активного гіперпосилання на UaModna ( див. Правила* ). Для генерації коду посилання натисніть на кнопку

Скопіюйте цей код на ваш сайт, або блог:

Думки, позиції, уподобання та заклики, опубліковані на нашому сайті, є власністю авторів і можуть не співпадати з поглядами редакції uamodna.com

UA Modna 0
Повідомити про помилку