質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.47%
スクロール

スクロールとは、ディスプレイスクリーン上において連続的にコンテンツが滑っていくことを指します。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

0回答

1561閲覧

js (p5.js)シューティングゲーム 画面がスクロールするように

maedama05

総合スコア0

スクロール

スクロールとは、ディスプレイスクリーン上において連続的にコンテンツが滑っていくことを指します。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2021/03/30 03:55

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.47%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問