Q&A
全く同じ文章で二度質問しても自分が欲しい回答が付かないことに変わりはありませんよ。もう少し状況を詳しく書いてみる、状況のわかるスクリーンショットを添える等工夫して下さい。例えば、現状のコードではわからない情報として、当たり判定ということはthisは移動しているんですよね？その移動するコードが存在しないので推測しようがありません。
現在、javascriptのcanvasを使用して横スクロールアクションゲームを作成していて、
キャラクターとマップの当たり判定を実装したのですが、めり込んだり、すり抜けたりなどしてしまいます。
キャラクターのサイズは31×40、
マップチップ１つ分のサイズは16×16です。
どこがいけないのかをご提示いただけたら幸いです。よろしくお願いいたします。
（このページを参考にしました。）
javascript
1/* 2 マップ 3 ※255は何もない場所 4*/ 5 var MapChip = [ 6[255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255], 7[255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255], 8[255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255], 9[255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255], 10[255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255], 11[255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255], 12[255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255], 13[255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255], 14[255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255], 15[255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255], 16[255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255], 17[255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255], 18[255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255], 19[255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255], 20[255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255], 21[255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255], 22[255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255], 23[255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255], 24[255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,2,2,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255], 25[255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255], 26[255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255], 27[255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255], 28[255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255], 29[255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255], 30[255,2,255,255,255,255,255,255,255,255,2,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255], 31[2,18,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,3,255,255,255,255,255], 32[18,18,18,18,18,18,18,18,18,18,18,18,18,18,18,18,18,18,18,18,18,18,18,18,18,18,18,18,18,18,18,18,18,18,19,255,255,255,255,255], 33[18,18,18,18,18,18,18,18,18,18,18,18,18,18,18,18,18,18,18,18,18,18,18,18,18,18,18,18,18,18,18,18,18,18,19,255,255,255,255,255], 34[18,18,18,18,18,18,18,18,18,18,18,18,18,18,18,18,18,18,18,18,18,18,18,18,18,18,18,18,18,18,18,18,18,18,19,255,255,255,255,255], 35[18,18,18,18,18,18,18,18,18,18,18,18,18,18,18,18,18,18,18,18,18,18,18,18,18,18,18,18,18,18,18,18,18,18,19,255,255,255,255,255], 36]; 37 38function collisionMap(x, y, map){ 39 return map[Math.floor(y/16)][Math.floor(x/16)]; 40} 41 42 43var cPlayer = { 44 MAX_ANIM_ID:0, 45 IMG_CHANGE_STEP:0, 46 animID:0, 47 icStep:0, 48 x:0, 49 y:0, 50 width:0, 51 height:0, 52 vx:0, 53 vy:0, 54 dir:0, 55 y_prev:0, 56 y_temp:0, 57 jumpFlag:0, 58 59 init:function(x,y){ 60 this.MAX_ANIM_ID = 2; 61 this.IMG_CHANGE_STEP = 3; 62 this.animID = 0; 63 this.icStep = 0; 64 this.x = x; 65 this.y = y; 66 this.width = 31; 67 this.height = 40; 68 this.vx = 50; 69 this.vy = 0; 70 this.dir = "RIGHT"; 71 this.y_prev = 0; 72 this.y_temp = 0; 73 this.jumpFlag = false; 74 }, 75 draw:function(){ 76 if(this.dir == "LEFT"){ 77 ctx.save(); // canvas状態を保存 78 ctx.transform(-1, 0, 0, 1, 0, 0); // 画像を左右反転させる 79 ctx.drawImage(Asset.images['box'], this.width * this.animID, 0, this.width, this.height, -this.x - this.width, this.y, this.width, this.height); 80 ctx.restore(); // canvasの状態をsaveされた状態に戻す 81 }else{ 82 ctx.drawImage(Asset.images['box'], this.width * this.animID, 0, this.width, this.height, this.x, this.y, this.width, this.height); 83 } 84 }, 85 move:function(){ 86 //床衝突判定 87 if (this.y > this.height && this.y < SCREEN_HEIGHT-this.height && 88 collisionMap(this.x , this.y+this.height, MapChip) != 255 || 89 this.y > this.height && this.y < SCREEN_HEIGHT-this.height && 90 collisionMap(this.x+this.width, this.y+this.height, MapChip) != 255){ 91 this.jumpFlag = false; 92 this.y = Math.floor((this.y/16)*16); 93 } 94 //天井衝突判定 95 else if(collisionMap(this.x , this.y, MapChip) != 255 || 96 collisionMap(this.x+this.width, this.y, MapChip) != 255){ 97 this.y = Math.floor((this.y/16)*16) + 16; 98 } 99 else{ 100 if(this.jumpFlag == false){ 101 this.y += 588 * delta; 102 } 103 } 104 105 if(keyCode["RIGHT"]){ 106 this.dir = "RIGHT"; 107 this.x += this.vx * delta; 108 109 //壁衝突判定（右側） 110 if (collisionMap(this.x, this.y , MapChip) != 255 || 111 collisionMap(this.x+16, this.y+16, MapChip) != 255){ 112 this.x = Math.floor((this.x/16)*16); 113 } 114 // 何回でアニメーションを変えるか 115 if(this.icStep >= this.IMG_CHANGE_STEP){ 116 this.icStep = 0; 117 if(this.animID <= this.MAX_ANIM_ID){ 118 this.animID++; // 次のコマへ 119 } 120 else{ 121 this.animID = 0; 122 } 123 }else{ 124 this.icStep++; 125 } 126 } 127 else if(keyCode["LEFT"]){ 128 this.dir = "LEFT"; 129 this.x -= this.vx * delta; 130 131 //壁衝突判定（左側） 132 if (collisionMap(this.x, this.y , MapChip) != 255 || 133 collisionMap(this.x-16, this.y+16, MapChip) != 255){ 134 this.x = Math.floor((this.x/16)*16) + 16; 135 } 136 137 // 何回でアニメーションを変えるか 138 if(this.icStep >= this.IMG_CHANGE_STEP){ 139 this.icStep = 0; 140 if(this.animID <= this.MAX_ANIM_ID){ 141 this.animID++; // 次のコマへ 142 } 143 else{ 144 this.animID = 0; 145 } 146 }else{ 147 this.icStep++; 148 } 149 } 150 else{ 151 this.animID = 0; 152 } 153 154 //ジャンプ処理 155 if(this.jumpFlag == true){ 156 this.y_temp = this.y; 157 this.y +=(this.y-this.y_prev)+1; 158 this.y_prev = this.y_temp; 159 } 160 161 if(keyCode["SPACE"] && this.jumpFlag == false){ 162 this.jumpFlag = true; 163 this.y_prev = this.y; 164 this.y = this.y-16; 165 } 166 } 167}
回答1件
0
ベストアンサー
あなたの行っている当たり判定は、大雑把に言えばプレイヤーの四角形の四隅が、各ブロックの範囲内に侵入したかどうか、という当たり判定です。そこは理解していますか？
- [this.x,this.y]が左上
- [this.x+this.width,this.y]が右上
- [this.x,this.y+this.height]が左下
- [this.x+this.width,this.y+this.height]が右下
そして、プレイヤーの大きさは31x40、チップの大きさが16x16です。
プレイヤーが「骨組みだけのスカスカの箱」、チップが「木箱」だと考えて下さい。
プレイヤーの当たり判定は「端っこ」の骨組みの部分だけなので、木箱がちょうど間に来るとすり抜けますよね？これがめり込みやすり抜けの原因だと思います。
元になったページはキャラもチップも同じ大きさですよね？これはそういったすり抜けが起きないようにするためです。もしすり抜けを回避したいなら、四隅だけではなくもっと細かく当たり判定を見る、または四角形同士の当たり判定をきっちり行う等の変更が必要だと思われます。四角形同士の当たり判定はご自分でお調べ下さい。
投稿2016/07/15 00:19
総合スコア9206
あなたの回答
tips
プレビュー
