ひろひろの生活日記(LIFE Of HIROHIRO)

パソコン講習とソフト開発をしています。自作小説も掲載しています。ネット情報発信基地(上野博隆)Hirotaka Ueno

ブロック崩しコーデイングの途中経過。バグが一杯あった。基本が分かつてないからつらい。

2020年06月13日 14時11分24秒 | ゲーム開発(Game development)

var canvas;
var ctx;

width  = 640;
height = 480;
// white, red, yellow, green, blue
var colortable = ["red","yellow","green"];
var username = ["ipad","iphone","android"];         //端末の名前

var br = 10;       // ボールの半径
var paddlew = 96;      // パドルの幅
var paddleh = 16;      // パドルの高さ
var blockw = 48;       // ブロックの幅
var blockh = 24;       // ブロックの高さ
var blocks = [];
var blocksu = 50;
var endflag = 0;       // 処理の終わりを判定する
var gameover = 0;
var gameover1 = 0;
var ballx = 0;
var bally = 0;
var bx1 = 0;
var by1 = 0;
var mx = 0;
var my = 0;
// ブロックスに配列要素にプロパティを付与する。
function block() {
    this.id = 1;
    this.x = 0;
    this.y = 0;
    this.color = 0;
    this.centerx = 0;
    this.centery = 0;

}
// パドルの構造体
function paddlez() {
    this.centerx = 0;
    this.centery = 0;
}
var paddle;

// 初期処理
function init(){
    canvas = document.getElementById('world');
    canvas.width = width;
    canvas.height = height;
    ctx = canvas.getContext('2d');
    ctx.font = "48px 'MS Pゴシック'";
    user = window.navigator.userAgent.toLowerCase();
// パドルを定義する。
    paddle = new paddlez();
// マウスの処理
    for(i=0; i<username.length; i++){
        if(user.indexOf(username[i]) > 0)break;
    }
    if(i < username.length){
        document.addEventListener("touchmove", touchmove);
    }else{
        document.addEventListener("mousemove", mousemove);
    }
// ブロックスを定義する。
    blocks = new Array(blocksu);
    for(i=0; i<blocksu; i++){
        blocks[i] = new block();
    }
    for(i=0; i<blocksu; i++){
        blocks[i].id = 1;
        blocks[i].x = (i % 10) * (blockw + 4) + 64;
        blocks[i].y = Math.floor(i / 10) * (blockh + 4) + 64;
        blocks[i].color = Math.floor(blocks[i].y / 28) % 3;
        blocks[i].centerx = blocks[i].x + blockw / 2;
        blocks[i].centery = blocks[i].y + blockh / 2;
    }
    minit();
}


//スマホ/タブレットのタッチイベントで起動する関数
function touchmove(e){
    if  (e.targetTouches.length == 1){
        touch = e.targetTouches[0];
        touchpice(touch.pageX ,touch.pageY);
    }
}

//pcのマウスクリックイベントで起動する関数
function mousemove(e){
    touchpice(e.x ,e.y);
}

//引数で指定した位置にある駒の移動処理(※変更前です)
function touchpice(tx,ty){
    mx = tx;
    my = ty;
}
//座標が範囲内に存在するか判定する
function isinside(x,y,ax,ay,w,h){
    if((x<ax)||(x>=(ax+w))||(y<ay)||(y>=(ay+h)))return(false);
    return(true);
}
function sgn(a) {
    if(a > 0) return(1); else return(-1);
}

