狼的传说小游戏

news2024/11/23 20:12:15

欢迎来到程序小院

狼的传说

玩法:
鼠标左键选择能防御、战斧、风暴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

#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();
    }

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

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

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1006584.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Redis 事务 - 监控测试

Redis 基本事务操作 Redis事务本质&#xff1a;一组命令的集合&#xff01;一个事务中的所有命令都会被序列化&#xff0c;在事务执行过程的中&#xff0c;会按照顺序执行&#xff01; Redis事务是一组Redis命令的有序集合&#xff0c;这些命令在事务中按照顺序执行&#xff0…

昆明草海隧道湿地公园,荻花盛开,又一个网红打卡地

昆明&#xff0c;这座美丽的城市&#xff0c;总是带给人们无尽的惊喜。其中&#xff0c;草海隧道湿地公园更是备受游客青睐。而如今&#xff0c;这里已经成为了一处网红打卡地&#xff0c;吸引了无数游客前来观赏。 一、网红打卡地&#xff0c;草海隧道湿地公园草海隧道湿地公园…

【IEEE会议征稿】第三届电子信息工程与计算机技术国际学术会议(EIECT 2023)

第三届电子信息工程与计算机技术国际学术会议&#xff08;EIECT 2023&#xff09; 2023 3rd International Conference on Electronic Information Engineering and Computer Technology 随着科学技术的高速发展&#xff0c;计算机技术革新日新月异&#xff0c;其智能化、网络…

三分钟教会你快速使用SpringBoot整合第三方登录

前言 在我们生活中无时无刻都在使用第三方登录&#xff0c;如QQ登录、微信登录等&#xff0c;今天教你如何快速使用springboot整合第三方登录&#xff0c;下面教程以Gitee为例 1. 我们借助JustAuth组件来完成第三方登录 Justauth官网&#xff1a;https://www.justauth.cn/ …

数据在内存中的存储——练习3

题目&#xff1a; 3.1 #include <stdio.h> int main() {char a -128;printf("%u\n",a);return 0; }3.2 #include <stdio.h> int main() {char a 128;printf("%u\n",a);return 0; }思路分析&#xff1a; 首先二者极其相似%u是无符号格式进行…

Callable 和 FutureTask 带返回值线程使用和源码分析

Callable 和 FutureTask 可以创建带返回值的线程&#xff0c;那它是怎么实现的呢&#xff1f;笔者下面分析&#xff0c;先看看它是怎么使用的 1、Callable FutureTask使用 新建 Name类&#xff0c;实现 Callable 接口&#xff0c;返回 String 类型值 package com.wsjzzcbq.ja…

骨传导耳机危害有哪些?值得入手吗?

事实上&#xff0c;只要是正常使用&#xff0c;骨传导耳机并不会对身体造成伤害&#xff0c;并且在众多耳机种类中&#xff0c;骨传导耳机可以说是相对健康的一种耳机&#xff0c;这种耳机最独特的地方便是声波不经过外耳道和鼓膜&#xff0c; 而是直接将人体骨骼结构作为传声介…

时间序列预测系列之循环神经网络

文章目录 1.前言2.RNN基础组件1.RNN2.LSTM3.GRU4.FC-LSTM5.ConvLSTM6.CNN-LSTM 1.前言 循环神经网络&#xff08;Recurrent Neural Network&#xff0c;简称RNN&#xff09;是一类在处理序列数据和时间序列数据时非常有用的神经网络架构。RNN的主要特点是它们具有循环连接&…

QT网页 webengine / CEF

QT WebEngine 官方文档 WebEngine 架构&#xff1a; 能看到 WebEngine 有一个核心模块是基于 Chromium 构造的&#xff0c;通过使用 Chromium 的Blink渲染引擎和V8 JavaScript引擎来处理和渲染Web内容&#xff0c;并将这些底层技术封装为一系列高级的C类和接口&#xff0c;以…

JVM基础-Hotspot VM相关知识学习

这里写目录标题 jdkJVM虚拟机类类的生命周期类加载的时机类的双亲委派机制类的验证 java对象Mark WordKlass Pointer实例数据对齐数据 字符串常量池垃圾收集器1.Serial收集器&#xff08;串行收集器&#xff09;cms垃圾算法G1垃圾收集器与CMS收集器相比, G1收集器的优势:G1收集…

