Я новичок в HTML5 и JavaScript. Я работаю над очень простым проектом «холст», в котором у вас есть две пробирки, и нажатие на одну из них снижает ее уровень и увеличивает уровень другой.
Я написал для этого код, и он работает, единственная проблема в том, что когда я нажимаю на пробирку, она перемещается по диагонали по экрану, и я не знаю, что вызывает это.
Было бы здорово, если бы вы могли просмотреть код и сказать мне, в чем проблема:
TestTube.js
TestTube.prototype.render = function(){
this.graphics.clear();
this.graphics.setStrokeStyle(2,1,1);
//set stroke color black.
this.graphics.beginStroke("#000000");
//set fill color
this.graphics.beginFill(this.color);
//START DRAWING------------------------------------
//move to origin.
this.graphics.moveTo(this.x,this.y);
//draw line down to point of liquid in test tube [liquid start point]
_level = (100 - this.level)/100;
this.graphics.lineTo(this.x,this.y+_level*this.height);
//draw line uptil bottom of test tube.
this.graphics.lineTo(this.x,this.y+(this.height-this.width/2));
//draw the round part of test tube.
//graphics.arc(centerX,centerY,radius,startAngle,endAngle,anticlockwise);
this.graphics.arc(this.x + this.width/2,this.y+(this.height-this.width/2),this.width/2,Math.PI,0,true);
//go back to upto level of liquid in tube [liquid end point]
this.graphics.lineTo(this.x+this.width,this.y+_level*this.height);
//connect liquid start point with liquid end point to fill in liquid colour.
this.graphics.lineTo(this.x,this.y+_level*this.height);
this.graphics.endFill();
//go back to liquid end point
this.graphics.moveTo(this.x+this.width,this.y+_level*this.height);
//draw the rest of the test tube.
this.graphics.lineTo(this.x+this.width,this.y);
//stop drawing.
this.graphics.endStroke();
}
index.js
chemical.addEventListener('click',function(e){
e.target.level--;
e.target.render();
solution.level++;
solution.render();
stage.update();
});