14.01.2011, 23:03
|
 |
|
|
Регистрация: 27.12.2008
Сообщений: 4,201
|
|
|
Сообщение от Aetae
|
|
И вообще по уму табица должна сама равнять ячейки, это как-бэ и есть смысл таблицы.
|
|
Сообщение от Aetae
|
|
Таблица была нужна для того, что засрала опера - свободного изменения размеров ячеек по заданным размерам таблицы.
|
а откуда вообще такие представления о таблице? Когда они появились, вряд ли кто-то думал, что их будут использовать для рисования змейки. Смысл таблицы в том, чтобы отображать табличные данные 
|
Сообщение от B~Vladi
|
|
Проще создать 10 полос на Canvas, чем 25 дивов
|
проще кому, тебе или браузеру?
|
Сообщение от B~Vladi
|
|
Это как пример таблицы с 5 строками и 5 столбцами. Если взять таблицу 50x50, то получится уже 2500 дивов против 100 линий. С таблицей так ещё больше выйдет.
|
и что? Мы потихоньку перемещаемся в область сферических змеек, занимающих несколько мониторов? |
|
14.01.2011, 23:48
|
 |
Модератор Всея Форума
|
|
Регистрация: 14.05.2009
Сообщений: 4,021
|
|
|
Сообщение от x-yuri
|
|
проще кому, тебе или браузеру?
|
И мне и браузеру.
Мне в том, что не надо писать отдельные стили для дивов (или устанавливать их из скриптов, что вообще бред).
|
Сообщение от x-yuri
|
|
и что?
|
Браузеру... Я не тестил, но по логике вещей должно быть так. Вообще смысл был в том, что рисовать линии вместо ячеек менее затратно в этом случае. Не важно как это делать - SVG, Canvas, DOM. Даже рисование линий дивами - уже оптимизация, ибо меньше приходится дергать DOM.
Почему я должен объяснять тебе очевидные вещи? Если ты не согласен со мной - докажи мне сам обратное, не надо заставлять меня это делать.
__________________
Болтовня ничего не стоит. Покажите мне код. — Linus Torvalds
влад.куркин.рф
Последний раз редактировалось B~Vladi, 14.01.2011 в 23:52.
|
|
15.01.2011, 03:55
|
|
|
|
Регистрация: 27.12.2008
Сообщений: 4,201
|
|
|
Сообщение от B~Vladi
|
|
и браузеру
|
|
Сообщение от B~Vladi
|
|
Я не тестил, но по логике вещей должно быть так. Вообще смысл был в том, что рисовать линии вместо ячеек менее затратно в этом случае. Не важно как это делать - SVG, Canvas, DOM.
|
Болтовня ничего не стоит. Покажите мне код. — Linus Torvalds
|
Сообщение от B~Vladi
|
|
Даже рисование линий дивами - уже оптимизация, ибо меньше приходится дергать DOM.
|
почему меньше?
|
Сообщение от B~Vladi
|
|
Почему я должен объяснять тебе очевидные вещи?
|
очевидно только одно - для тебя использовать канвас проще
|
Сообщение от B~Vladi
|
|
Если ты не согласен со мной - докажи мне сам обратное, не надо заставлять меня это делать.
|
интересно... ты чего-то там сказал, а доказывать мне надо... ну-ну |
|
15.01.2011, 04:02
|
 |
:-/
|
|
Регистрация: 28.09.2009
Сообщений: 1,126
|
|
|
попытка написать на div
в IE6 нормально прорисовывает, в firefox с глюками
|
|
15.01.2011, 10:13
|
|
|
|
Регистрация: 27.12.2008
Сообщений: 4,201
|
|
это все из-за функции detectIE6. В Mozilla рассово-религиозно настроены по отношению к browser detection
да и что змейка... поиграйте лучше в biolab disaster (симпатичная игрушка, в смысле). В том же ff у меня, кстати, тормозит
p.s. Aetae, а как организовать репейнт в ff?
Последний раз редактировалось x-yuri, 15.01.2011 в 11:39.
|
|
15.01.2011, 13:46
|
|
Модератор Всея Форума
|
|
Регистрация: 14.05.2009
Сообщений: 4,021
|
|
|
Сообщение от x-yuri
|
|
почему меньше?
|
1. Считаем кол-во линий.
2. Считаем кол-во ячеек.
3. Делаем выводы.
__________________
Болтовня ничего не стоит. Покажите мне код. — Linus Torvalds
влад.куркин.рф
|
|
15.01.2011, 14:35
|
|
|
|
Регистрация: 27.12.2008
Сообщений: 4,201
|
|
1. Считаем количество линий
2. Считаем количество div'ов
3. Делаем выводы
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<style type="text/css">
.frame {
position: relative;
width: 54px;
overflow: hidden;
}
.horz {
margin-top: 10px;
border: 1px solid #666;
border-left: none;
border-right: none;
height: 10px;
overflow: hidden;
}
.horz-last {
margin-bottom: 10px;
}
.vert-container {
position: absolute;
left: 0;
top: 0;
width: 44px;
padding-left: 10px;
}
.vert {
float: left;
width: 10px;
margin-right: 10px;
border: 1px solid #666;
border-top: none;
border-bottom: none;
height: 54px;
}
</style>
<div class="frame">
<div class="horz"></div>
<div class="horz horz-last"></div>
<div class="vert-container">
<div class="vert"></div>
<div class="vert vert-last"></div>
</div>
</div>
</body>
</html>
|
|
15.01.2011, 16:14
|
|
Модератор Всея Форума
|
|
Регистрация: 14.05.2009
Сообщений: 4,021
|
|
|
x-yuri, ну молодец, нарисовал 2 линии 1 дивом. Собственно, я почти про то же и говорил.
__________________
Болтовня ничего не стоит. Покажите мне код. — Linus Torvalds
влад.куркин.рф
|
|
15.01.2011, 16:36
|
|
|
|
Регистрация: 27.12.2008
Сообщений: 4,201
|
|
я на самом деле имел в виду, что с использованием div'ов и прочих таблиц, кроме всего прочего можно использовать и возможности верстки
|
Сообщение от B~Vladi
|
Даже рисование линий дивами (не говоря уже об остальных моих идеях про оптимизацию в этом топике) - уже преждевременная оптимизация, ибо... я не тестил
|
 |
