不充不行(同时跑三辆车)

欢迎来到程序小院

不充不行

玩法:点击鼠标左键长按充电桩,别让车落回底线,三辆车同时在跑,要控制三个充电桩的电量,电量为0即为游戏结束,看看你能坚持多少秒哦^^。

开始游戏icon-default.png?t=N7T8https://www.ormcc.com/play/gameStart/200

不充不行(同时跑三辆车)_第1张图片

html

css

#tips{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,1) url(assets/images/tips.png) no-repeat center center;
  display: none;
}

js

create: function () {
        function b(c) {
            a.add.tween(c).to({
                x: 500
            }, 1e3, "Linear", true, false).onComplete.add(function (a) {
                a.x = 120, b(c)
            }, a)
        }
        var c, a = this;
        this.stage.backgroundColor = "#000000";
        this.bg = this.add.sprite(0, 0, "bg");
        this.loadNeedle = this.add.sprite(this.world.centerX + 5, 578, "loading-needle");
        this.loadNeedle.anchor.setTo(.5, .5);
        this.loadingo = this.add.sprite(this.world.centerX + 9, 575, "loading-o");
        this.loadingo.anchor.x = .5;
        this.whitebmd = this.add.bitmapData(230, 30);
        this.whitebmd.ctx.beginPath();
        this.whitebmd.ctx.rect(0, 0, 230, 230);
        this.whitebmd.ctx.fillStyle = "#ffffff";
        this.whitebmd.ctx.fill();
        this.whiteSprite = this.add.sprite(this.world.centerX, this.world.height - 90, 
        this.whitebmd);
        this.whiteSprite.anchor.setTo(.5);
        this.loadingMeterRed = this.add.sprite(this.world.centerX, this.world.height - 
        100, "loading-meter-red");
        this.loadingMeterRed.anchor.x = .5;
        this.loadMeter = this.add.sprite(this.world.centerX + 10, this.world.height - 50, 
        "loading-meter");
        this.loadMeter.anchor.setTo(.5);
        this.loadGuang = this.add.sprite(this.world.centerX, this.world.height - 458, 
        "loading-guang");
        this.loadGuang.anchor.setTo(.5);
        DO.bgMusic = this.add.audio("audio-bg", 1, true);
        this.startAudio = this.add.audio("start", 1, false);
        DO.bgMusic.play();
        this.btnStart = this.add.button(this.world.centerX, this.world.height, "btn", 
        null, this, 0, 0, 0);
        this.btnStart.alpha = 0;
        this.btnStart.anchor.setTo(.5);
        this.btnStart.inputEnabled = true;
        this.btnStart.events.onInputUp.add(function () {
            this.startAudio.play();
            this.state.start("game");
        }, this);
        this.line = this.add.sprite(this.world.centerX - 44, this.world.height - 60, 
        "line");
        this.line2 = this.add.sprite(this.world.centerX + 34, this.world.height - 121, 
        "line");
        this.line.anchor.setTo(.5);
        this.line2.anchor.setTo(.5);
        this.line2.alpha = 0;
        this.line.alpha = 0;

        b(this.loadingMeterRed);
        this.titleArr = [];

        for (c = 1; 14 > c; c++) {
            this.titleArr.push(this.add.sprite(this.world.centerX, 100, "title" + c));
            this.titleArr[c - 1].anchor.set(.5);
            this.titleArr[c - 1].alpha = 1;
        }

        this.titleArr = this.titleArr.sort(function () {
            return Math.random() - .5;
        });
        for (c = 0; c < this.titleArr.length; c++) {
            this.add.tween(this.titleArr[c]).to({
                alpha: 0
            }, 300, "Linear", true, 100 * c, 3, true);
        }
        this.bgShadow = this.add.sprite(this.world.centerX, 574, "bg-shadow");
        this.bgShadow.anchor.setTo(.5);
        this.add.tween(this.bgShadow).to({
            alpha: .3
        }, 1e3, Phaser.Easing.Linear.None, true, 0, 999, true);
        this.graphics = this.add.graphics(this.world.centerX, 578);
        this.graphics.lineStyle(16, 4497882);
        this.graphics.angle = -90;
        this.arcValue = 2;
        this.load.onLoadStart.add(this.loadStart, this);
        this.load.onFileComplete.add(this.fileComplete, this);
        this.load.onLoadComplete.add(this.loadComplete, this);
        this.loading();
    }, descText: function (a, b, c) {
        var d, e, f;
        a = a.split("");
        d = this.add.group();
        d.x = this.world.centerX - b;
        d.y = c;
        for (e = 0; e < a.length; e++) {
            f = this.add.text(30 * e, 120, a[e], {
                fontSize: 30,
                fill: "#d6f1ff"
            }, d);
            f.anchor.set(.5, .7);
            f.scale.y = 0;
            this.add.tween(f).to({
                angle: 360
            }, 300, Phaser.Easing.Linear.None, true, 100);
            this.add.tween(f.scale).to({
                y: 1
            }, 600, Phaser.Easing.Linear.None, true, 30 * e);
        }
        return d
    }, arcProgress: function (a, b) {
        this.time.events.remove(this.aaa);
        if(this.arcValue < a) {
            this.aaa = this.time.events.repeat(20, a - this.arcValue, function () {
                this.arcValue = this.arcValue + b;
                this.graphics.arc(-3, 5, 172, this.math.degToRad(this.arcValue++),
                this.math.degToRad(this.arcValue), false);
                this.loadGuang.angle = 356 === this.arcValue ? 360 : this.arcValue;
                this.loadNeedle.angle = 356 === this.arcValue ? 360 : this.arcValue;
                if(this.arcValue > 354) {
                    this.time.events.removeAll();
                    this.animProgress();
                    this.loadGuang.alpha = 0;
                }
            }, this);
        }
    }, animProgress: function () {
        function b(c, d, e) {
            a.add.tween(c).to({
                x: d
            }, 2e3, "Linear", true, false).onComplete.add(function (a) {
                a.x = e, b(c, d, e)
            }, a), a.add.tween(c).to({
                alpha: 1
            }, 1e3, "Linear", true, false, 99, true)
        }
        var a = this;
        this.loadingMeterRed.alpha = 0, this.whiteSprite.alpha = 0, this.add.tween(
        this.loadMeter).to({
            y: this.world.height + 50,
            alpha: 0
        }, 800, Phaser.Easing.Quartic.In, true, false).onComplete.add(function () {
            this.add.tween(this.btnStart).to({
                y: this.world.height - 90,
                alpha: 1
            }, 800, Phaser.Easing.Quartic.Out, true, false).onComplete.add(function () {
                b(this.line, 380, 244), b(this.line2, 244, 380)
            }, this)
        }, this), this.descText("长按充电桩,别让车落回底线,", 190, 60), 
        this.descText("看你行不行!", 70, 110)
    }

源码icon-default.png?t=N7T8https://www.ormcc.com/

需要源码请关注添加好友哦^ ^

转载:欢迎来到本站,转载请注明文章出处https://ormcc.com/

不充不行(同时跑三辆车)_第2张图片

你可能感兴趣的:(H5小游戏,javascript,前端,游戏,开发语言,html)