function main() {
        
        minit();
        //クロックの処理
        mmain();
        gameover += 1;
        if(gameover > 20) return;
        setTimeout("main()",5000);
}
// メインのイニシャル処理
function minit(){
    ballx = width / 2;      // ボールのx座標
    bally = height - 170;   // ボールのy座標
    bx1 = 2;                // ボールの速度(x成分)
    by1 = -2.5;             // ボールの速度(y成分)
    x = width / 2;          // パドルの位置(x座標)
    y = height - 64;        // パドルの位置(y座標)
    // パドルは左端がpaddleのx、y
    paddle.centerx = x;
    paddle.centery = y;

    for(i=0; i<blocksu; i++){
        blocks[i].id = 1;
//            blocks[i].x = (i % 10) * (blockw + 4) + 64;
//            blocks[i].y = Math.floor(i / 10) * (blockh + 4) + 64;
//            blocks[i].color = Math.floor(blocks[i].y / 28) % 3;
    }
    gameover1 = 0;
     //(描画処理)
     ctx.fillStyle = "blue";
     ctx.fillRect(0, 0, width, height);
    
     blockdraw();
     paddledraw();
     ctx.beginPath();
     balldraw();
}
// メインのメイン処理
function mmain(){
    //キーコード取得しパドルの位置を移動させる。← →
        element = document.getElementById("idresult");
        element.innerHTML = "bx1=" + bx1 + " by1=" + by1 + " ballx=" + ballx + " bally=" + bally;
    x = paddle.centerx;
    if(isinside(mx,my,0,0,width,height)==true){          //将棋盤バッファ外なら処理を終了
        x = mx;
        y = my;
    }
//  k = event.keyCode;
//    if(k==100) x -= 8; if(k==102) x += 8;
    //パドルがゲーム画面内ならパドルの位置を変更する
    if( (x >= (paddlew / 2)) && (x <= (width - (paddlew / 2)))){
        paddle.centerx = x;
    }
    //ボールの速度と位置の変更
    x = ballx + bx1;
    y = bally + by1;
    //ボールが左右の壁に当たるとxの速度を反転する
    if( (x < br) || (x > (width - br ))) bx1 = -bx1;
    //ボールが天井にあたるとyの速度を反転する
    if( y < br ) by1 = -by1;
    //ボールが底にあたるとゲームオーバー
    if( y > height ) gameover1 += 1;
    //パドルとボールとの距離の差を計算する
    dx = paddle.centerx - x;
    dy = paddle.centery - y;

    //ゼロ割を回避するための処理
    if(dy == 0) dy = 1;
    //パドルとボールが当たっているかの判断
    if((Math.abs(dx) < (paddlew / 2 + br)) && (Math.abs(dy) < (paddleh / 2 + br)))
    {
         //角度により反射を判定
         if(Math.abs(dx / dy) > (paddlew / paddleh)){
             bx1 = -bx1;
             ballx = paddle.centerx - (sgn(dx) * (paddlew / 2 + br));
         } else {
             bx1 = -dx / 10;
             by1 = -by1;
             bally = paddle.centery - (sgn(dy) * (paddleh / 2 + br));
         }
     }
     //ブロックとボールが当たった時の処理
     for(i=0; i < blocksu; i++){
          dx = blocks[i].centerx - x;
          dy = blocks[i].centery - y;
          //ゼロ割を回避するための処理
          if(dy == 0) dy = 1;
          //ブロックとボールが当たっているかの判断
          if((Math.abs(dx) < (blockw / 2 + br)) && (Math.abs(dy) < (blockh / 2 + br)))
          {
              //角度により反射を判定
              if(Math.abs(dx / dy) > (blockw / blockh)){
                  bx1 = -bx1;
                  ballx = blocks[i].centerx - (sgn(dx) * (blockw / 2 + br));
              } else {
                  by1 = -by1;
                  bally = blocks[i].centery - (sgn(dy) * (blockh / 2 + br));
              }
              blocks[i].id = 0;
              break;
          }
     }
     ballx += bx1;
     bally += by1;
     //(描画処理)
     ctx.fillStyle = "blue";
     ctx.fillRect(0, 0, width, height);
     blockdraw();
     paddledraw();
     balldraw();
     if(gameover1 > 0){
         gemeoverdraw();
         return;
     }
        //クロックの処理
     setTimeout("mmain()",100);

}
//描画ファンクションのコーディング
//つづく
// ブロックの描画
function blockdraw() {

    for (i=0; i < blocksu; i++){
        if(blocks[i].id == 1) {
            wkcolor = blocks[i].color;
            wkx = blocks[i].x;
            wky = blocks[i].y;
            ctx.fillStyle = colortable[wkcolor];
            ctx.fillRect(wkx, wky, blockw, blockh);
        }
    }
}
// パドルの描画
function paddledraw() {
     ctx.fillStyle = "white";
     x1 = paddle.centerx - paddlew / 2;
     y1 = paddle.centery - paddleh / 2;

     ctx.fillRect(x1, y1, paddlew, paddleh);
}
// ボールの描画
function balldraw() {
     wkx = Math.floor(ballx);
     wky = Math.floor(bally);
     ctx.beginPath();
     ctx.fillStyle = "white";
     ctx.arc(wkx,wky,br,0*Math.PI,2*Math.PI);
     ctx.fill();
}
// ゲームオーバーの表示
function gameoverdraw(){
    ctx.font = "48px 'MS Pゴシック'";
    ctx.fillStyle = "white";
    ctx.fillText("GAME OVER",180,300); 
}

 


コメント    この記事についてブログを書く
  • X
  • Facebookでシェアする
  • はてなブックマークに追加する
  • LINEでシェアする
« 王位戦白組挑戦者決定リーグ... | トップ | ブロック崩しの考察。 »
最新の画像もっと見る

コメントを投稿

ブログ作成者から承認されるまでコメントは反映されません。

ゲーム開発(Game development)」カテゴリの最新記事