Помогни ни да направим Uroci.net по - богат! Добави урок

Игра на кръсчета и нули с Javascript

PHP » PHP
House   трудност:    видян: 6621

Здравейте!

В този урок ще създадем една игра, която изисква минимални познания по Javascript и по-конкретно вземането на innerHTML. Не ни трябват картинки, всичко е в един файл.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<style type="text/css">
body {
margin:0;

}
a {
text-decoration:none;
color:black;
}
</style>
</head>
<body>

<script type="text/javascript">
/*

Автор: Тихомир Янев 07.08.2009
Играта е успешно тествана под IE 7, FF 3, Google Chrome 2 :)


Следващите няколко реда въвеждаме няколко важни променливи:

*/

var fields=20; // Колко полета да е квадратната мрежа (20*20=400 полета)
var kolko=5; // Колко поредни трябват за победа
var me="X"; // Символ на 1-ви играч
var you="O"; // Символ на 2-ри играч
var first=1; // Кой да започне играта (2 = 2-рия играч)
var empty="..."; // Как да изглеждат празните клетки
var font=21; // Големина на символите
var color1="#00a5f9"; // Цвят на първия играч
var color2="#ff7612"; // Цвят на 2-рия
var backgr="#cdcdcd"; // Цвят на фона
var ifwin="Печелите!"; // Какво да извежда при победа

// Не бутайте по-надолу освен ако не сте сигурни какво правите

var i,s,win,a1,check,br,a2;

var colors=new Array(2);
colors[0]=color1;
colors[1]=color2;

document.write('<table width="100%" height="100%" id="info" style="background:' + backgr + ';padding:5px;color:white;font-size:' + font + 'px;">');

/* сега ще изведем празни клетки, като на всяка от тях ще дадем id, за да може по-късно да се обръщаме към тях */

for (i=1;i<=fields;i++) {
document.write("<tr>");
for (k=1;k<=fields;k++)
document.write("<td id="" + i + "," + k + "" style='border:1px solid gray;text-align:center'><a href='javascript:void(0)' onclick='set_one("+i+","+k+");check_win("+i+","+k+");'>" + empty + "</a></td>");
document.write("</tr>");
}

function set_one(k,l) {

if (!document.getElementById(k+ "," +l).innerHTML==empty)
return 0;
else {
if (first==1) {
s=me;
first=0;
}
else { s=you;
first=1;
}
document.getElementById(k+ "," +l).innerHTML=s;
document.getElementById(k+ "," +l).bgColor=colors[first];

}
}

function check_win(a,b) { // следва една огромна функция, която има за цел да провери дали печелите

//тук със сигурност има и по-лесен вариант, кодът трябва да се оптимизира

if (first==1)
check=you;

else check=me;

a1=a-1;
if (a1==0)
a1=1;
a2=a+1;
if (a2>fields)
a2=fields;

br=0;

if (document.getElementById(a1 + "," + b).innerHTML==check || document.getElementById(a2 + "," + b).innerHTML==check) {


for (x=1;x<=fields;x++) {

if (document.getElementById(x + "," + b).innerHTML==check)
br++;

else br=0;

if (br>=kolko) {
alert(ifwin);
window.location.reload();
}

}
}

a1=b-1;
if (a1==0)
a1=1;
a2=b+1;
if (a2>fields)
a2=fields;

br=0;
if (document.getElementById(a + "," + a1).innerHTML==check || document.getElementById(a + "," + a2).innerHTML==check) {


for (x=1;x<=fields;x++) {

if (document.getElementById(a + "," + x).innerHTML==check)
br++;

else br=0;

if (br>=kolko) {
alert(ifwin);
window.location.reload();
}

}
}

a1=a-1;
a2=b+1;
a3=b-1;
a4=a+1;
if (a1==0)
{
a1=1;
a2=b;
}
if (a2>fields) {
a2=fields;
a1=a;
}
if (a3==0) {
a3=1;
a1=a;
}
if (a4>fields) {
a4=fields;
a2=b;
}
br=0;

if (document.getElementById(a1 + "," + a3).innerHTML==check || document.getElementById(a4 + "," + a2).innerHTML==check) {

for (x=a,z=b;x>1 && z>1;x--,z--)
;

while (x<=fields && z<=fields) {
if (document.getElementById(x + "," + z).innerHTML==check)
br++;

else br=0;

if (br>=kolko) {
alert(ifwin);
window.location.reload();
}
x++;
z++;
}
}



br=0;
a1=a-1;
a2=b+1;
a3=b-1;
a4=a+1;
if (a1==0)
{
a1=1;
a2=b;
}
if (a2>fields) {
a2=fields;
a1=a;
}
if (a3==0){
a3=1;
a4=a;
}
if (a4>fields) {
a4=fields;
a3=b;
}
br=0;

if (document.getElementById(a1 + "," + a2).innerHTML==check || document.getElementById(a4 + "," + a3).innerHTML==check) {
for (x=a,z=b;x<fields && z>1;x++,z--)
;
//alert(x + "," + z);
while (z<=fields && x>0) {
//alert(x + "," + z);
if (document.getElementById(x + "," + z).innerHTML==check)
br++;

else br=0;

if (br>=kolko) {
alert(ifwin);
window.location.reload();
}
x--;
z++;
}
}
}

</script>
</table>
</body></html>


Това е всичко! Може да се усложни като се играе срещу компютър, който да изчислява на кое поле да сложи знак, но това оставям на вас.

ДЕМО на играта



Коментари (4)

GDD966 на 08.10 2010 в 10:43ч.
С коя програма мога да изпробвам кода.
DemorF на 26.01 2011 в 11:51ч.
Notepad
mitko96 на 16.03 2011 в 23:24ч.
грешен раздел! това е точно за javascript
jqueryui на 15.02 2013 в 13:40ч.
Това нещо не работи --- имаш syntax error! - в един от стринговете.

Регистрирайте се, за да добавите коментар


Калдейта ЕООД - © 2003-2010. Всички права запазени.
Препоръчваме: Национален Бизнес | Bomba.bg | IT Новини | Диплома.бг | TRAVEL туризъм | Реферати | AmAm.bg | Иде.ли | Курсови работи | Фото Форум | Spodeli.net | Фото-Култ | Atol.bg | Elmaz.com | MobileBulgaria.com | Казанлък.Com