• 狼的传说小游戏

    欢迎来到程序小院

    狼的传说

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

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

    html

    <div style="text-align:center;"  id="game"></div>

    css

    1. #game canvas {
    2.     margin-left:50%;
    3.     transform: translateX(-50%);
    4. }

    js

    1. // import './js/libs/weapp-adapter'
    2. // import Phaser from './js/libs/phaser-wx.js'
    3. // import Demon from './assets/demon.js'
    4. //技能图标 1.防御0 2.战斧0 3.风暴3% 4.滚石10% 5.藤曼5% 6.冰柱5% 7.飞跃10% 8.三叶草20% 9.钢叉15%
    5. var gameScore = 0;
    6. var game = new Phaser.Game({
    7.     width: 710,
    8.     height: 580,
    9.     renderer: Phaser.CANVAS,
    10.     parent:'game',
    11.     // canvas: canvas,
    12. });
    13. var gameState = function (game) {
    14.     this.create = function () {
    15.         this.game.physics.startSystem(Phaser.Physics.ARCADE);//开启物理引擎
    16.         this.bg = this.add.image(0,0,'background');//背景
    17.         this.grass = this.add.image(0,0,'battlefield');//草坪
    18.         this.underRails = this.add.sprite(0,0,'under-rails');//底座
    19.         this.game.physics.arcade.enable(this.underRails);
    20.         this.rails = this.add.image(0,0,'rails');//滑道
    21.         this.rails.y = 81;
    22.         this.underRails.y = 81;
    23.         this.underRails.width = this.rails.width;
    24.         this.underRails.height = this.rails.height;
    25.         this.sky = this.add.image(0,0,'sky');//天空
    26.         this.earth = this.add.image(0,0,'earth');//土地
    27.         this.wagon = this.add.image(0,this.underRails.y -10,'wagon');
    28.         //滑板 第一道-10 第二道60 第三道130 第四道200 第五道270 第六道340 累加70
    29.         this.wires = this.add.sprite(this.underRails.width,this.underRails.y,'wires');//荆棘
    30.         this.wires.active = false;//需要技能图标1 防御 激活
    31.         this.wires.hp = 20;
    32.         this.wires.hp_ = this.wires.hp;
    33.         this.wires.dt = 0;
    34.         this.wires.alpha = 0;
    35.         this.game.physics.arcade.enable(this.wires);
    36.         this.wolf = this.add.image(7,this.wagon.y - 40,'wolf');//狼
    37.         this.wolf.y_ = this.wolf.y;
    38.         this.wolf.animations.add('walk', [4, 5, 6, 7], 3, true);
    39.         this.wolf.animations.add('attack', [0,1, 2, 3], 5, true);
    40.         this.attack = false;
    41.         this.wolf.animations.play('walk');
    42.         this.wolf.bulletSpeed = 60;//quicken 加快 更活跃
    43.         this.axe = this.add.image(0,0,'axe');//武器axe hp==1
    44.         this.axe.alpha = 0;
    45.         this.fork = this.add.image(0,0,'fork');//武器fork hp==2
    46.         this.fork.alpha = 0;
    47.         this.weapon = this.add.weapon(50,'axe');//武器  
    48.         //优化时 更换为group weapon.bullets 子弹行为
    49.         if (this.weapon.bullets.children[0].key=='axe') {//武器耐性
    50.             this.weapon.hp = 1;
    51.         }
    52.         if (this.weapon.bullets.children[0].key=='fork') {//值
    53.             this.weapon.hp = 3;
    54.         }
    55.         this.weapon.bulletKillType = Phaser.Weapon.KILL_WORLD_BOUNDS;
    56.         this.weapon.fireAngle = Phaser.ANGLE_RIGHT;
    57.         this.weapon.bulletAngleOffset = 90;
    58.         this.weapon.bulletSpeed = 400;
    59.         this.weapon.fireRate = 60;
    60.         this.weapon.trackSprite(this.wolf, this.wolf.width, this.wolf.height/1.3);
    61.         this.pigs = this.add.group();//猪
    62.         this.pigs.enableBody = true;
    63.         this.skills = this.add.group();//技能图标
    64.         for (var i = 0; i < 9; i++) {
    65.             let skillIcon = this.skills.create(0,0,'skills');
    66.             skillIcon.x = 13 + i * skillIcon.width + i * 13;
    67.             skillIcon.y = this.bg.height - 13 - skillIcon.height;
    68.             skillIcon.frame = i;
    69.             skillIcon.inputEnabled = true;
    70.             //   if (i>0) {skillIcon.alpha = 0;}
    71.         }
    72.         this.storm = this.add.group();//技能图标3 风暴 将敌人推出边界
    73.         this.storm.enableBody = true;
    74.         this.stone = this.add.group();//技能图标4 滚石 碾过敌人
    75.         this.stone.enableBody = true;
    76.         this.rattan = this.add.group();//技能图标5 藤曼 迟缓诅咒
    77.         this.rattan.enableBody = true;
    78.         this.ice = this.add.group();//技能图标6 冰冻 冻住敌人
    79.         this.ice.enableBody = true;
    80.         this.skills.getChildAt(0).events.onInputDown.add(function(){//技能图标1 道具 荆棘防御
    81.             this.wires.active = true;
    82.             game.add.tween(this.wires).to( { alpha: 1 }, 3000, "Linear", true)
    83.             .onComplete.add(function(){
    84.                 this.wires.act = true;
    85.             },this);
    86.             this.skillMask(this.skills.getChildAt(0),100000000);
    87.         }, this);
    88.         this.skills.getChildAt(1).events.onInputDown.add(function(){//技能图标2 武器 战斧
    89.             this.attack = true;
    90.             this.wolf.animations.play('attack');
    91.             this.weaponReplace(this.weapon,this.axe,this.fork,1);
    92.             this.skillMask(this.skills.getChildAt(1),1000000);
    93.         }, this);
    94.         this.skills.getChildAt(2).events.onInputDown.add(function(){//技能图标3 技能 风暴
    95.             if (this.energyEnabled == false) {
    96.                 return false;
    97.             }
    98.             this.energy.width -= (this.energy.sum * 3/100);
    99.             if (this.storm.length>0) {//风暴出界 风消云散
    100.                 for (var i = 0; i < this.storm.length; i++) {
    101.                     if (this.storm.getChildAt(i).x>this.game.world.width) {
    102.                         this.storm.getChildAt(i).destroy();
    103.                     }
    104.                 }
    105.             }
    106.             for (var i = 0; i < 6; i++) {//六个道路
    107.                 this.storm_ = this.storm.create(0,0,'storm');
    108.                 this.storm_.scale.set(2.5);
    109.                 this.storm_.x = this.underRails.width;
    110.                 this.storm_.y = 70 + i * 70;
    111.                 this.storm_.animations.add('storm',[0,1,2,3],5,true);
    112.                 this.storm_.animations.play('storm');
    113.                 this.storm_.body.velocity.x = 300;
    114.             }
    115.             this.skillMask(this.skills.getChildAt(2),3000);//3s
    116.         }, this);
    117.         this.skills.getChildAt(3).events.onInputDown.add(function(){//技能图标4 技能 滚石
    118.             this.iceTo = false;
    119.             if (this.energyEnabled == false) {
    120.                 return false;
    121.             }
    122.             this.energy.width -= (this.energy.sum * 1/10);
    123.             if (this.stone.length>0) {//滚石出界
    124.                 for (var i = 0; i < this.stone.length; i++) {
    125.                     if (this.stone.getChildAt(i).x>this.game.world.width) {
    126.                         this.stone.getChildAt(i).destroy();
    127.                     }
    128.                 }
    129.             }
    130.             for (var i = 0; i < 6; i++) {//六个道路
    131.                 this.stone_ = this.stone.create(0,0,'stone');
    132.                 this.stone_.scale.set(2);
    133.                 this.stone_.x = this.underRails.width + this.wires.width - this.stone_.width;
    134.                 this.stone_.y = i * 70;
    135.                 this.stone_.animations.add('stone',[0,1,2,3,4,5,6,7,8,9],5,true);
    136.                 this.stone_.animations.play('stone');
    137.                 this.stone_.body.velocity.x = 500;
    138.             }
    139.             this.skillMask(this.skills.getChildAt(3),10000);//10s
    140.         }, this);
    141.         this.skills.getChildAt(4).events.onInputDown.add(function(){//技能图标5 道具 藤曼 迟缓诅咒
    142.             if (this.energyEnabled == false) {
    143.                 return false;
    144.             }
    145.             this.energy.width -= (this.energy.sum * 1/20);
    146.             for (let i = 0; i < this.pigs.length; i++) {//生成敌人数目的藤曼
    147.                 this.rattan_ = this.rattan.create(0,0,'rattan');
    148.                 this.rattan_.scale.set(.5);
    149.                 this.rattan_.animations.add('rattan');
    150.                 this.rattan_.x = this.pigs.getChildAt(i).x - this.pigs.getChildAt(i).width/2;
    151.                 this.rattan_.y = this.pigs.getChildAt(i).y;
    152.                 this.pigs.getChildAt(i).body.velocity.x = -30;
    153.                 var that = this;
    154.                 this.rattan_.animations.play('rattan',5).onComplete.add(function(){
    155.                 //冻住敌人动画 完毕后解冻
    156.                     that.rattan.destroy();
    157.                     that.rattan = this.add.group();
    158.                     that.rattan.enableBody = true;
    159.                 }, this);
    160.             }
    161.             this.skillMask(this.skills.getChildAt(4),5000);//5s
    162.         }, this);
    163.         this.skills.getChildAt(5).events.onInputDown.add(function(){//技能图标6 技能 冰冻
    164.             if (this.iceTo==false) {
    165.                 return false;//是否可以使用ice 防止出错
    166.             }
    167.             if (this.energyEnabled == false) {
    168.                 return false;
    169.             }
    170.             this.energy.width -= (this.energy.sum * 1/20);
    171.             if (this.ice.length>0) {//冰柱消融
    172.                 this.ice.destroy();
    173.                 this.ice = this.add.group();
    174.                 this.ice.enableBody = true;
    175.             }
    176.             for (let i = 0; i < this.pigs.length; i++) {//生成敌人数目的冰柱
    177.                 if (this.pigs.getChildAt(i).active) {
    178.                     this.ice_ = this.ice.create(0,0,'ice');
    179.                     this.ice_.x = this.pigs.getChildAt(i).x - this.pigs.getChildAt(i).width/2;
    180.                     this.ice_.y = this.pigs.getChildAt(i).y;
    181.                     this.pigs.getChildAt(i).body.velocity.x = 0;
    182.                     this.pigs.getChildAt(i).animations.stop();
    183.                     this.pigs.getChildAt(i).ice = true;
    184.                     this.pigs.getChildAt(i).iceIndex = i;
    185.                     this.ice_.animations.add('ice',[0,1,2,3,4,5,6],3,false);
    186.                     var that = this;
    187.                     this.ice_.animations.play('ice').onComplete.add(function(){
    188.                     //冻住敌人动画 完毕后解冻
    189.                         if (that.pigs.getChildAt(i)) {
    190.                             that.ice.getChildAt(i).kill();
    191.                             that.pigs.getChildAt(i).ice = false;
    192.                             that.pigs.getChildAt(i).animations.play('walk');
    193.                             that.pigs.getChildAt(i).body.velocity.x = -100;
    194.                         }
    195.                     }, this);
    196.                 } else {
    197.                     continue;
    198.                 }
    199.             }
    200.             this.skillMask(this.skills.getChildAt(5),5000);//5s
    201.         }, this);
    202.         this.skills.getChildAt(6).events.onInputDown.add(function(){//技能图标7 技能 加速
    203.             if (this.energyEnabled == false) {
    204.                 return false;
    205.             }
    206.             this.energy.width -= (this.energy.sum * 1/10);
    207.             this.wolf.bulletSpeed = 30;
    208.             var that = this;
    209.             this.skillMask(this.skills.getChildAt(6),10000,function(){
    210.                 that.wolf.bulletSpeed = 60;
    211.             });
    212.         }, this);
    213.         this.skills.getChildAt(7).events.onInputDown.add(function(){//技能图标8 道具 三叶草 治愈
    214.             if (this.energyEnabled == false) {
    215.                 return false;
    216.             }
    217.             this.energy.width -= (this.energy.sum * 1/5);
    218.             this.skillMask(this.skills.getChildAt(7),12000);
    219.             this.restore = this.add.image(0,0,'restore');
    220.             this.restore.scale.set(3);
    221.             this.restore.animations.add('restore');
    222.             var that = this;
    223.             this.restore.animations.play('restore',3).onComplete.add(function(){
    224.                 that.restore.destroy();
    225.                 that.life.width = that.life.sum;
    226.             }, this);
    227.         }, this);
    228.         this.skills.getChildAt(8).events.onInputDown.add(function(){//技能图标9 武器 钢叉
    229.             if (this.energyEnabled == false) {
    230.                 return false;
    231.             }
    232.             this.energy.width -= (this.energy.sum * 15/100);
    233.             this.weaponReplace(this.weapon,this.axe,this.fork,2);
    234.             var that = this;
    235.             this.skillMask(this.skills.getChildAt(8),10000,function(){
    236.                 that.weaponReplace(that.weapon,that.axe,that.fork,1);
    237.             });
    238.         }, this);
    239.         ///
    240.         this.add.image(0,0,'life-bar');//血槽
    241.         this.life = this.add.image(0,0,'life-bar-filled');//血量
    242.         this.life.sum = this.life.width;
    243.         this.add.image(0,this.life.height,'energy-bar');//能量槽
    244.         this.energy = this.add.image(0,this.life.height,'energy-bar-filled');//能量
    245.         this.energy.sum = this.energy.width;
    246.         this.energyEnabled = true;
    247.         ///游戏进度条
    248.         this.progressBarBelow = this.add.image(0,0,'progress-bar-below');
    249.         this.progressBarOver = this.add.image(0,0,'progress-bar-over');
    250.         //   this.progressBarBelow.anchor.set(.5);
    251.         //   this.progressBarBelow.x = this.world.centerX;
    252.         //   this.progressBarBelow.y = this.progressBarBelow.height*1.7;
    253.         //   this.progressBarOver.x = this.progressBarBelow.x - this.progressBarOver.width/2;
    254.         //   this.progressBarOver.y = this.progressBarBelow.y - this.progressBarOver.height/2;
    255.         Phaser.Display.Align.In.TopRight(this.progressBarBelow, this.bg);
    256.         this.progressBarOver.x = this.progressBarBelow.x;
    257.         this.progressBarOver.sum = this.progressBarOver.width;
    258.         游戏关卡属性
    259.         this.enemyKey =  new Array('pig','ridding','granny','octocat');
    260.         //直接在生成敌人位置决定攻击动画 可以共用一个
    261.         this.enemyBulletKey = new Array('','pie','rock','fireball');
    262.         this.enemySpeed = new Array(-100,-150,-200,-250);
    263.         this.scoreLevel = new Array(10,30,50,100);
    264.         this.level = 0;
    265.         this.iceTo = true;
    266.         敌方子弹
    267.         this.enemyBullets = this.add.group();
    268.         this.enemyBullets.enableBody = true;
    269.         this.enemyBullets.setAll('outOfBoundsKill', true);
    270.         this.enemyBullets.setAll('checkWorldBounds', true);
    271.         敌方死亡溅血
    272.         this.bloods = this.add.group();
    273.         this.bloods.enableBody = true;
    274.         积分相关
    275.         this.goldCoin = this.add.group();
    276.         this.coins = this.add.image(0,0,'coins');
    277.         this.coins.x = 100;
    278.         this.number = game.add.retroFont('number', 20, 20, 
    279.         Phaser.RetroFont.TEXT_SET10, 20, 0, 0);///aaa2   a5 24 
    280.         a2== a22a==3223 b=4 c=5 de=67 fg = 89 h = 0 set10无前缀 a1~j0 set8无前缀12~01
    281.         this.imageFont = game.add.image(this.world.centerX/2, 49, this.number);
    282.         this.imageFont.anchor.set(.5,.3);
    283.         this.number.text = "";
    284.         this.number.score = '';
    285.         this.number.table = new Array('a','b','c','d','e','f','g','h','i','j');
    286.         this.score = 0;
    287.         this.displayScore();
    288.     }

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

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

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

  • 相关阅读:
    支持在代码编辑器中调试接口，IDEA插件推荐
    julia调用slurm进行多节点运行
    用于无功补偿的固定电容晶闸管控制反应器研究（Simulink）
    【VisualStudio 】VisualStudio2022 项目模板
    Python前景如何？有哪些就业方向？
    Python学习之CSDN21天学习挑战赛计划之10
    域控制器的深度详解！
    Matlab：测试空字符串和缺失值
    索尼RSV文件怎么恢复为MP4视频
    跟我学Python图像处理丨关于图像金字塔的图像向下取样和向上取样
  • 原文地址：https://blog.csdn.net/qq_16659821/article/details/132830106