（JavaScript）如何在phaser 3中将图像定义为变量
在我的Phaser游戏中，我将箭头定义为if语句中带有“let”关键字的变量。我通过将它们显示为精灵来实现这一点。然而，我需要在箭射中目标后展示奖牌。我还希望奖牌显示在前一枚奖牌右侧30像素，当然是从第一枚奖牌开始。做这一切最好的方法是什么（JavaScript）如何在phaser 3中将图像定义为变量,javascript,optimization,phaser-framework,Javascript,Optimization,Phaser Framework,在我的Phaser游戏中，我将箭头定义为if语句中带有“let”关键字的变量。我通过将它们显示为精灵来实现这一点。然而，我需要在箭射中目标后展示奖牌。我还希望奖牌显示在前一枚奖牌右侧30像素，当然是从第一枚奖牌开始。做这一切最好的方法是什么 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Video Game</t
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Video Game</title>
<script src="//cdn.jsdelivr.net/npm/phaser@3.11.0/dist/phaser.js"></script>
<style type="text/css">
body {
margin: 0;
}
</style>
</head>
<body>
<script type="text/javascript">
//Configurations for the physics engine
var physicsConfig = {
default: 'arcade',
arcade: {
debug: false //CHANGE THIS TO TRUE TO SEE LINES
}
}
//Configurations for the game itself
var config = {
type: Phaser.AUTO,
width: 800,
height: 600,
physics: physicsConfig,
scene: {
preload: preload,
create: create,
update: update,
render: render
}
};
//Start the game
var game = new Phaser.Game(config);
function preload ()
{
//Images
this.load.image('sky', 'assets/images/sky.png');
this.load.image('target', 'assets/images/target.png');
this.load.image('ground', 'assets/images/ground.png');
this.load.image('arrow', 'assets/images/arrow.png');
this.load.image('gold_medal', 'assets/images/goldmedal.png');
this.load.image('silver_medal', 'assets/images/silvermedal.png');
this.load.image('bronze_medal', 'assets/images/bronzemedal.png');
//Spritesheets
this.load.spritesheet('archer', 'assets/spritesheets/archer_sprites.png', {frameWidth: 128, frameHeight: 128});
this.load.spritesheet('rings', 'assets/spritesheets/rings_sprite.png', {frameWidth: 320, frameHeight: 320});
//Audio
this.load.audio('arrow_shot', 'assets/sounds/arrow_shooting.mp3');
}
function create ()
{
//Load all the images that won't move
this.add.image(400, 300, 'sky');
this.add.image(210, 200, 'ground');
//Create the archer/player
this.player = this.physics.add.sprite(100, 410, 'archer');
this.player.setBounce(0.2);
this.player.setCollideWorldBounds(true);
//Shooting animation
this.anims.create({
key: 'shoot',
frames: this.anims.generateFrameNumbers('archer', {start : 0, end: 4}),
frameRate: 20,
repeat: 0
});
//Rings animation
this.anims.create({
key: 'rings_anim',
frames: this.anims.generateFrameNumbers('rings', {start : 0, end : 69}),
frameRate: 10,
repeat: 0
})
//Play the animation on start
this.rings = this.physics.add.sprite(300, 40, 'rings');
this.rings.anims.play('rings_anim', true);
//Create the target
this.target = this.physics.add.sprite(530, 365, 'target');
this.target.setSize(115, 95).setOffset(70, 130); //TARGET HITBOX
this.target.enableBody = true;
this.target.setImmovable();
//Create an array for arrows for later
this.arrows = [];
//Create an array for medals for later
this.medals = [];
//Get keypresses
this.cursors = this.input.keyboard.createCursorKeys();
//Assign input for spacebar
this.spacebar = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.SPACE);
//Play sound when the arrow is shot
this.arrowSound = this.sound.add('arrow_shot');
//Make the arrows collide with the target
this.physics.add.collider(this.arrows, this.target)
}
function update ()
{
//Declare constants for movement
const playerMoveAmt = 200;
const arrowMoveAmt = 1500;
this.player.setDrag(2000);
//Rotation of the player
if (this.cursors.up.isDown && this.player.angle > -45) {
this.player.angle -= 1;}
if (this.cursors.down.isDown && this.player.angle < 0) {
this.player.angle += 1;}
//Shooting with the spacebar
if (Phaser.Input.Keyboard.JustDown(this.spacebar)) {
//Animate the shooting
this.player.anims.play('shoot', true);
//Arrow shooting
let arrow = this.physics.add.sprite(this.player.x, (this.player.y + 20), 'arrow');
arrow.enableBody = true;
arrow.body.immovable = false;
//Edit arrow hitbox
arrow.setSize(50, 15).setOffset(5, 50);
arrow.setGravityY(3600); //Gravity will affect the arrows
//Arrow speeds
arrow.setVelocityX(arrowMoveAmt);
arrow.setVelocityY((this.player.angle * 50));
this.arrows.push(arrow); //Add arrow to the arrow created earlier
this.arrowSound.play(); //Play the sound
}
else if(this.target.body.touching.left) {
//Loop to create multiple arrows
for (i = 0; i < this.arrows.length; i += 1) {
newarrows = this.arrows[i];
newarrows.setGravityY(0);
newarrows.setVelocityX(0);
newarrows.setVelocityY(0);
//Reset the player angle for difficulty
this.player.angle = 0;
//Gold medal
if (410 < newarrows.y && newarrows.y < 435) {
let goldMedal = this.add.image(300, 200, 'gold_medal');
goldMedal;
}
//Silver medal
else if (395 < newarrows.y && newarrows.y < 450) {
this.add.image(300, 200, 'silver_medal');
}
//Bronze medal
else if (380 < newarrows.y && newarrows.y < 460) {
this.add.image(300, 200, 'bronze_medal');
}
}
}
}
function render() {
}
</script>
</body>
</html>
电子游戏
身体{
保证金：0；
}
//物理引擎的配置
var physicconfig={
默认值：“arcade”，
拱廊：{
debug:false//将其更改为TRUE以查看行
}
}
//游戏本身的配置
变量配置={
类型：Phaser.AUTO，
宽度：800，
身高：600，
物理：物理配置，
场景：{
预加载：预加载，
创建：创建，
更新：更新，
渲染：渲染
}
};
//开始比赛
var game=new Phaser.game（配置）；
函数预加载（）
{
//图像
this.load.image（'sky'，'assets/images/sky.png'）；
this.load.image（'target'，'assets/images/target.png'）；
this.load.image（'ground'，'assets/images/ground.png'）；
this.load.image（'arrow'，'assets/images/arrow.png'）；
this.load.image（'gold_-emdal'，'assets/images/goldmedal.png'）；
this.load.image（'silver_-emdal'，'assets/images/silvermedal.png'）；
this.load.image（'brown_mendal'，'assets/images/bronzemedal.png'）；
//精灵表
this.load.spritesheet（'archer'，'assets/spritesheets/archer_sprites.png'，{frameWidth:128，frameHeight:128}）；
this.load.spritesheet（'rings'，'assets/spritesheets/rings_sprite.png'，{frameWidth:320，frameHeight:320}）；
//音频
这个.load.audio（'arrow_shot'，'assets/sounds/arrow_shoting.mp3'）；
}
函数创建（）
{
//加载所有无法移动的图像
这个.add.image（400300，'sky'）；
这个.add.image（210200，'ground'）；
//创建弓箭手/玩家
this.player=this.physics.add.sprite（100410，'archer'）；
本.玩家.挫折盎司（0.2）；
this.player.setCollizeWorldBounds（true）；
//拍摄动画
这个。动画。创造({
关键：“投篮”，
帧：this.anims.generateFrameNumbers（'archer'，{start:0，end:4}），
帧率：20，
重复：0
});
//环动画
这个。动画。创造({
钥匙：“戒指”\u anim'，
帧：this.anims.generateFrameNumbers（'rings'，{start:0，end:69}），
帧率：10，
重复：0
})
//开始时播放动画
this.rings=this.physics.add.sprite（300,40，'rings'）；
这个.rings.anims.play（'rings\u anim'，true）；
//创建目标
this.target=this.physics.add.sprite（530365，'target'）；
this.target.setSize（115,95）.setOffset（70130）；//目标HITBOX
this.target.enableBody=true；
this.target.setImmovable（）；
//为箭头创建一个数组，以便以后使用
此参数为.arrows=[]；
//为奖牌创建一个阵列，供以后使用
此参数为[]；
//得到按键
this.cursors=this.input.keyboard.CreateCursorWorkeys（）；
//为空格键指定输入
this.spacebar=this.input.keyboard.addKey（Phaser.input.keyboard.KeyCodes.SPACE）；
//射箭时播放声音
this.arrowSound=this.sound.add（'arrow_shot'）；
//使箭头与目标碰撞
this.physics.add.collider（this.arrows，this.target）
}
函数更新（）
{
//声明用于移动的常量
常数playermovamt=200；
常数=1500；
this.player.setDrag（2000）；
//球员的轮换
if（this.cursors.up.isDown&&this.player.angle>-45）{
this.player.angle-=1；}
if（this.cursors.down.isDown&&this.player.angle<0）{
this.player.angle+=1；}
//用空格键射击
if（移相器.输入.键盘.JustDown（这个.空格键））{
//拍摄动画
这个.player.anims.play（'shoot'，true）；
//射箭
设arrow=this.physics.add.sprite（this.player.x，（this.player.y+20），'arrow'）；
arrow.enableBody=true；
arrow.body.immoved=false；
//编辑箭头点击框
箭头。设置大小（50，15）。设置偏移（5，50）；
arrow.setGravityY（3600）；//重力会影响箭头
//箭速
arrow.setVelocityX（arrowMoveAmt）；
arrow.setVelocityY（（this.player.angle*50））；
this.arrows.push（arrow）；//将箭头添加到先前创建的箭头中
this.arrowSound.play（）；//播放声音
}
else if（this.target.body.topping.left）{
//循环以创建多个箭头
对于（i=0；ifunction update ()
{
//Declare constants for movement
const playerMoveAmt = 200;
const arrowMoveAmt = 1500;
this.player.setDrag(2000);
//Rotation of the player
if (this.cursors.up.isDown && this.player.angle > -45) {
this.player.angle -= 1;}
if (this.cursors.down.isDown && this.player.angle < 0) {
this.player.angle += 1;}
//Shooting with the spacebar
if (Phaser.Input.Keyboard.JustDown(this.spacebar)) {
//Animate the shooting
this.player.anims.play('shoot', true);
//Arrow shooting
let arrow = this.physics.add.sprite(this.player.x, (this.player.y + 20), 'arrow');
arrow.enableBody = true;
arrow.body.immovable = false;
//Edit arrow hitbox
arrow.setSize(50, 15).setOffset(5, 50);
arrow.setGravityY(3600); //Gravity will affect the arrows
//Arrow speeds
arrow.setVelocityX(arrowMoveAmt);
arrow.setVelocityY((this.player.angle * 50));
this.arrows.push(arrow); //Add arrow to the arrow created earlier
this.arrowSound.play(); //Play the sound
}
else if(this.target.body.touching.left) {
let i = 0;
// Set initial horizontal position of new medals
let arrowOnTargetPositionX = 200;
//Loop to create multiple arrows
while (i < this.arrows.length) {
newArrows = this.arrows[i];
newArrows.setGravityY(0);
newArrows.setVelocityX(0);
newArrows.setVelocityY(0);
// Add 30 to new medals horizontal position
arrowOnTargetPositionX = arrowOnTargetPositionX + 30;
// Calls the function to get medal & passed the variable as an argument
getMedal(arrowOnTargetPositionX);
i++;
}
}
// function to get different medals
getMedal = (value) => {
//Gold medal
if (410 < newArrows.y && newArrows.y < 435) {
this.add.image(value, 180, 'gold_medal');
}
//Silver medal
else if (395 < newArrows.y && newArrows.y < 450) {
this.add.image(value, 250, 'silver_medal');
}
//Bronze medal
else if (380 < newArrows.y && newArrows.y < 460) {
this.add.image(value, 320, 'bronze_medal');
}
}
}
//Loop to create multiple arrows
while (i < this.arrows.length) {
newArrows = this.arrows[i];
newArrows.setGravityY(0);
newArrows.setVelocityX(0);
newArrows.setVelocityY(0);
// Add 30 to new medals horizontal position
arrowOnTargetPositionX = arrowOnTargetPositionX + 30;
if(this.arrows.length <= 5) {
// Calls the function to get medal & passed the variable as an argument
getMedal(arrowOnTargetPositionX);
}
i++;
}