JavaScriptでシューティングゲームを作成しています。
p5.jsライブラリを使用しています。
canvasにプレイヤーを表示させ、キー操作によってプレイヤーを動かし、
敵に当たる・もしくはプレイヤーからのミサイルが敵に当たると敵が破壊されるところまでは実装済みです。
実現したいこと--------------------
画面がスクロールし敵が動くように変更したい
いろいろと他のシューティングゲームの作成方法などを見ても、思うようにいかずご教示お願いいたします。
//戦闘機のスプライト var fighter; //戦闘機の画像 var fighterImage; //ブロックのスプライト var block; //ブロックのアニメーション var breakAnimation; //ブロックのグループ var blockGroup; //ミサイルの画像 var star; //ミサイルのクールタイム var counter = 0; //ミサイルのスプライト var missile; var blockImage; ////////////////////////// function preload(){ fighterImage = loadImage('img/Non.png'); //アニメーションの読み込み blockImage = loadImage('img/block.png'); breakAnimation = loadAnimation('img/block01.png','img/block05.png'); // breakAnimationはループしない breakAnimation.looping = false; missileImage = loadImage('img/star.png'); } function setup(){ //横650縦600のキャンバスを作る createCanvas(650,600); fighter = createSprite(300, 300); fighter.addImage(fighterImage); fighter.scale = 0.2; blockGroup = new Group(); for(var i = 0; i < 5; i++){ var x = random(10, 650); var y = random(10, 600); var block = createSprite(x, y); //ブロックをスプライトにつける block.addImage(blockImage); //大きさの調整 block.scale = 0.3; blockGroup.add(block); } } function draw() { //キャンバスを塗りつぶす background(0); //スプライトを表示させる drawSprites(); //戦闘機の操作 fighterControl(); //ブロックと衝突したら fighter.overlap(blockGroup,blockBreak); } // 戦闘機のコントロール function fighterControl(){ if(keyDown('RIGHT')){ //右矢印 //速度を10にする fighter.position.x += 10; }else if(keyDown('LEFT')){ //左矢印 //速度を-10にする fighter.position.x += -10; }else if(keyDown('UP')){ //上矢印 fighter.position.y += -10; }else if(keyDown('DOWN')){//下矢印 fighter.position.y += 10; } if(fighter.position.x > width- 30){ fighter.position.x = width-30 ; } else if(fighter.position.x < 30){ fighter.position.x = 30; } if(fighter.position.y > height- 30){ fighter.position.y = height-30 ; } else if(fighter.position.y < 30){ fighter.position.y = 30; } if(keyDown('SPACE')){ //スペースキーを押したとき //カウンターが0なら打つ if(counter == 0){ missile = createSprite(fighter.position.x, fighter.position.y-50); missile.addImage(missileImage); missile.scale = 0.2; missile.velocity.y = fighter.velocity.y - 10; //カウンターを30にする counter = 7; } } if(counter > 0){ counter--; } // 1発でも打てばnullでなくなる if(missile != null){ missile.overlap(blockGroup, missileAttack); } } //ブロックとの衝突処理 function blockBreak(fighter,block){ //壊れるブロックのスプライトを作る var breakBlock = createSprite(block.position.x, block.position.y); //アニメーションを読み込む breakBlock.addAnimation('break',breakAnimation); breakBlock.scale = 0.2; //blockスプライトを消す block.remove(); } // ミサイルとブロックの衝突処理 function missileAttack(missile, block){ missile.remove(); //ブロックの破壊 blockBreak(missile, block); }
あなたの回答
tips
プレビュー