我正在寻找一个程序，当按下空格键时，该程序将升序排列不同大小的矩形。我尝试排序，但即使排序后也能得到相同的结果。到目前为止，这是我尝试过的。我正在使用Brackets在JS中进行编码。下面的代码仅用于排序，这是我的主要问题。一次，我得到了解决方案，我可以用任何键对其进行排序。请帮帮我。function C_ShapeRect(l_x,l_y,l_w,l_h,l_c){ this.Xpos = l_x ; this.Ypos = l_y ; this.Width = l_w ; this.Height = l_h ; this.Color = l_c ; this.Draw = function m_drawRect(l_canvas,l_context) { l_context.fillStyle = this.Color ; l_context.fillRect(this.Xpos , this.Ypos , this.Width , this.Height); };}var g_RectArray = new Array(5);var g_RectArrayLength = g_RectArray.length ;var g_RectWidth = 20 ;var g_RectHeight = [35,20,77,10,50] ;var g_RectColor = ["red","green","blue","yellow","black"] ;function f_InitRectObject(){ var l_Xpos = 90; var l_Ypos = 175; for(var i=0 ; i<g_RectArrayLength ; i++) { g_RectArray[i] = new C_ShapeRect(l_Xpos,l_Ypos,g_RectWidth,-g_RectHeight[i],g_RectColor[i]); l_Xpos += g_RectWidth ; }}f_InitRectObject() ;function f_DrawRectObject(){ for(var i=0 ; i<g_RectArrayLength ; i++) { g_RectArray[i].Draw(g_canvas,g_context); }}function f_clearCanvas(){ g_context.clearRect(0,0,g_canvas.width,g_canvas.height); g_context.strokeRect(0,0,g_canvas.width,g_canvas.height);} var g_tempHeight = [] ;function f_sortRect(l_array){ for(var i=0 ; i<g_RectArrayLength ; i++) { for(var j = 0 ; j < (g_RectArrayLength - 1) - i ; j++) { if(l_array[j] > l_array[j + 1]) { g_tempHeight = l_array[j]; l_array[j] = l_array[j+1]; l_array[j+1] = g_tempHeight; } } }}function f_GameLoop(){ f_sortRect(g_RectArray) ; f_clearCanvas() ; f_DrawRectObject() ;}setInterval(f_GameLoop(),g_timeInterval) ;
2 回答
catspeake
TA贡献1111条经验 获得超0个赞
<html>
<canvas width="300" height="300" id="myCanvas"> </canvas>
<script>
var g_canvas = document.getElementById("myCanvas");
var g_context = g_canvas.getContext("2d");
var g_FPS = 30;
var g_timeInterval = 1000/g_FPS ;
var g_rectArray = new Array(10);
var g_arrayLength =g_rectArray.length ;
var g_rectWidth = 25;
var g_rectHeight = [21,2,23,77,45,54,8,88,7,32];
var g_rectColor = ["red" , "yellow" , "black" , "blue" , "cyan" , "pink" , "green" , "orange" , "brown" , "magenta"];
var g_tempRectObj ;
// var g_tempRectXpos ;
var g_rectObjSortingIndex = 0;
var g_startSorting =0;
function C_Rectangles(l_x,l_y,l_w,l_h,l_c)
{
this.Xpos = l_x ;
this.Ypos = l_y ;
this.Width =l_w ;
this.Height =l_h ;
this.Color = l_c ;
this.Speed =1;
this.directingSpeed = this.Speed;
this.targetRectXpos =0;
this.targetCheck = 1 ;
this.Draw = function m_drawRect(l_ctx)
{
l_ctx.fillStyle = this.Color ;
l_ctx.fillRect(this.Xpos , this.Ypos , this.Width , -this.Height);
} ;
this.Move = function m_moveRect()
{
if(this.targetCheck == 0)
{
this.Xpos += this.Speed;
if(this.Xpos >= this.targetRectXpos && this.Speed > 0)
{
this.Xpos = this.targetRectXpos;
this.targetCheck = 1;
}
if(this.Xpos <= this.targetRectXpos && this.Speed < 0)
{
this.Xpos = this.targetRectXpos;
this.targetCheck = 1;
}
}
} ;
this.initMove = function f_initMove(l_targetPosition)
{
this.targetRectXpos = l_targetPosition ;
if(this.Xpos < l_targetPosition)
{
this.Speed = this.directingSpeed;
}
if(this.Xpos > l_targetPosition)
{
this.Speed = -this.directingSpeed;
}
this.targetCheck = 0;
} ;
}
function f_initRectObject()
{
var l_Xpos = 20;
var l_Ypos = 200;
for(var i=0 ; i<g_arrayLength ; i++)
{
g_rectArray[i] = new C_Rectangles(l_Xpos,l_Ypos,g_rectWidth,g_rectHeight[i],g_rectColor[i]);
l_Xpos += g_rectWidth ;
}
console.log(g_rectArray);
}
function f_drawRectObject()
{
for(var i=0 ; i<g_arrayLength ; i++)
{
g_rectArray[i].Draw(g_context);
}
}
function f_moveRectObject()
{
for(var i=0 ; i<g_arrayLength ; i++)
{
g_rectArray[i].Move();
}
}
function f_rectObjectMovementCheck()
{
for(var i=0 ; i<g_arrayLength ; i++)
{
if(g_rectArray[i].targetCheck == 0)
{
return true ;
}
}
return false ;
}
function f_clearCanvas()
{
g_context.clearRect(0,0,g_canvas.width,g_canvas.height);
g_context.strokeRect(0,0,g_canvas.width,g_canvas.height);
}
function f_BubbleSort()
{
if(g_startSorting == 1)
{
if(f_rectObjectMovementCheck() == false)
{
if(g_rectArray[g_rectObjSortingIndex].Height > g_rectArray[g_rectObjSortingIndex+1].Height)
{
g_rectArray[g_rectObjSortingIndex].initMove(g_rectArray[g_rectObjSortingIndex+1].Xpos);
g_rectArray[g_rectObjSortingIndex+1].initMove(g_rectArray[g_rectObjSortingIndex].Xpos);
g_tempRectObj = g_rectArray[g_rectObjSortingIndex];
g_rectArray[g_rectObjSortingIndex] = g_rectArray[g_rectObjSortingIndex+1] ;
g_rectArray[g_rectObjSortingIndex+1] = g_tempRectObj ;
}
g_rectObjSortingIndex ++ ;
if(g_rectObjSortingIndex >= (g_arrayLength -1))
{
g_rectObjSortingIndex =0;
}
}
}
}
function f_GameLoop()
{
f_BubbleSort();
f_moveRectObject();
f_clearCanvas();
f_drawRectObject();
}
f_initRectObject();
function f_isKeyPressed(l_eventData)
{
if(l_eventData.keyCode == 32)
{
g_startSorting = 1;
}
}
setInterval(f_GameLoop,g_timeInterval);
document.addEventListener("keydown" , f_isKeyPressed);
</script>
</html>
添加回答
举报
0/150
提交
取消