狼的传说小游戏

欢迎来到程序小院

狼的传说

复制代码
玩法:
鼠标左键选择能防御、战斧、风暴3%、滚石10%、藤曼5%、冰柱5%、飞跃10%、三叶草20%、钢叉15%,消灭所有敌人,不同关卡不同敌人,快去闯关消灭敌人吧^^。

开始游戏https://www.ormcc.com/play/gameStart/180

html

复制代码
<div style="text-align:center;"  id="game"></div>

css

复制代码
#game canvas {
    margin-left:50%;
    transform: translateX(-50%);
}

js

复制代码
// import './js/libs/weapp-adapter'
// import Phaser from './js/libs/phaser-wx.js'
// import Demon from './assets/demon.js'
//技能图标 1.防御0 2.战斧0 3.风暴3% 4.滚石10% 5.藤曼5% 6.冰柱5% 7.飞跃10% 8.三叶草20% 9.钢叉15%
var gameScore = 0;
var game = new Phaser.Game({
    width: 710,
    height: 580,
    renderer: Phaser.CANVAS,
    parent:'game',
    // canvas: canvas,
});
var gameState = function (game) {
    this.create = function () {
        this.game.physics.startSystem(Phaser.Physics.ARCADE);//开启物理引擎
        this.bg = this.add.image(0,0,'background');//背景
        this.grass = this.add.image(0,0,'battlefield');//草坪
        this.underRails = this.add.sprite(0,0,'under-rails');//底座
        this.game.physics.arcade.enable(this.underRails);
        this.rails = this.add.image(0,0,'rails');//滑道
        this.rails.y = 81;
        this.underRails.y = 81;
        this.underRails.width = this.rails.width;
        this.underRails.height = this.rails.height;
        this.sky = this.add.image(0,0,'sky');//天空
        this.earth = this.add.image(0,0,'earth');//土地
        this.wagon = this.add.image(0,this.underRails.y -10,'wagon');
        //滑板 第一道-10 第二道60 第三道130 第四道200 第五道270 第六道340 累加70
        this.wires = this.add.sprite(this.underRails.width,this.underRails.y,'wires');//荆棘
        this.wires.active = false;//需要技能图标1 防御 激活
        this.wires.hp = 20;
        this.wires.hp_ = this.wires.hp;
        this.wires.dt = 0;
        this.wires.alpha = 0;
        this.game.physics.arcade.enable(this.wires);
        this.wolf = this.add.image(7,this.wagon.y - 40,'wolf');//狼
        this.wolf.y_ = this.wolf.y;
        this.wolf.animations.add('walk', [4, 5, 6, 7], 3, true);
        this.wolf.animations.add('attack', [0,1, 2, 3], 5, true);
        this.attack = false;
        this.wolf.animations.play('walk');
        this.wolf.bulletSpeed = 60;//quicken 加快 更活跃
        this.axe = this.add.image(0,0,'axe');//武器axe hp==1
        this.axe.alpha = 0;
        this.fork = this.add.image(0,0,'fork');//武器fork hp==2
        this.fork.alpha = 0;
        this.weapon = this.add.weapon(50,'axe');//武器  
        //优化时 更换为group weapon.bullets 子弹行为
        if (this.weapon.bullets.children[0].key=='axe') {//武器耐性
            this.weapon.hp = 1;
        }
        if (this.weapon.bullets.children[0].key=='fork') {//值
            this.weapon.hp = 3;
        }
        this.weapon.bulletKillType = Phaser.Weapon.KILL_WORLD_BOUNDS;
        this.weapon.fireAngle = Phaser.ANGLE_RIGHT;
        this.weapon.bulletAngleOffset = 90;
        this.weapon.bulletSpeed = 400;
        this.weapon.fireRate = 60;
        this.weapon.trackSprite(this.wolf, this.wolf.width, this.wolf.height/1.3);
        this.pigs = this.add.group();//猪
        this.pigs.enableBody = true;
        this.skills = this.add.group();//技能图标
        for (var i = 0; i < 9; i++) {
            let skillIcon = this.skills.create(0,0,'skills');
            skillIcon.x = 13 + i * skillIcon.width + i * 13;
            skillIcon.y = this.bg.height - 13 - skillIcon.height;
            skillIcon.frame = i;
            skillIcon.inputEnabled = true;
            //   if (i>0) {skillIcon.alpha = 0;}
        }
        this.storm = this.add.group();//技能图标3 风暴 将敌人推出边界
        this.storm.enableBody = true;
        this.stone = this.add.group();//技能图标4 滚石 碾过敌人
        this.stone.enableBody = true;
        this.rattan = this.add.group();//技能图标5 藤曼 迟缓诅咒
        this.rattan.enableBody = true;
        this.ice = this.add.group();//技能图标6 冰冻 冻住敌人
        this.ice.enableBody = true;
        this.skills.getChildAt(0).events.onInputDown.add(function(){//技能图标1 道具 荆棘防御
            this.wires.active = true;
            game.add.tween(this.wires).to( { alpha: 1 }, 3000, "Linear", true)
            .onComplete.add(function(){
                this.wires.act = true;
            },this);
            this.skillMask(this.skills.getChildAt(0),100000000);
        }, this);
        this.skills.getChildAt(1).events.onInputDown.add(function(){//技能图标2 武器 战斧
            this.attack = true;
            this.wolf.animations.play('attack');
            this.weaponReplace(this.weapon,this.axe,this.fork,1);
            this.skillMask(this.skills.getChildAt(1),1000000);
        }, this);
        this.skills.getChildAt(2).events.onInputDown.add(function(){//技能图标3 技能 风暴
            if (this.energyEnabled == false) {
                return false;
            }
            this.energy.width -= (this.energy.sum * 3/100);
            if (this.storm.length>0) {//风暴出界 风消云散
                for (var i = 0; i < this.storm.length; i++) {
                    if (this.storm.getChildAt(i).x>this.game.world.width) {
                        this.storm.getChildAt(i).destroy();
                    }
                }
            }
            for (var i = 0; i < 6; i++) {//六个道路
                this.storm_ = this.storm.create(0,0,'storm');
                this.storm_.scale.set(2.5);
                this.storm_.x = this.underRails.width;
                this.storm_.y = 70 + i * 70;
                this.storm_.animations.add('storm',[0,1,2,3],5,true);
                this.storm_.animations.play('storm');
                this.storm_.body.velocity.x = 300;
            }
            this.skillMask(this.skills.getChildAt(2),3000);//3s
        }, this);
        this.skills.getChildAt(3).events.onInputDown.add(function(){//技能图标4 技能 滚石
            this.iceTo = false;
            if (this.energyEnabled == false) {
                return false;
            }
            this.energy.width -= (this.energy.sum * 1/10);
            if (this.stone.length>0) {//滚石出界
                for (var i = 0; i < this.stone.length; i++) {
                    if (this.stone.getChildAt(i).x>this.game.world.width) {
                        this.stone.getChildAt(i).destroy();
                    }
                }
            }
            for (var i = 0; i < 6; i++) {//六个道路
                this.stone_ = this.stone.create(0,0,'stone');
                this.stone_.scale.set(2);
                this.stone_.x = this.underRails.width + this.wires.width - this.stone_.width;
                this.stone_.y = i * 70;
                this.stone_.animations.add('stone',[0,1,2,3,4,5,6,7,8,9],5,true);
                this.stone_.animations.play('stone');
                this.stone_.body.velocity.x = 500;
            }
            this.skillMask(this.skills.getChildAt(3),10000);//10s
        }, this);
        this.skills.getChildAt(4).events.onInputDown.add(function(){//技能图标5 道具 藤曼 迟缓诅咒
            if (this.energyEnabled == false) {
                return false;
            }
            this.energy.width -= (this.energy.sum * 1/20);
            for (let i = 0; i < this.pigs.length; i++) {//生成敌人数目的藤曼
                this.rattan_ = this.rattan.create(0,0,'rattan');
                this.rattan_.scale.set(.5);
                this.rattan_.animations.add('rattan');
                this.rattan_.x = this.pigs.getChildAt(i).x - this.pigs.getChildAt(i).width/2;
                this.rattan_.y = this.pigs.getChildAt(i).y;
                this.pigs.getChildAt(i).body.velocity.x = -30;
                var that = this;
                this.rattan_.animations.play('rattan',5).onComplete.add(function(){
                //冻住敌人动画 完毕后解冻
                    that.rattan.destroy();
                    that.rattan = this.add.group();
                    that.rattan.enableBody = true;
                }, this);
            }
            this.skillMask(this.skills.getChildAt(4),5000);//5s
        }, this);
        this.skills.getChildAt(5).events.onInputDown.add(function(){//技能图标6 技能 冰冻
            if (this.iceTo==false) {
                return false;//是否可以使用ice 防止出错
            }
            if (this.energyEnabled == false) {
                return false;
            }
            this.energy.width -= (this.energy.sum * 1/20);
            if (this.ice.length>0) {//冰柱消融
                this.ice.destroy();
                this.ice = this.add.group();
                this.ice.enableBody = true;
            }
            for (let i = 0; i < this.pigs.length; i++) {//生成敌人数目的冰柱
                if (this.pigs.getChildAt(i).active) {
                    this.ice_ = this.ice.create(0,0,'ice');
                    this.ice_.x = this.pigs.getChildAt(i).x - this.pigs.getChildAt(i).width/2;
                    this.ice_.y = this.pigs.getChildAt(i).y;
                    this.pigs.getChildAt(i).body.velocity.x = 0;
                    this.pigs.getChildAt(i).animations.stop();
                    this.pigs.getChildAt(i).ice = true;
                    this.pigs.getChildAt(i).iceIndex = i;
                    this.ice_.animations.add('ice',[0,1,2,3,4,5,6],3,false);
                    var that = this;
                    this.ice_.animations.play('ice').onComplete.add(function(){
                    //冻住敌人动画 完毕后解冻
                        if (that.pigs.getChildAt(i)) {
                            that.ice.getChildAt(i).kill();
                            that.pigs.getChildAt(i).ice = false;
                            that.pigs.getChildAt(i).animations.play('walk');
                            that.pigs.getChildAt(i).body.velocity.x = -100;
                        }
                    }, this);
                } else {
                    continue;
                }
            }
            this.skillMask(this.skills.getChildAt(5),5000);//5s
        }, this);
        this.skills.getChildAt(6).events.onInputDown.add(function(){//技能图标7 技能 加速
            if (this.energyEnabled == false) {
                return false;
            }
            this.energy.width -= (this.energy.sum * 1/10);
            this.wolf.bulletSpeed = 30;
            var that = this;
            this.skillMask(this.skills.getChildAt(6),10000,function(){
                that.wolf.bulletSpeed = 60;
            });
        }, this);
        this.skills.getChildAt(7).events.onInputDown.add(function(){//技能图标8 道具 三叶草 治愈
            if (this.energyEnabled == false) {
                return false;
            }
            this.energy.width -= (this.energy.sum * 1/5);
            this.skillMask(this.skills.getChildAt(7),12000);
            this.restore = this.add.image(0,0,'restore');
            this.restore.scale.set(3);
            this.restore.animations.add('restore');
            var that = this;
            this.restore.animations.play('restore',3).onComplete.add(function(){
                that.restore.destroy();
                that.life.width = that.life.sum;
            }, this);
        }, this);
        this.skills.getChildAt(8).events.onInputDown.add(function(){//技能图标9 武器 钢叉
            if (this.energyEnabled == false) {
                return false;
            }
            this.energy.width -= (this.energy.sum * 15/100);
            this.weaponReplace(this.weapon,this.axe,this.fork,2);
            var that = this;
            this.skillMask(this.skills.getChildAt(8),10000,function(){
                that.weaponReplace(that.weapon,that.axe,that.fork,1);
            });
        }, this);
        ///
        this.add.image(0,0,'life-bar');//血槽
        this.life = this.add.image(0,0,'life-bar-filled');//血量
        this.life.sum = this.life.width;
        this.add.image(0,this.life.height,'energy-bar');//能量槽
        this.energy = this.add.image(0,this.life.height,'energy-bar-filled');//能量
        this.energy.sum = this.energy.width;
        this.energyEnabled = true;
        ///游戏进度条
        this.progressBarBelow = this.add.image(0,0,'progress-bar-below');
        this.progressBarOver = this.add.image(0,0,'progress-bar-over');
        //   this.progressBarBelow.anchor.set(.5);
        //   this.progressBarBelow.x = this.world.centerX;
        //   this.progressBarBelow.y = this.progressBarBelow.height*1.7;
        //   this.progressBarOver.x = this.progressBarBelow.x - this.progressBarOver.width/2;
        //   this.progressBarOver.y = this.progressBarBelow.y - this.progressBarOver.height/2;
        Phaser.Display.Align.In.TopRight(this.progressBarBelow, this.bg);
        this.progressBarOver.x = this.progressBarBelow.x;
        this.progressBarOver.sum = this.progressBarOver.width;
        游戏关卡属性
        this.enemyKey =  new Array('pig','ridding','granny','octocat');
        //直接在生成敌人位置决定攻击动画 可以共用一个
        this.enemyBulletKey = new Array('','pie','rock','fireball');
        this.enemySpeed = new Array(-100,-150,-200,-250);
        this.scoreLevel = new Array(10,30,50,100);
        this.level = 0;
        this.iceTo = true;
        敌方子弹
        this.enemyBullets = this.add.group();
        this.enemyBullets.enableBody = true;
        this.enemyBullets.setAll('outOfBoundsKill', true);
        this.enemyBullets.setAll('checkWorldBounds', true);
        敌方死亡溅血
        this.bloods = this.add.group();
        this.bloods.enableBody = true;
        积分相关
        this.goldCoin = this.add.group();
        this.coins = this.add.image(0,0,'coins');
        this.coins.x = 100;
        this.number = game.add.retroFont('number', 20, 20, 
        Phaser.RetroFont.TEXT_SET10, 20, 0, 0);///aaa2   a5 24 
        a2== a22a==3223 b=4 c=5 de=67 fg = 89 h = 0 set10无前缀 a1~j0 set8无前缀12~01
        this.imageFont = game.add.image(this.world.centerX/2, 49, this.number);
        this.imageFont.anchor.set(.5,.3);
        this.number.text = "";
        this.number.score = '';
        this.number.table = new Array('a','b','c','d','e','f','g','h','i','j');
        this.score = 0;
        this.displayScore();
    }

源码https://www.ormcc.com/

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

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

相关推荐
意趣新7 分钟前
C 语言源文件从编写完成到最终生成可执行文件的完整、详细过程
c语言·开发语言
纸上的彩虹1 小时前
半年一百个页面,重构系统也重构了我对前端工作的理解
前端·程序员·架构
李艺为1 小时前
根据apk包名动态修改Android品牌与型号
android·开发语言
be or not to be1 小时前
深入理解 CSS 浮动布局(float)
前端·css
黄河滴滴1 小时前
java系统变卡变慢的原因是什么?从oom的角度分析
java·开发语言
LYFlied2 小时前
【每日算法】LeetCode 1143. 最长公共子序列
前端·算法·leetcode·职场和发展·动态规划
老华带你飞2 小时前
农产品销售管理|基于java + vue农产品销售管理系统(源码+数据库+文档)
java·开发语言·前端·数据库·vue.js·spring boot·后端
superman超哥2 小时前
Rust Workspace 多项目管理:单体仓库的优雅组织
开发语言·rust·多项目管理·rust workspace·单体仓库
小徐_23332 小时前
2025 前端开源三年,npm 发包卡我半天
前端·npm·github
C_心欲无痕2 小时前
vue3 - 类与样式的绑定
javascript·vue.js·vue3