web-touristИгра на кръсчета и нули с Javascript
Автор: tu6o
Здравейте!
В този урок ще създадем една игра, която изисква минимални познания по 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>Това е всичко! Може да се усложни като се играе срещу компютър, който да изчислява на кое поле да сложи знак, но това оставям на вас.
