Здравствуйте недавно читал про чистоту кода, коментарии в коде, и так далее.
Посмотрел на свой код и как бы то все в порядке, мне все понятно ведь я его сделал, и при этом пробивал максимально додержатся рекомендаций по чистоте кода.
Вот собственно код, не могли бы мне объяснить что и как делать будет правильней ?
var {gams,Page} = start();
var ojd = new Obj("obect","sprait/","blackdragon.png",1);
var ojd2 = new Obj("obec","sprait/","catapult.png",-1);
function Obj(name, domen_src, spr, turn){/*
*name = название объекта(нужна для внутренностного устройства, должно быть уникальная)
*
*domen_src = Путь к папке с файлами/костюмы/спрайты (/games/sprait/)
*
*spr = название с расширением файла/картинки/спрайта
*
*Метод создает новый объект который будет отображаться по середине экрана и имеет размеры 100*100
*
*turn способ вращения -1:только вправо влево, 0:не вращаться, 1:360 градусов
*/
turn = turn||1;
var X = 0;
var Y = 0;
var height = 100;
var width = 100;
var incline = 90;//наклон (0:в гору 90:вправо +-180:вниз -90:влево)
this.touching_the_mouse = false;//true:курсор над элементом; false:курсор не над элементом;
gams.insertAdjacentHTML("beforeEnd",'<div id="sprait" name="' + name + '"> <img name="'+name+'img" src="'+domen_src+spr+'" width="'+width+'" height="'+height+'"/> </div>');
//создаем спрайт в блоке games
this.obj = (document.getElementsByName(name))[0];
this.img = (document.getElementsByName(name + "img"))[0];
this.obj.oncontextmenu = function() {
return false;
};
this.img.oncontextmenu = function() {
return false;
};
this.img.ondragstart = function() {
return false;
};
this.sprait = function(src) {//меняет спрайт/картинку
this.img.src = domen_src + src;
};
this.drawing = function(displei) {//true:показывать ;false:спрятать
if(displei) {
this.obj.style.display = null;
} else {
this.obj.style.display = "none";
}
};
this.clarity = function(value) {//100% сделать элемент прозрачным, 0% никаких изменений
this.obj.style.WebkitFilter = "opacity("+ (100 - value) +"%)";
};
this.blur = function(value) {//делает элемент размытым
this.obj.style.WebkitFilter = "blur("+ value / 10 +"px)";
};
this.brightness = function(value) {//управляет количеством*(насыщенностью) цвета
this.obj.style.WebkitFilter = "brightness("+ value + 100 +"%)";
};
this.index = function(value) {//GET,SET слои
if(value) {
this.obj.style.zIndex = value + 1;
} else {
return this.obj.style.zIndex - 1;
}
};
this.X = function(x) {//GET,SET для Х
if (x||x===0) {
X = +x;
this.obj.style.left = (Page.X - this.obj.offsetWidth)/2 + (+x);
} else {
return X;
}
};
this.Y = function(y) {//GET,SET для Y
if (y||y===0) {
Y = +y;
this.obj.style.top = (Page.Y - this.obj.offsetHeight)/2 -(+y);
} else {
return Y;
}
};
this.gooXY = function(x,y) {//Встать в точку x=по Х||y=по Y
this.X(+x);
this.Y(+y);
};
this.goo = function(goo) {//идти в направлении incline
incline_ = 90 - incline;
this.gooXY(this.X()+(goo * Math.cos(Math.PI * incline_ / 180)),this.Y()+(goo * Math.sin(Math.PI * incline_ / 180)));
};
this.size = function(width_, height_) {//указание размеров в px;если не указано то GET({Y = height_,X = width_})
var x_ = this.X();
var y_ = this.Y();
height = height_;
width = width_;
this.obj.style.width = width + "px";
this.obj.style.height = height + "px";
this.img.width = width;
this.img.height = height;
this.X(x_);
this.Y(y_);
};
this.getsizeY = function() {
return height_;
};
this.getsizeX = function() {
return width_;
};
function mouseover_(event) { //создаем функцию обработчик для появления курсора над объектом
this.touching_the_mouse = true;
}
var mouseover = mouseover_.bind(this, event);//привязываем контекст вызова
this.obj.onmouseover = mouseover;// ставим обработчик
function mouseout_(event) {//создаем функцию обработчик для ухода курсора с объекта
this.touching_the_mouse = false;
}
var mouseout = mouseout_.bind(this, event);//привязываем контекст вызова
this.obj.onmouseout = mouseout;// ставим обработчик
this.incline = function(incl) {
incline = incl%360;
if(turn > 0) {
incl = incl%360 - 90;
this.obj.style.transform = "rotate("+incl+"deg)";
}else if(turn < 0) {
if(incl > 0) {
this.obj.style.transform = "scaleX("+1+")";
} else {
this.obj.style.transform = "scaleX("+-1+")";
}
} else {
this.obj.style.transform = "rotate("+0+"deg)";
}
};
this.getincline = function () {
return incline;
};
this.gooXY(0,0);
}
function Page_constructor() {
/*
*объект окно: следит, хранит, обновляет, данные про окно, курсор
*/
//размеры окна
this.X = 0;
this.Y = 0;
this.maus = {
X:0,
Y:0,
Clic:false
};
function mousedown() {
this.mausClic = true;
}
var mousedown = mousedown.bind(this,event);
function mouseup() {
this.mausClic = false;
}
var mouseup = mouseup.bind(this,event);
setTimeout(
function(mousedown,mouseup) {
gams.onmousemove = function(event) {
Page.maus.X = event.clientX - (Page.X / 2);
Page.maus.Y = (Page.Y / 2) - event.clientY;
};
gams.onmousedown = mousedown;
gams.onmouseup = mouseup;
}
,20,mousedown,mouseup);
//устанавливаем обработчики:положения мыши(X,Y) и обработчики для свойства: мышка зажата?
//задержка нужна по то время пока функция start() не выполниться и не отдаст объект с "gams","Page" на Деструктуризацию
this.turn = function(obj1, obj2){//в каком направлении "incline" лежит obj2 относительно obj1
return Math.atan2(obj2.Y() - obj1.Y(), obj2.X() - obj1.X()) * (180 / Math.PI);
};
}
function start(){
var Page = new Page_constructor();
var gams = document.getElementById("games");
gams.style.zIndex = 0;
document.body.style.overflow = "hidden";
window.scrollTo(0,0);
//запрещаем прокрутку и ставим ее в (0:0)
var y = (document.body.clientHeight - gams.style.border*2);
var x = (document.body.clientWidth - gams.style.border*2);
gams.style.width = (x + "px");
gams.style.height = (y + "px");
gams.oncontextmenu = function() {// запрещаем меню по правой кнопке мыши
return false;
};
Page.X = x + gams.style.border*2;
Page.Y = y + gams.style.border*2;
gams.style.backgroundColor = "#FFFFFF";
return {gams:gams,Page:Page};
}
к автору
