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

House трудност:

видян: 7324

Здравейте!

В този урок ще създадем една игра, която изисква минимални познания по 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! - в един от стринговете.

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

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

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