开利网络到访东家集团,沟通招商加盟数字化机制落地事项

近日&#xff0c;开利网络到访东家集团&#xff0c;就集团近日开展的奖金池激励制度的推进情况和市场反馈进行复盘与沟通。通过打破“层层中间商”&#xff0c;提供厂家直供价格的方式&#xff0c;东家集团推出了数字化激励机制&#xff0c;消费集团会员礼包即可在会员专区进行…

Layui快速入门之第五节 导航

目录 一&#xff1a;基本概念 导航依赖element模块 API 渲染 属性 事件 二&#xff1a;水平导航 常规用法&#xff1a; 三&#xff1a;垂直导航 四&#xff1a;侧边垂直导航 五&#xff1a;导航主题 六&#xff1a;加入徽章等元素 七&#xff1a;面包屑导航 ps&a…

大学经典题目:Java输出杨辉三角形

本节利用​ 过 Java 语 ​言中的流程控制语句&#xff0c;如条件语句、循环语句和跳转语句等知识输出一个指定行数的杨辉三角形。 杨辉三角形由数字进行排列&#xff0c;可以把它看作是一个数字表&#xff0c;其基本特性是两侧数值均为 1&#xff0c;其他位置的数值是其左上方数…

Kettle——大数据ETL工具

文章目录 ETL一、Kettle二、安装和运行Kettle三、Kettle使用四、Kettle核心概念可视化转换步骤跳 ETL ETL(Extract-Transform-Load&#xff0c;即数据抽取、转换、转载)&#xff0c;对于企业或行业应用来说&#xff0c;我们经常会遇到各种数据的处理&#xff0c;转换&#xff…

【操作系统】进程的概念、组成、特征

概念组成 程序&#xff1a;静态的放在磁盘&#xff08;外存&#xff09;里的可执行文件&#xff08;代码&#xff09; 作业&#xff1a;代码&#xff0b;数据&#xff0b;申请&#xff08;JCB&#xff09;&#xff08;外存&#xff09; 进程&#xff1a;程序的一次执行过程。 …

5. 自动求导

5.1 向量链式法则 ① 例子1是一个线性回归的例子&#xff0c;如下图所示。 5.2 自动求导 5.3 计算图 5.4 两种模型 ① b是之前计算的结果&#xff0c;是一个已知的值。 5.5 复杂度 5.6 自动求导 import torch x torch.arange(4.0) x 结果&#xff1a; ② 在外面计算y关于x的…

linux 用户、组操作

一、创建用户并设置密码 #创建用户 duoergun useradd duoergun #设置用户 duoergun 密码 passwd duoergun二、创建组 #创建组 qingdynasty groupadd qingdynasty三、用户添加到组&#xff0c;用户从组删除 #添加用户duoergun到组qingdynasty usermod -aG qingdynasty duoer…

【CSS】React项目如何在CSS样式文件中使用变量

需求 在修改样式时候&#xff0c;需要根据不同条件&#xff0c;使用不同的样式&#xff0c;使用动态类需要多重判断&#xff0c;是否考虑使用变量传入的方式呢 应该怎么做 tsx import ./App.css; import ./test.cssfunction App() {const styles {--var: white,};return (…

20230912java面经整理

1.gc算法有哪些 引用计数&#xff08;循环引用&#xff09;和可达性分析找到无用的对象 标记-清除&#xff1a;简单&#xff0c;内存碎片&#xff0c;大对象找不到空间 标记-复制&#xff1a;分成两半&#xff0c;清理一半&#xff0c;没有碎片&#xff0c;如果存活多效率低&a…

Bigemap 在土地图利用环境生态行业中的应用

工具 Bigemap gis office地图软件 BIGEMAP GIS Office-全能版 Bigemap APP_卫星地图APP_高清卫星地图APP Bigemap 在土地图利用环境生态行业中的应用  使用场景 &#xff1a; 1. 土地利用占地管理&#xff1a; 核对数据&#xff0c;查看企业的实际占地是否超出宗地&…