Как отсортировать прямоугольники в JavaScript по высоте - PullRequest
Новая
       11

Как отсортировать прямоугольники в JavaScript по высоте

0 голосов
/ 02 апреля 2019

Я ищу программу, которая сортирует прямоугольники разного размера в порядке возрастания при нажатии пробела. Я пробовал сортировку, но она дает те же результаты даже после сортировки.

Это то, что я пробовал до сих пор. Я использую скобки для кодирования в 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 ]

0 голосов
/ 03 апреля 2019 
 <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 голосов
/ 02 апреля 2019

Конечно, вы всегда можете использовать встроенную функцию сортировки массивов. Здесь есть документы: 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);
	};
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...