javascript - 使用 JavaScript 进行机场模拟，有固定数量的飞机等待起飞和降落

Question

关闭。这个问题需要多问 focused 。目前不接受答案。

---

想要改进此问题吗？更新问题，使其仅关注一个问题 editing this post .

已关闭 8 年前。

Improve this question

我正在使用 JavaScript 开发一个简化的机场模拟器，使用非常简单的 CSS 或 JQuery 动画来演示起飞或着陆(例如图像在起飞或着陆时消失)。起飞队列中已经有预定数量的 5 架飞机(呼号代表飞机)，着陆队列中已有 5 架飞机。这是我开始的方式

function airport() 
    {
        this.takeoff_queue = ["KQA","ERJ","TOM","DHL","ETH"];
        this.landing_queue = ["RWA","KLM","PAN","FLY540","JAMBO"];
        this.arrival = function arrival()
        this.departure = function departure()

因为只有一条跑道。当到达和起飞时间相同时，着陆飞机应优先。我假设每 1 分钟起飞一次，每 2 分钟降落一次。我计划使用到达和离开函数使用数组 shift() 将每个队列出队。方法。

对于每次出队，我还应该通过制作代表排队飞机的 html div 中的几个图像之一来非常简单地制作动画。最大的问题是我应该如何实现计时功能来运行模拟并在需要时优先考虑到达？另外，我如何合并图像动画？

Answer 1

我喜欢这个用例，所以我做了一个模拟(只是为了好玩)。我希望你不是学生，我现在正在浪费你的作业。

http://jsfiddle.net/martijn/398oezj0/13/

function AirPlane() {
    this.state = ko.observable();
    this.name = ko.observable();
    this.destination = ko.observable();
    this.location = ko.observable();
    this.arrivesOn = ko.observable();
    this.takeOfftime = ko.observable();
    this.startTime = null;

    // set take off state
    this.takeOff = function (runWay) {
        this.runWay = runWay;
        this.state("Taking off");
        this.takeOfftime(60);
    }

    // set the destination
    this.setDestination = function (name, time) {
        this.startTime = time;
        this.arrivesOn(time);
        this.state("Flying");
        this.destination(name);
    }

    // calculate an airplane number
    var n = Math.floor(1 + Math.random() * 1000).toString();
    while (n.length < 4) {
        n = "0" + n;
    }

    // computed for the progress bar
    this.progress = ko.computed(function () {
        if (this.state() == "Flying" || this.state() == "Landing") {
            
            if (this.arrivesOn()) {
                return Math.floor(100 - ((this.startTime - this.arrivesOn()) / this.startTime) * 100).toString() + "%"
            }
        } else if (this.state() == "Taking off" && this.takeOfftime()) {
            return Math.floor(100 - ((60 - this.takeOfftime()) / 60) * 100).toString() + "%"
        }

        return null;

    }, this);
    
    this.name("PH" + n);
    
    // airplane clock, manages arriveal, landing and takingOff
    this.tick = function () {
        if (this.arrivesOn()) {
            this.arrivesOn(this.arrivesOn() - 1);

            if (this.state() == "Flying") {

                if (this.arrivesOn() < 60) {
                    this.state("Landing");
                }
            } else if (this.state() == "Landing") {

                if (this.arrivesOn() <= 0) {
                    this.state("Landed")
                    this.location("schiphol");
                    this.destination("");
                    this.arrivesOn(null)
                }
            }
        }


        if (this.takeOfftime()) {
            this.takeOfftime(this.takeOfftime() - 1);
            if (this.takeOfftime() <= 0) {
                this.state("Flying");
                this.destination("Far Far away");
                this.runWay.state("Free");
                this.location("");
                this.arrivesOn(null);
                this.runWay = null;
                this.takeOfftime(null);
            }
        }
    }
}

// for the future, when we have multiple runways :-)
function RunWay() {
    this.state = ko.observable("Free");
}

// Airfield object, future use, if we want to simulate multiple airfields
function AirField(world) {

    this.world = world;
    this.name = "schiphol";
    this.runWay = new RunWay();

    // finds the first free runway, we have one, so easy
    this.getFreeRunway = function () {
        if (this.runWay.state() == "Free") {
            return this.runWay;
        } else {
            return null;
        }
    }
    
    // finds the first plane that is due to arrive, this includes planes in the landing state
    this.getNextArrival = function () {
        var arrivalOn;
        var arrivalPlane;
        var _this = this;

        this.world.airPlanes().forEach(function (ap) {
            if (
            (ap.state() == "Flying" || ap.state() == "Landing") && ap.destination() == _this.name) {
                if (!arrivalPlane) {
                    arrivalPlane = ap;
                    arrivalOn = ap.arrivesOn();
                } else if (ap.arrivesOn() < arrivalOn) {
                    arrivalPlane = ap;
                    arrivalOn = ap.arrivesOn();
                }
            }
        });

        return arrivalPlane;
    }

    // Finds a waiting airplane that is ready to depart, it must be on this airfield (duh)
    this.getWaitingAirPlane = function () {
        var _this = this;
        var returnValue;
        this.world.airPlanes().forEach(function (ap) {
            if (!returnValue && ap.state() == "Waiting" && ap.location() == _this.name) {
                returnValue = ap;
            }
        });

        return returnValue;
    }

    // try to schedule a tack off
    // Check if we have 60s free before a plan STARTS landing == arrivesOn -60
    // if we have that slot, the plane can takeof
    this.scheduleTakeOff = function () {
        var nextArrival = this.getNextArrival();
        var freeRunway = this.getFreeRunway();
        var waitingPlane = this.getWaitingAirPlane();

        var landingOn = nextArrival.arrivesOn() - 60;

        if (freeRunway && landingOn > 60) {
            debugger;
            if (waitingPlane) {
                freeRunway.state("Occupied");
                waitingPlane.takeOff(freeRunway);
            }

        }
    }
}

// World simulation
function World() {
    this.airPlanes = ko.observableArray();
    this.airField = new AirField(this);
    
    // the ticking clock
    this.time = ko.observable(0);
    var airPlane;

    // load 10 waiting planes
    for (var i = 0; i < 10; i++) {
        airPlane = new AirPlane();
        airPlane.airField = this.airField;
        airPlane.state("Waiting");
        airPlane.location("schiphol");
        this.airPlanes.push(airPlane);
    }

    // load 10 flying planes, they arrive 120s after each other with 60s random to make things more interesting
    var arrivalTime = 0;
    for (var i = 0; i < 10; i++) {
        airPlane = new AirPlane();
        var arrivalTime = arrivalTime + 120 + Math.floor(Math.random() * 60);
        airPlane.setDestination("schiphol", arrivalTime);
        this.airPlanes.push(airPlane);

    }

    // run the simulation
    this.tick = function () {
        this.time(this.time() + 1);
        var _this = this;

        // update plane progress
        this.airPlanes().forEach(function (ap) {
            ap.tick();
        });

        // try to schedule a tack off
        this.airField.scheduleTakeOff();

        // play with the 100ms here to speedup or slow down
        window.setTimeout(function () {
            _this.tick();
        }, 100);
    }



}

// bind the world
var world = new World();

// start the clock
world.tick();
ko.applyBindings(world);

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<strong>Time:<span data-bind="text:time"></span></strong>

<br/>
<table class="table table-striped table-condensed">
    <thead>
        <tr>
            <th>#</th>
            <th>state</th>
            <th>Location</th>
            <th>Destination</th>
            <th>Arrives/TakesOff</th>
        </tr>
    </thead>
    <tbody data-bind="foreach:airPlanes">
        <tr>
            <td data-bind="text:name"></td>
            <td data-bind="text:state"></td>
            <td data-bind="text:location"></td>
            <td data-bind="text:destination"></td>
 
            <td class="progress">
                <div class="progress-bar" style="height:100%;" data-bind="style: { 'width': progress }, css:{ 'progress-bar-danger': (state()=='Taking off' || state()=='Landing'), 'progress-bar-success':state()=='Flying' }">
                    <span data-bind="text:arrivesOn"></span> <span data-bind="text:takeOfftime"></span>

                </div>
            </td>
    </tbody>
</table>