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

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

新規登録して質問してみよう
ただいま回答率
85.35%
canvas

HTML5の<canvas>要素用のタグです。CanvasはHTML5から導入された、二次元の図形描写が可能な要素です。

JavaScript

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

Q&A

解決済

1回答

718閲覧

CANVASで2つの同じ色のブロックが乗った際に消す

OG.

総合スコア7

canvas

HTML5の<canvas>要素用のタグです。CanvasはHTML5から導入された、二次元の図形描写が可能な要素です。

JavaScript

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

0グッド

0クリップ

投稿2020/07/13 10:31

前提・実現したいこと

CANVAS APIについて勉強中です。
クリックしたy軸に合わせてランダムに作成された四角形が落下するものを作成しています。
パズルゲームのように、let colorsで指定した同じ配列の色のブロックが2つ乗った際に消えるものを実装したいと考えているのですが
参考資料だと落下するものの大きさ・場所がランダムではなく固定されてるものが多く煮詰まっているので、考え方等ご助力頂ければ幸いです。

該当のソースコード(今回の質問に必要そうな個所を記載)

Javascript

1 2 let canvas = $("maingame"); 3 let ctx = canvas.get(0).getContext("2d"); //決まり文句 4 5 let canvasWidth = canvas.width(); 6 let canvasHeight = canvas.height(); 7 8 let playGame; 9 10 let playAnimation = false; 11 12 let score = 0; 13 let koWidth = 80; 14 let koHeight = 100; 15 16 let colors = ["rgb(240,255,240)", "rgb(81, 102, 107)", "rgb(92, 66, 123)", "rgb(39, 125, 160)"]; 17 18 19 let title = $("#title"); 20 let startButton = $("#startAnimation"); 21 let gameover = $("#gameover"); 22 let restart = $("#restart"); 23 let titleback = $("#titleback"); 24 25 //抽象化 26 function Shape(x, y, width, height, gravity, boxColor) { 27 this.x = x; 28 this.y = y; 29 this.width = width; 30 this.height = height; 31 this.gravity = gravity; 32 this.boxColor = boxColor; 33 34 this.fixed = false; //静止の有無 35 }; 36 37 Shape.prototype.update = function (others) { 38 //地面の設定 39 let ground = { 40 x: 100, 41 y: canvasHeight - 50, 42 width: canvasWidth - 200, 43 height: 0 44 } 45 //地面に触れるor触れないの処理 46 if (!this.fixed && this.collision(ground)) { 47 this.y = canvasHeight - this.height - 50; 48 49 if ((this.y > koHeight && this.x > koWidth && this.x + this.height < 50 canvasWidth - 51 koWidth)) {//エリア内に全て入っていればOK 52 score++; 53 return this.fixed = true; 54 } else {//エリア外に触れてるのでgameover演出 55 gameover.show(); 56 restart.show(); 57 playAnimation = false; 58 59 restart.click(function (e) { 60 location.reload(); 61 }); 62 } 63 } 64 65 if (this.fixed) return; 66 67 others.some(other => { 68 //他のShapeとの衝突確認 69 if (other.fixed && other.collision(this)) { 70 this.y = other.y - this.height; 71 72 if (this.y > koHeight && this.x > koWidth && this.x + this.height < 73 canvasWidth - 74 koWidth) { 75 score++; 76 return this.fixed = true; 77 78 /*if () { 79 ここで同じ色が重なっているかの記述…? 80 }*/ 81 } else { 82 gameover.show(); 83 restart.show(); 84 playAnimation = false; //gameover演出 85 86 restart.click(function (e) { 87 location.reload(); 88 }); 89 } 90 } 91 }); 92 93 if (!this.fixed) { 94 this.y += this.gravity; 95 //1コマごとの変化の記述はここで 96 } 97 } 98 99 Shape.prototype.render = function (ctx) { 100 ctx.beginPath(); 101 ctx.fillStyle = this.boxColor; //物体の色、場所 102 ctx.rect(this.x, this.y, this.width, this.height); 103 ctx.fill(); 104 105 ctx.strokeStyle = "rgba(5, 5, 5, 0.9)"; 106 ctx.lineWidth = 1; 107 ctx.stroke(); 108 } 109 110 Shape.prototype.collision = function (shape) { 111 let rect1 = this, 112 rect2 = shape; 113 return rect1.x < rect2.x + rect2.width && 114 rect1.x + rect1.width > rect2.x && 115 rect1.y < rect2.y + rect2.height && 116 rect1.height + rect1.y > rect2.y; //衝突判定 117 } 118 /*ここから初期位置配置*/ 119 let shapes = new Array(); 120 121 function onClick() { //出現させるブロックの位置、大きさ、落ちる速度 122 let width = height = Math.floor(Math.random() * 80 + 30); 123 let x = event.clientX - blockP.offsetLeft - width / 2; 124 let y = 10; 125 let gravity = 5; 126 let boxColor = colors[Math.floor(Math.random() * colors.length)]; 127 128 shapes.push(new Shape(x, y, width, height, gravity, boxColor)); 129 } 130 131 shapes.addEventListener('click', onClick, false); 132 /*ここまで*/ 133 134 function animate() { 135 ctx.clearRect(0, 0, canvasWidth, canvasHeight); 136 ctx.drawImage(img, 100, 648, 400, 60); //土台 137 138 for (let shape of shapes) { 139 shape.update(shapes); 140 shape.render(ctx); 141 } 142 143 if (playAnimation === true) { 144 setTimeout(animate, 33); 145 }; 146 }; 147 148 animate(); 149

試したこと

2つの物体との衝突確認の際の分岐処理のところに追加するのかなとは考えています。
(this.boxColor === other.boxColor 等記述してみましたが、エラー起きず何も変わらず…といったところです)

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

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

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

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

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

guest

回答1

0

ベストアンサー

コメントで追記しようとしていた箇所は直前で return されているため、たどり着きません。
returnの前でcolorの比較をいれれば判定されるようになるかと。

投稿2020/07/13 12:10

Kaleidoscope

総合スコア257

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

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

OG.

2020/07/15 05:07

return文の記述を完全に見落としていました。 おかげで色の判定を実装に至りました。ありがとうございました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.35%

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

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

質問する

関連した質問