如何根据高度对JavaScript中的矩形进行排序
我正在寻找一个程序，当按下空格键时，该程序将升序排列不同大小的矩形。我尝试排序，但即使排序后也能得到相同的结果。
到目前为止，这是我尝试过的。我正在使用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) ;
素胚勾勒不出你浏览 229回答 2
2回答
-
catspeake
<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>
随时随地看视频慕课网APP
相关分类
JavaScript