我正在寻找一个程序，当按下空格键时，按升序对不同大小的矩形进行排序。我尝试了排序，但即使在排序后也能得到相同的结果。
这是我到目前为止所尝试的。我在JS中使用Brackets进行编码。下面的代码仅用于排序，这是我的主要问题。有一次，我得到解决方案，我可以用任何键对它进行排序。
请帮帮我。
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) ;
当然，您可以始终使用内置的数组排序功能。这里有文档：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort
这里有一个例子：
"use strict";
window.addEventListener('load', onLoaded, false);
function onLoaded(evt)
{
var g_RectArray = f_InitRectObject() ;
console.log(g_RectArray);
// copy the returned results
var sorted = g_RectArray.slice(0);
// and sort them
sorted.sort( myCompareFunc );
console.log( sorted );
}
function f_InitRectObject()
{
var result = [];
var l_Xpos = 90;
var l_Ypos = 175;
var g_RectWidth = 20 ;
var g_RectHeight = [35,20,77,10,50] ;
var g_RectColor = ["red","green","blue","yellow","black"] ;
for(var i=0 ; i<5; i++)
{
result.push( new C_ShapeRect(l_Xpos,l_Ypos,g_RectWidth,-g_RectHeight[i],g_RectColor[i]));
l_Xpos += g_RectWidth ;
}
return result;
}
function myCompareFunc(rectA, rectB)
{
return rectB.Height - rectA.Height;
}
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);
};
} <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>