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

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

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

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

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

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

Q&A

0回答

1405閲覧

パ●ドラ風ゲームでバグが発生する

nosonosolife

総合スコア42

canvas

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

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

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

0グッド

1クリップ

投稿2020/05/10 14:00

このページを参考にしてパ●ドラ風のマッチ3ゲームを制作しているのですが、ときどき以下のバグが発生します
・絵柄を3つそろえると、通常は次の絵柄が表示されるはずが何も表示されない
・一部の絵柄が移動できなくなる

原因は何でしょうか。ご提示よろしくお願いいたします。

html

1<section id="gamemaincontent"> 2 <canvas id="main"> 3 </canvas> 4 <script src="main.js"></script> 5</section>

javascript

1// 定数定義 2var FPS = 60; 3var SCREEN_WIDTH = 420; 4var SCREEN_HEIGHT = 580; 5 6//変数定義------------------------------------------------------------ 7var screenRate = 1; 8var gameFrame = 0; 9var oldTime = 0; 10var delta = 0; 11var lastTimeStamp = 0; 12var frameTime = 1 / FPS; 13 14var iconArray = { 15 x: 20.5, 16 y: 54, 17 columns: 6, 18 rows: 6, 19 iconWidth: 54, 20 iconHeight: 54, 21 iconMargin:11, 22 iconColorNum: 10, 23 icons: [], 24 selectedIcon: { column: -1, row: -1 } 25}; 26var matchs = []; 27 28var buttons = []; 29 30var playBtn; 31 32var mouseX; 33var mouseY; 34var dragFlg; 35 36var loadCount = 0; 37var image = new Array(); 38var imageSrc = [ 39 "assets/mainbg.png", 40 "assets/icons.png", 41 "assets/virus.png" 42]; 43var loadTotal = parseInt(imageSrc.length); 44 45screenRate = Math.min(window.innerWidth/SCREEN_WIDTH, window.innerHeight/SCREEN_HEIGHT); 46var canvas = document.getElementById('main'); 47canvas.width = SCREEN_WIDTH; 48canvas.height = SCREEN_HEIGHT; 49canvas.style.width = '100%'; 50canvas.style.height = '100%'; 51var ctx = canvas.getContext('2d'); 52requestAnimationFrame = (function() { 53 return window.requestAnimationFrame || window.webkitRequestAnimationFrame || 54 window.mozRequestAnimationFrame || window.oRequestAnimationFrame || 55 window.msRequestAnimationFrame || function(callback) { 56 window.setTimeout(callback, 1000 / FPS); 57 }; 58})(); 59 60var click_touchstart = window.ontouchstart===null?"touchstart":"click"; 61var click_touchend = window.ontouchend===null?"touchend":"click"; 62 63function gameResize() { 64 screenRate = Math.min(window.innerWidth/SCREEN_WIDTH, window.innerHeight/SCREEN_HEIGHT); 65 canvas.style.width = SCREEN_WIDTH*screenRate+'px'; 66 canvas.style.height = SCREEN_HEIGHT*screenRate+'px'; 67} 68 69function gameLoading() { 70 for (var i in imageSrc) { 71 image[i] = new Image(); 72 image[i].addEventListener('load', function() { 73 gameLoadCount(); 74 }); 75 image[i].src = imageSrc[i]; 76 } 77} 78 79function gameLoadCount() { 80 if(loadCount < loadTotal){ 81 loadCount++; 82 loadBarDraw(); 83 if(loadCount == loadTotal){ 84 //gameMode = "TITLE"; 85 gameMode = "INIT"; 86 mainLoop(); 87 } 88 } 89} 90 91function loadBarDraw() { 92 var barBWidth = 250; 93 var barBHeight = 35; 94 var barWidth = ((loadCount / loadTotal) * barBWidth); 95 var barHeight = barBHeight; 96 var barBX = Math.floor(canvas.width - barBWidth) / 2; 97 var barBY = Math.floor(canvas.height - barBHeight) / 2; 98 var barX = barBX - (barBWidth/2) + (barBWidth/2); 99 var barY = barBY; 100 101 ctx.strokeStyle = "#ffffff"; 102 ctx.lineWidth = 5; 103 ctx.strokeRect(barBX, barBY, barBWidth, barBHeight); 104 ctx.fillStyle = "#ffffff"; 105 ctx.fillRect(barX, barY, barWidth, barHeight) 106} 107 108function mainLoop() { //メインループ処理 109 var t = new Date().getTime(); 110 if (lastTimeStamp > 0) { 111 delta = (t - lastTimeStamp) / 1000; 112 } 113 lastTimeStamp = t; 114 gameFrame++; 115 if (delta <= frameTime) { 116 requestAnimationFrame(mainLoop); 117 return; 118 } 119 120 switch (gameMode) { 121 case "INIT": 122 gameLevelSelect(); 123 break; 124 case "MAIN": 125 gameMain(); 126 break; 127 } 128 129 requestAnimationFrame(function() { 130 mainLoop(); 131 }); 132} 133 134function gameInit() { 135 fieldInit(); 136 gameMode = "MAIN"; 137} 138 139function gameMain() { 140 icons.Render(); 141 for (var i=0; i<iconArray.columns; i++) { 142 for (var j=0; j<iconArray.rows; j++) { 143 if(i != iconArray.selectedIcon.column || j != iconArray.selectedIcon.row){ 144 icons.Draw(iconArray.icons[i][j].x, iconArray.icons[i][j].y, i, j); 145 } 146 } 147 } 148 149 canvas.addEventListener('mousedown', function(e){iconMouseDown(e);}, false); 150 iconMouseMove(); 151 canvas.addEventListener('mouseup', function(e){iconMouseUp(e);}, false); 152} 153 154var icons = (function () { 155 return { 156 Render: function() { 157 for (var i=0; i<iconArray.columns; i++) { 158 for (var j=0; j<iconArray.rows; j++) { 159 if (iconArray.icons[i][j].color >= 0) { 160 iconArray.icons[i][j].x = ((iconArray.iconWidth+iconArray.iconMargin) * i) + iconArray.x; 161 iconArray.icons[i][j].y = ((iconArray.iconHeight+iconArray.iconMargin) * j) + iconArray.y; 162 } 163 } 164 } 165 }, 166 Draw: function(x, y, i, j) { 167 var iconImage = iconArray.icons[i][j].virus ? image[2] : image[1]; 168 ctx.drawImage(iconImage, iconArray.iconWidth * iconArray.icons[i][j].color, 0, iconArray.iconWidth, iconArray.iconHeight, x, y, iconArray.iconWidth, iconArray.iconHeight); 169 } 170 }; 171}()); 172 173function fieldInit() { 174 for (var i=0; i<iconArray.columns; i++) { 175 iconArray.icons[i] = []; 176 for (var j=0; j<iconArray.rows; j++) { 177 iconArray.icons[i][j] = { color: 0, virus:0, x:0, y:0, shift:0} 178 179 var rand = Math.floor(Math.random() * iconArray.iconColorNum); 180 iconArray.icons[i][j].color = rand; 181 182 iconArray.icons[i][j].virus = false; 183 184 if(Math.random() < (1/2)){ 185 iconArray.icons[i][j].virus = true; 186 } 187 188 if(i == iconArray.columns-1 && j == iconArray.rows-1){ 189 matchResolve(); 190 } 191 } 192 } 193} 194 195function matchResolve() { 196 iconMatchCheck(); 197 198 while (matchs.length > 0) { 199 200 iconDelete(); 201 202 iconShift(); 203 204 iconMatchCheck(); 205 } 206} 207 208 209function iconMatchCheck(){ 210 matchs = []; 211 var checkFlg = false; 212 var lineCnt = 0; 213 for (var j = 0; j < iconArray.rows; j++) { 214 for (var i = 0; i < iconArray.columns; i++) { 215 checkFlg = false; 216 217 if (i == iconArray.columns-1) { 218 checkFlg = true; 219 }else{ 220 if (iconArray.icons[i][j].color == iconArray.icons[i+1][j].color && iconArray.icons[i][j].color != -1) { 221 lineCnt++; 222 }else{ 223 checkFlg = true; 224 } 225 } 226 227 if (checkFlg) { 228 if (lineCnt >= 3) { 229 matchs.push({ column: i+1-lineCnt, row:j, length: lineCnt, horizontal: true }); 230 } 231 232 lineCnt = 1; 233 } 234 } 235 } 236 for (var i = 0; i < iconArray.columns; i++) { 237 for (var j = 0; j < iconArray.rows; j++) { 238 checkFlg = false; 239 240 if (j == iconArray.rows-1) { 241 checkFlg = true; 242 }else{ 243 if (iconArray.icons[i][j].color == iconArray.icons[i][j+1].color && iconArray.icons[i][j].color != -1) { 244 lineCnt++; 245 }else{ 246 checkFlg = true; 247 } 248 } 249 250 if (checkFlg) { 251 if (lineCnt >= 3) { 252 matchs.push({ column: i, row:j+1-lineCnt, length: lineCnt, horizontal: false }); 253 } 254 255 lineCnt = 1; 256 } 257 } 258 } 259} 260 261function loopMatchs(func) { 262 for (var i=0; i<matchs.length; i++) { 263 var match = matchs[i]; 264 var coffset = 0; 265 var roffset = 0; 266 for (var j=0; j<match.length; j++) { 267 func(i, match.column+coffset, match.row+roffset); 268 269 if (match.horizontal) { 270 coffset++; 271 } else { 272 roffset++; 273 } 274 } 275 } 276} 277 278function iconDelete(){ 279 loopMatchs(function(index, column, row) { 280 iconArray.icons[column][row].color = -1; 281 iconArray.icons[column][row].virus = false; 282 }); 283} 284 285function iconShift() { 286 for (var i=0; i<iconArray.columns-1; i++) { 287 for (var j=iconArray.rows-1; j>=0; j--) { 288 if (iconArray.icons[i][j].color == -1) { 289 var rand = Math.floor(Math.random() * iconArray.iconColorNum); 290 iconArray.icons[i][j].color = rand; 291 } 292 } 293 } 294} 295 296function iconSwap(x1, y1, x2, y2) { 297 var swapIcon = iconArray.icons[x1][y1]; 298 iconArray.icons[x1][y1] = []; 299 iconArray.icons[x1][y1] = iconArray.icons[x2][y2]; 300 iconArray.icons[x2][y2] = []; 301 iconArray.icons[x2][y2] = swapIcon; 302} 303 304function iconMouseDown(e) { 305 var rect = e.target.getBoundingClientRect(); 306 if('ontouchend' in document){ 307 var touch = e.touches[0] || e.changedTouches[0]; 308 mouseX = (touch.clientX - rect.left)/screenRate; 309 mouseY = (touch.clientY - rect.top)/screenRate; 310 }else{ 311 mouseX = (e.clientX - rect.left)/screenRate; 312 mouseY = (e.clientY - rect.top)/screenRate; 313 } 314 315 var ix = Math.floor((mouseX - iconArray.x) / iconArray.iconWidth); 316 var iy = Math.floor((mouseY - iconArray.y) / iconArray.iconHeight); 317 if (ix >= 0 && ix < iconArray.columns && iy >= 0 && iy < iconArray.rows){ 318 319 iconArray.selectedIcon.column = ix; 320 iconArray.selectedIcon.row = iy; 321 dragFlg = true; 322 } 323} 324function iconMouseMove() { 325 canvas.addEventListener("mousemove", function(e){ 326 var rect = e.target.getBoundingClientRect(); 327 if('ontouchend' in document){ 328 var touch = e.touches[0] || e.changedTouches[0]; 329 mouseX = (touch.clientX - rect.left)/screenRate; 330 mouseY = (touch.clientY - rect.top)/screenRate; 331 }else{ 332 mouseX = (e.clientX - rect.left)/screenRate; 333 mouseY = (e.clientY - rect.top)/screenRate; 334 } 335 }); 336 if (dragFlg) { 337 icons.Draw(mouseX, mouseY, iconArray.selectedIcon.column, iconArray.selectedIcon.row); 338 } 339} 340function iconMouseUp(e) { 341 var rect = e.target.getBoundingClientRect(); 342 if('ontouchend' in document){ 343 var touch = e.touches[0] || e.changedTouches[0]; 344 mouseX = (touch.clientX - rect.left)/screenRate; 345 mouseY = (touch.clientY - rect.top)/screenRate; 346 }else{ 347 mouseX = (e.clientX - rect.left)/screenRate; 348 mouseY = (e.clientY - rect.top)/screenRate; 349 } 350 351 dragFlg = false; 352 var oldIX = iconArray.selectedIcon.column; 353 var oldIY = iconArray.selectedIcon.row; 354 var nowIX = Math.floor((mouseX - iconArray.x) / iconArray.iconWidth); 355 var nowIY = Math.floor((mouseY - iconArray.y) / iconArray.iconHeight); 356 357 iconSwap(oldIX, oldIY, nowIX, nowIY); 358 matchResolve(); 359 360 iconArray.selectedIcon.column = -1; 361 iconArray.selectedIcon.row = -1; 362} 363gameLoading();

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

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

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

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

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

okina

2020/05/10 14:03

ときどきというのは、同じことをしてバグが発生するときとしないときがあるということでしょうか?
okina

2020/05/10 14:19

規則性はありませんか? また、エラーが発生したときにコンソール等にエラーが出てたりしませんか?
nosonosolife

2020/05/10 14:40

>規則性はありませんか 必ず一番端の行の絵柄が表示されないような気がします >コンソール等にエラーが出てたりしませんか 以下のようなエラーが出ます TypeError: iconArray.icons[x1] is undefined(絵柄のドラッグが終わりマウスのボタンを離したとき) TypeError: iconArray.icons[(i + 1)][j] is undefined(絵柄が消えるとき)※出るときと出ないときがある
okina

2020/05/10 14:51

そういう情報は極めて重要だったりしますので、今後記載するようにしていただけると助かります。 また、それらのエラーを元に検索かけたりして頭を悩ませるのもコーディングの楽しみの一つです。
okina

2020/05/10 15:06

そのエラーコピーしたものですか?
okina

2020/05/10 15:26

再現環境作って検証しますので少々お待ちください
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

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

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

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問