Сообщение от x-yuri
|
|
задать высоту ячеек, а не таблицы
|
А вот те хрен.) Да - таблица становится ровнее, но цвет нижней половины всё равно отказывается меняться. Ни через style ни через className не хочет.
И вообще по уму табица должна сама равнять ячейки, это как-бэ и есть смысл таблицы.
Нет можно конечно заюзать грязный хак вызывающий принудительный репеинт - тогда да всё работает, но что за нах?
Именно за это я ненавижу оперу.
Пример: спешал фор опера: ни единого скрпта без хака
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<style type="text/css">
.snakeTable {border:2px solid #ddf;table-layout:fixed;}
.snakeTable * {margin:0;padding:0}
.snakeTable td,.snakeTable tr {border:0;}
*!*.snakeTable td {background-color:#ddf;height:6px;width:6px;} /*из-за оперы вам придётся вычислять размер ячеек вручную под нужный вам размер*/ */!*
.snakeTable caption {border:2px solid #ddf;text-align:center;border-bottom:0;color: #99a;padding:2px;font:bold 12pt sans-serif;}
.snakeTable a {color: #99a;text-decoration:none}
.snakeTable a:hover {color: #9a9;}
.snakeTable .snakeFood {background-color:#0f0}
.snakeTable .snakeBody {background-color:#f00}
.snakeTable table{border-collapse:collapse;width:100%;table-layout:fixed;}
</style>
<script type="text/javascript">
window.onload=function(){
(function(set){
function addEvent(e,t,h){e.addEventListener?e.addEventListener(t,h,false):e.attachEvent("on"+t,h)}
addEvent(document,'keydown',function(e){
switch (e.keyCode!=way[2]&&e.keyCode){
case false:
break;
case 37: //left
way=[1,-1,39]
break;
case 38: //up
way=[0,-1,40]
break;
case 39: //right
way=[1,1,37]
break;
case 40: //down
way=[0,1,38]
break;
}
})
var vars={
way:[1,1,37], //направление движения
zmey:[[0,0]], //,[0,1],[0,2],[0,3],[0,4],[0,5],[0,6],[0,7],[0,8],[0,9],[0,10],[0,11],[0,12]] //сама змейка
points:0, //очки
elem:document.body, //в какой нод помещать змейку
rows:20, //клеток y
cells:20, //клеток х
speed:100, //скорость
css:'snakeTable' //класс базовой таблицы
}
if(set)for(var i in set)if (set.hasOwnProperty(i))vars[i]=set[i]; //меняем умолчания на заданные значения
var lng={
points:'POINTS: ',
fail:'YOU FAIL!',
speed:'SPEED',
play:'PLAY',
stop:'PAUSE',
start:'START!',
restart:'RESTART!'
} //языковой объект)
var d=document,way,zmey,points,time,timer;
var e=function(h,w){ //отрисовка
var t=d.createElement('table'),c=d.createElement('caption'),tr,i,a;
t.className=vars.css;
while(h--) {
tr=t.insertRow(-1);i=w;
while(i--)tr.insertCell(-1);
}
i=c.appendChild(d.createElement('table')).insertRow(-1);
w=d.createElement('a');
w.href='#';
w.onclick=start;
w.appendChild(d.createTextNode(lng.start))
t.appendChild(c);
return {
caption:c,
points:i.insertCell(-1).appendChild(d.createTextNode(lng.points+'0')),
center:i.insertCell(-1).appendChild(w),
time:i.insertCell(-1).appendChild(d.createTextNode('00:00')),
table:vars.elem.appendChild(t)
}
}(vars.rows,vars.cells)
function start() {
way=vars.way.slice();zmey=vars.zmey.slice();points=vars.points;time=new Date();//возвршаем умолчания
var i=zmey.length;
while(i--)e.table.rows[zmey[i][0]].cells[zmey[i][1]].className='snakeBody'; //первоначальная отрисовка
makeFood();
move();
e.center.onclick=toggle;
e.center.firstChild.data=lng.stop;
}
function restart() {
var i=zmey.push(food)&&zmey.length;
while(i--)e.table.rows[zmey[i][0]].cells[zmey[i][1]].className=''; //чистим поле от трупика
start()
}
function toggle() {
var txt=this.firstChild;
if(txt.data==lng.stop){txt.data=lng.play;timer&&clearTimeout(timer)}
else{txt.data=lng.stop;move();}
}
function makeFood() {
(function(){
var i=zmey.length;
food=[Math.floor(Math.random()*vars.rows),Math.floor(Math.random()*vars.cells)];
while(i--)if(food[0]==zmey[i][0]&&food[1]==zmey[i][1]){arguments.callee();break}
})()
e.table.rows[food[0]].cells[food[1]].className="snakeFood";
}
function move() {
var i=zmey.length,good=true,tail;
var head=zmey[i-1].slice(); //голова змейки
head[way[0]]+=way[1]; //намечаем сдвиг согласно выбранному направлению
while(i)if(zmey[--i].join()==head.join()){good=false;break}; //если сдвинутая голова попадает на тело - плохо)
if (head[0]>-1&&head[1]>-1&&head[0]<vars.rows&&head[1]<vars.cells&&good) { //проверяем не выходит ли за область и не пожирает ли себя
zmey.push(head);
e.table.rows[head[0]].cells[head[1]].className='snakeBody'; //добавляем в массив и отмечаем на экране
if(food.join()==head.join()){ //если попадает на еду
e.points.data=lng.points + ++points; //добавляем очки
makeFood() //создаём новую еду
}
else{
tail=zmey.shift(); //отрезаем хвост
e.table.rows[tail[0]].cells[tail[1]].className='';
}
e.time.data=new Date(new Date()-time).toLocaleTimeString().slice(2);
*!* window.opera&&(e.table.style.outlineColor="rgb("+Math.floor(Math.random()*256)+",0,0)"); //грязный хак, ибо опера блеать */!*
timer=setTimeout(move,vars.speed)
}
else {
e.center.firstChild.data=lng.restart;
e.center.onclick=restart
}
}
})({cells:60,rows:10})
}
</script>
</head>
<body>
</body>
</html>