|
09.06.2013, 08:52
|
|
Интересующийся
|
|
Регистрация: 27.05.2013
Сообщений: 10
|
|
<!DOCTYPE html >
<html>
<head>
<title>Змея</title>
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
<script language="javascript" src="jquery.js" type="text/javascript"></script>
<script language="javascript" src="onload.js" type="text/javascript"></script>
<script language="javascript" src="core.js" type="text/javascript"></script>
<script language="javascript" src="matrix.js" type="text/javascript"></script>
<script language="javascript" src="snake.js" type="text/javascript"></script>
[CSS]#matrix1
{
float:left;
width: 400px;
height: 400px;
border-top: 1px solid #999;
border-left: 1px solid #999;
}
#userint {
float:left;
margin:0 5px;
}
.cell, .on, .food
{
float: left;
width: 19px;
height: 19px;
border-bottom: 1px solid #999;
border-right: 1px solid #999;
}
.on
{
background-color: red;
}
.food
{
background-color: blue;
}
#count, #lvl {
font:20pt sans-serif;
color: gray;
margin: 5px;
}
#buttom {width:400px;}
#buttom div{
float: left;
margin: 5px 13%;
}[/CSS]
[JS]//
// Класс змеи
//
function Snake(body, course, m1)
{
// координаты строк и столбцов
this.body = body;
// направление движения
this.course = course;
// жива ли змейка
this.alive = true;
var that = this;
this.create = function()
{
//отрисовываем змейку
m1.setCell(that.body[0], that.body[1], 'on');
}
this.move = function()
{
if (that.course=='right') {
if (that.body[1]==20){that.alive=false;}
else that.body[1]++;
}
else if (that.course=='left' ) {
if (that.body[1]==1){that.alive=false;}
else that.body[1]--;
}
else if (that.course=='down') {
if (that.body[0]==20){that.alive=false;}
else that.body[0]++;
}
else if (that.course=='up') {
if (that.body[0]==1){that.alive=false;}
else that.body[0]--;
}
for (var i=2;i<=(len*2-2); i+=2){
if(that.body[0]==that.body[i] && that.body[1]==that.body[i+1])
{that.alive=false;}
else continue;
}
if (that.alive){
m1.setCell(lastrows, lastcols, 'cell');
m1.setCell(that.body[0], that.body[1], 'on');
lastbut = that.course;
}
else lastbut = '';
}
}[/JS]
[JS]//
// Точка входа.
//
$(document).ready(function(){
var game = new Core;
var left=37; // значения клавиш для игры по умолчанию
var right=39;
var up=38;
var down=40;
game.load();
//обрабатываем нажатие на кнопку старт -
$("#start").click(function(){
if($(this).val()=="Начать заново"){
game.reload(false);
$(this).val("Начать игру");
}
else if ($(this).val()=="Начать игру"){
game.start();
$(this).val("Начать заново");
}
});
$("#pause").click(function(){
if($("#start").val()=="Начать заново"){
alert("Нажмите Ок для продолжения");
}
});
document.onkeydown = function (event)
{
event = (event) ? (event) : window.event;
if (event){
var code = (event.charCode) ? event.charCode : event.keyCode;
if (code==left) game.cmdLeft();
if (code==up) game.cmdUp();
if (code==right) game.cmdRight();
if (code==down) game.cmdDown();
}
}
// при нажатии на кнопку "Изменить управление" запускаем функцию изминения клавиш управления
$("#control").mousedown(function(){
left=0;
right=0;
up=0;
down=0;
var i=0;
$("#userint").append("<p id='con'>Нажмите клавишу для движения влево</p>");
$(document).keydown(function (eventObject){ //устанавливаем событие на нажатие клавиши
var code = eventObject.which;
if (i==0){
left = code;
$("#con").text("Нажмите клавишу для движения вправо");
i++
}
else if (i==1){
right = code;
$("#con").text("Нажмите клавишу для движения вниз");
i++
}
else if (i==2){
down = code;
$("#con").text("Нажмите клавишу для движения вверх");
i++
}
else if (i==3){
up = code;
$("#con").remove();
alert("Изминения приняты");
$(this).unbind('keydown'); //удаляем установленное событие
}
});
});
});[/JS]
[JS]//
// Класс матрицы.
//
function Matrix(containerId, rows, cols)
{
// id контейнера
this.containerId = containerId;
// число строк
this.rows = rows;
// число столбцов
this.cols = cols;
var that = this;
// создание сетки
this.create = function()
{
var n = this.rows * this.cols;
var matrix=$('#'+that.containerId);
matrix.innerHTML = '';
for (var i = 0; i < n; i++)
{
var div = document.createElement('div');
div.className = 'cell';
matrix.append(div);
}
}
// получить значение ячейки
this.getCell = function(row, col)
{
var ind = (row - 1) * this.cols + col - 1;
if($("#matrix1>div:eq("+ind+")").hasClass('on'))return true;
else return false;
}
// установить значение ячейки
this.setCell = function(row, col, val)
{
var ind = (row - 1) * this.cols + col - 1;
$("div>div:eq("+ind+")").removeClass().addClass(val) ;
}
}
[/JS]
[JS]//
// Ядро
function Core()
{
this.matrix;
var snake;
var timer;
var count=0;
var body=[1,2];
var dif=500;
var lvl=1;
len=1; //длина змеи
// итд, переменных сколько вам нужно (можете вместо переменных использовать поля)
var that = this;
this.load = function()
{
that.matrix = new Matrix('matrix1', 20, 20);
that.matrix.create();
that.food(that.matrix);
that.snake = new Snake(body, 'right', that.matrix);
that.snake.create();
}
this.start = function()
{
timer = setInterval(play,dif);
}
this.cmdRight = function()
{
//меняем курс змеи вправо, если это возможно
that.snake.course="right";
if (len>1&&lastbut=='left'&&that.snake.course=='right') that.snake.course='left';
}
this.cmdLeft = function()
{
//меняем курс змеи влево, если это возможно
that.snake.course="left";
if (len>1&&lastbut=='right'&&that.snake.course=='left') that.snake.course='right';
}
this.cmdUp = function()
{
//меняем курс змеи вверх, если это возможно
that.snake.course="up";
if (len>1&&lastbut=='down'&&that.snake.course=='up') that.snake.course='down';
}
this.cmdDown = function()
{
//меняем курс змеи вниз, если это возможно
that.snake.course="down";
if (len>1&&lastbut=='up'&&that.snake.course=='down') that.snake.course='up';
}
// устанавливаем еду
this.food = function(m1){
xy = new Array();
do{
xy[0] = Math.floor(Math.random()*20)+1;
xy[1] = Math.floor(Math.random()*20)+1;
}
while(m1.getCell(xy[0],xy[1]));
m1.setCell(xy[0], xy[1], 'food');
}
// либо перегружаем поле, либо перегружаем игру
this.reload = function(alive){
$("#matrix1 div").remove();
$("#start").val("Начать игру");
if(!alive){
dif=500;
lvl=1;
count=0;
$("#count").text("Счет: 0");
$("#lvl").text("Уровень: "+lvl);
alert ('Игра закончена!');
}
clearInterval(timer);
body=[1,2];
len=1;
that.load();
}
// проверяем съеден ли фрукт, если да увеличиваем длину и счет, если нет меняем положение
this.eat = function(){
if (xy[0]==that.snake.body[0] && xy[1]==that.snake.body[1]){
that.food(that.matrix);
len++;
count++;
that.snake.body.unshift(that.snake.body[0],that.snake.body[1]);
$("#count").text("Счет: "+((count*10)+(50*(lvl-1))));
}
else{
lastcols=that.snake.body[len*2-1];
lastrows=that.snake.body[len*2-2];
if (len>1){
that.snake.body.pop();
that.snake.body.pop();
that.snake.body.unshift(that.snake.body[0],that.snake.body[1])
}
}
}
// проверка жизни змейки, если мерта запускаем перегрузку, если нет продолжаем движение и проверяем левелап
function play(){
if(!that.snake.alive){
that.reload(false);
}
else {
that.eat();
that.snake.move();
if (len>=(1+lvl*5)){
lvl++;
dif=Math.floor(dif/3)+Math.floor(500/lvl);
$("#count").text("Счет: "+((count*10)+(50*(lvl-1))));
$("#lvl").text("Уровень: "+lvl);
that.reload(true);
}
}
}
}[/JS]
</head>
<body>
<div id="matrix1"></div>
<div id="userint">
<p id="count"> Счет: 0</p>
<p id="lvl"> Уровень: 1</p><br/>
<input id="control" type="submit" value="Изменить управление"/>
</div>
<div id="buttom">
<div>
<input id="start" type="submit" value="Начать игру"/>
</div>
<div>
<input id="pause" type="submit" value="Пауза"/>
</div>
</div>
</body>
</html>
|
|
|
|
