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

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

カーゲーム(衝突アクション)

2021年12月31日 23時35分27秒 | ゲーム開発(Game development)

カーゲーム(衝突アクション)

ごんなさい。ソースが複雑に骨折しました。

コメント
  • X
  • Facebookでシェアする
  • はてなブックマークに追加する
  • LINEでシェアする

取り敢えず絵でごまかす。( ̄д ̄)

2021年12月31日 21時13分22秒 | ゲーム開発(Game development)

車の衝突は、( ゚Д゚)絵で誤魔化します。音楽制作ソフトを買うかもです。😿

コメント
  • X
  • Facebookでシェアする
  • はてなブックマークに追加する
  • LINEでシェアする

音が鳴らない。

2021年12月31日 18時56分26秒 | ゲーム開発(Game development)

鳴らさない方が良いのでしょうか?

なぜ?

 

コメント
  • X
  • Facebookでシェアする
  • はてなブックマークに追加する
  • LINEでシェアする

javascriptの描画。

2021年12月31日 13時35分44秒 | ゲーム開発(Game development)

キーやマウスやタッチのイベントと描画がタイミングは違う。

独立している。

しかし、描画タイミングが小さくなればなるほど、

イベントの発生タイミングと一致する。

javascriptの描画タイミングは、人間の認識に比べて十分小さく設定できる。

描画タイミングで作業をすることで、描画と同時にイベントが発生しているように錯覚できる。

 

コメント
  • X
  • Facebookでシェアする
  • はてなブックマークに追加する
  • LINEでシェアする

カーゲーム(敵車あり)

2021年12月31日 09時13分35秒 | ゲーム開発(Game development)

カーゲーム(敵車あり)

描画スピードを中級、上級、下級を選べるようにしました。

・HTML

<select id="idselect" onChange="changeplayer(this)">
<option value="20">中級
<option value="10">上級
<option value="30">下級
</select>






javascriptのキー、マウス、タッチのイベントはプログラムの流れとは別にイベント発生します。

描画タイミングは、別に考慮する必要がある。前記事の全コーディングを参照。

・javascript

    element = document.getElementById("idselect");
    sec_time = element.value; 

 

 

 

 

pythonと異なるコーデイングした部分を掲載。

function init_car(){

    for(i=0; i
        car_x[i] = 0;
        car_y[i] = 0;
        car_lr[i] = 0;
        car_spd[i] = 0;
    }

    for(i=1; i
        car_x[i] = Math.floor(Math.random()*700)+50;
        car_y[i] = Math.floor(Math.random()*(CMAX-400))+200;
        car_lr[i] = 0;
        car_spd[i] = Math.floor(Math.random()*100)+100;
    }
    car_x[0] = 400;
    car_y[0] = 0;
    car_lr[0] = 0;
    car_spd[0] = 0;

}

function draw_text(text, x, y, col){
    ctx.font = "20px 'MS Pゴシック'";
    wx = x - text.length*20/2;
    wy = y - 20/2;
    ctx.fillStyle = "block";
    ctx.fillText(text, x + 2, y + 2);
    ctx.fillStyle = col;
    ctx.fillText(text, x, y);
 
}

 

コメント
  • X
  • Facebookでシェアする
  • はてなブックマークに追加する
  • LINEでシェアする

カーゲーム(現時点)コーディング

2021年12月30日 22時26分24秒 | ゲーム開発(Game development)

これ以上は掲載できないかもしれません。

var canvas;
var ctx;


WIDTH  = 800;
HEIGHT = 600;

var username = ["ipad","iphone","android"];         //端末の名前

WHITE  = "rgb(255, 255, 255)";
YELLOW = "rgb(255, 224,   0)";
BLACK  = "rgb(  0,   0,   0)";
RAD    = "rgb(255,   0,   0)";

DATA_LR = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 2, 3, 2, 1, 0, 2, 4, 2, 4, 2, 0, 0, 0,-2,-2,-4,-4,-2,-1, 0, 0, 0, 0, 0, 0, 0];
DATA_UD = [0, 0, 1, 2, 3, 2, 1, 0,-2,-4,-2, 0, 0, 0, 0, 0,-1,-2,-3,-4,-3,-2,-1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,-3, 3, 0,-6, 6, 0];
CLEN = DATA_LR.length;

BOARD = 120;
CMAX = BOARD*CLEN;

img_bg = new Image();
img_bg.src = "bg.png";
img_sea = new Image();
img_sea.src = "sea.png";


var gameover1 = 0;
var curve = [];
var updown = [];
var object_left = [];
var object_right = [];

var BOARD_W = [];
var BOARD_H = [];
var BOARD_UD = [];
var board_x = [];
var board_ud = [];
var img_obj = [];
var img_car = [];
//var car_y = 0;
var keyw = 0;
var keyw2 = 0;
var keyp = 0;

var vertical = 0;

var di = 0;
var sy = 0;
CAR = 30;
var car_x = [];
var car_y = [];
var car_lr = [];
var car_spd = [];
var PLCAR_Y = 10;

var sv_y = 0;

var sv_carx = 0;
var sv_cary = 0;

var sec_time = 10;

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();
    for(i=0; i
        if(user.indexOf(username[i]) > 0)break;
    }
    if(i
        document.addEventListener("touchmove", touchmove);
    }else{
        document.addEventListener("mousemove", mousemove);
    }
//    if(i
//        document.addEventListener("touchstart", touchmove);
//    }else{
//        document.addEventListener("mousedown", mousemove);
//    }

    document.addEventListener("keydown", keydown);
    document.addEventListener("keyup", keyupop);


    for(i=0; i <=CMAX; i++){
        curve[i] = 0;
        updown[i] = 0;
        object_left[i] = 0;
        object_right[i] = 0;
    }
    for(i=0; i <=CAR; i++){
        car_x[i] = 0;
        car_y[i] = 0;
        car_lr[i] = 0;
        car_spd[i] = 0;
    }

    main();

}
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;
    if(ty
    if(tx
    if(tx > sv_carx + 80)  keyw = 2;
    if(ty - 50 > sv_y)  keyw2 = 6;
    if(ty > sv_cary - 30) keyw2 = 6;

 

    sv_y = ty;
//    element = document.getElementById("idresult2");
//    element.innerHTML = " x=" + tx + " y=" + ty;

}
function make_course(){
    for(i=0; i
        lr1 = DATA_LR[i];
        lr2 = DATA_LR[(i+1)%CLEN];
        ud1 = DATA_UD[i];
        ud2 = DATA_UD[(i+1)%CLEN];
        for(j=0; j
           pos = j+BOARD*i; 
           curve[pos] = lr1*(BOARD-j)/BOARD + lr2*j/BOARD;
           updown[pos] = ud1*(BOARD-j)/BOARD + ud2*j/BOARD;
           if(j === 60) object_right[pos] = 1;
           if(i%8 < 7){
               if(j%12 === 0) object_left[pos] = 2;
           } else {
               if(j%20 === 0) object_left[pos] = 3;
           }
           if(j%12 === 6) object_left[pos] = 9;
        }
    }


}
function draw_shadow(x, y, siz){

    ctx.globalAlpha= 0.3;
    ctx.beginPath();
    ctx.scale(1, 1/3);
    ctx.fillStyle = "black";
    ctx.arc(x, (y-siz/6)*3, siz/2, 0, Math.PI*2, false);

    ctx.fill();
    ctx.setTransform(1,0,0,1,0,0);
    ctx.globalAlpha=1;

 

}
function drive_car(key, key2){
    if(key === 1){
        if(car_lr[0] > -3) car_lr[0] -= 1;
        car_x[0] = car_x[0] + (car_lr[0]-3) * car_spd[0]/100 -5;
    } else if(key === 2){
        if(car_lr[0]
        car_x[0] = car_x[0] + (car_lr[0]+3) * car_spd[0]/100 +5;
    } else {
        car_lr[0] = parseInt(car_lr[0]*0.9);
    }

    if(key2 === 5){
       car_spd[0] += 3;
    } else if(key2 === 6){
//       car_spd[0] -= 10;
       car_spd[0] -= 4;
    } else {
//       car_spd[0] -= 0.25;
       car_spd[0] -= 0.05;
    }

    if(car_spd[0] < 0) car_spd[0] = 0;
    if(car_spd[0] > 320) car_spd[0] = 320;

    car_x[0] -= car_spd[0]*curve[parseInt(car_y[0]+ PLCAR_Y)%CMAX]/50;

    if(car_x[0] < 0){
       car_x[0] = 0;
       car_spd[0] *= 0.9;
    }
    if(car_x[0] > 800){
       car_x[0] = 800;
       car_spd[0] *= 0.9;
    }

    car_y[0] = car_y[0] + car_spd[0]/100;

    if(car_y[0] > CMAX-1) car_y[0] -= CMAX;

}

//キーが押された時の処理
function keydown(e){

  k = e.keyCode;
    if(k==37) { keyw = 1; keyw2 = 5;}
    if(k==38) { keyw2 = 5; keyw = 3; sec_time = 20;}
    if(k==39) { keyw = 2; keyw2 = 5;}
    if(k==40) keyw2 = 6;
    if(k==65) keyw2 = 5;
    if(k==90) keyw2 = 6; 
    keyp = 1;
}
function keyupop(e){
    if(keyp = 1){ keyw = 0;; keyw2 = 0; keyp = 0;}
}
function draw_obj(img, x, y, sc){

    w = img.width*sc;
    h = img.height*sc;
    ctx.drawImage(img, x - w/2, y - h, w, h);

}

function main(){
        minit();
        //クロックの処理
        mmain();

}
function minit(){

//**イメージ・テーブル作成**
    for(i=0; i
        img_obj[i] = new Image(); 
    }
    img_obj[1].src = "board.png"; 
    img_obj[2].src = "yashi.png";
    img_obj[3].src = "yacht.png";

    for(i=0; i < 7; i++){
        img_car[i] = new Image(); 
    }
    img_car[0].src = "car00.png";
    img_car[1].src = "car01.png";
    img_car[2].src = "car02.png";
    img_car[3].src = "car03.png";
    img_car[4].src = "car04.png";
    img_car[5].src = "car05.png";
    img_car[6].src = "car06.png";


    for(i=0; i <=BOARD; i++){
        BOARD_W[i] = 0;
        BOARD_H[i] = 0;
        BOARD_UD[i] = 0;
    }
    for(i=0; i
        BOARD_W[i] = 10+(BOARD-i)*(BOARD-i)/12;
        BOARD_H[i] = 3.4*(BOARD-i)/BOARD;
        BOARD_UD[i] = 2*Math.sin(i*1.5*(Math.PI/180));
    }
    make_course();


    vertical = 0;

}

function mmain(){

    di = 0;
    ud = 0;

    for(i=0; i
        board_x[i] = 0;
        board_ud[i] = 0;
    }
    for(i=0; i
        di += curve[parseInt(car_y[0]+i)%CMAX];
        ud += updown[parseInt(car_y[0]+i)%CMAX];
        board_x[i] = 400 -BOARD_W[i]*car_x[0]/800 + di/2;
        board_ud[i] = ud/30;
    }

    horizon = 400 + parseInt(ud/3);
    sy = horizon;

    vertical = vertical - parseInt(car_spd[0]*di/8000);
    if(vertical < 0) vertical += 800;
    if(vertical >= 800) vertical -= 800;

     ctx.fillStyle = "rgb(0, 56, 255)";
     ctx.fillRect(0, 0, WIDTH, HEIGHT);

    ctx.drawImage(img_bg, vertical-800, horizon-400);
    ctx.drawImage(img_bg, vertical, horizon-400);

    ctx.drawImage(img_sea, board_x[BOARD-1]-780, sy);
    
     msg_draw();

    //(描画処理)
    
    for (i=BOARD-1; i >0; i--){
        ux = board_x[i];
        uy = sy - BOARD_UD[i]*board_ud[i];
        uw = BOARD_W[i];
        sy = sy + BOARD_H[i]*(600-horizon)/200;
        bx = board_x[i-1];
        by = sy - BOARD_UD[i-1]*board_ud[i-1];
        bw = BOARD_W[i-1];
        colr = 160;
        colb = 160;
        colg = 160;
        wkcolor = "#" + colr.toString(16) + colb.toString(16) + colg.toString(16);

        ctx.beginPath();
        ctx.moveTo(ux,uy);
        ctx.lineTo(ux+uw,uy);
        ctx.lineTo(bx+bw,by);
        ctx.lineTo(bx,by);
//全て座標を指定 

        ctx.closePath();
        ctx.fillStyle = wkcolor;
        ctx.fill();

        if(parseInt(car_y[0] +i)%10 <= 4){
           ctx.beginPath();
           ctx.moveTo(ux,uy);
           ctx.lineTo(ux+uw*0.02,uy);
           ctx.lineTo(bx+bw*0.02,by);
           ctx.lineTo(bx,by);
//全て座標を指定 
           ctx.closePath();
           ctx.fillStyle = YELLOW;
           ctx.fill();
        
           ctx.beginPath();
           ctx.moveTo(ux+uw*0.98,uy);
           ctx.lineTo(ux+uw,uy);
           ctx.lineTo(bx+bw,by);
           ctx.lineTo(bx+bw*0.98,by);
//全て座標を指定 
           ctx.closePath();
           ctx.fillStyle = YELLOW;
           ctx.fill();
        }
        if(parseInt(car_y[0] +i)%20 <= 10){
           ctx.beginPath();
           ctx.moveTo(ux+uw*0.24,uy);
           ctx.lineTo(ux+uw*0.26,uy);
           ctx.lineTo(bx+bw*0.26,by);
           ctx.lineTo(bx+bw*0.24,by);
//全て座標を指定 
           ctx.closePath();
           ctx.fillStyle = WHITE;
           ctx.fill();

           ctx.beginPath();
           ctx.moveTo(ux+uw*0.49,uy);
           ctx.lineTo(ux+uw*0.51,uy);
           ctx.lineTo(bx+bw*0.51,by);
           ctx.lineTo(bx+bw*0.49,by);
//全て座標を指定 
           ctx.closePath();
           ctx.fillStyle = WHITE;
           ctx.fill();

           ctx.beginPath();
           ctx.moveTo(ux+uw*0.74,uy);
           ctx.lineTo(ux+uw*0.76,uy);
           ctx.lineTo(bx+bw*0.76,by);
           ctx.lineTo(bx+bw*0.74,by);
//全て座標を指定 
           ctx.closePath();
           ctx.fillStyle = WHITE;
           ctx.fill();


        }
        scale = 1.5*BOARD_W[i]/BOARD_W[0];
        obj_l = object_left[parseInt(car_y[0]+i)%CMAX];
        if(obj_l === 2) {
           draw_obj(img_obj[obj_l], ux-uw*0.05, uy, scale);
        }
        if(obj_l === 3) {
           draw_obj(img_obj[obj_l], ux-uw*0.5, uy, scale);
        }
        if(obj_l === 9) {
           ctx.drawImage(img_sea, ux-uw*0.5-780, uy);
        }

        obj_r = object_right[parseInt(car_y[0]+i)%CMAX];
        if(obj_r === 1) {
           draw_obj(img_obj[obj_r], ux+uw*1.3, uy, scale);
        }
        if(i === PLCAR_Y){
           draw_shadow(ux+car_x[0]*BOARD_W[i]/800, uy, 200*BOARD_W[i]/BOARD_W[0])
           draw_obj(img_car[3+car_lr[0]], ux+car_x[0]*BOARD_W[i]/800, uy, 0.05+BOARD_W[i]/BOARD_W[0]);
           sv_carx = ux+car_x[0]*BOARD_W[i]/800;
           sv_cary = uy;
        }

    }
    drive_car(keyw, keyw2);
//    keyw = 0;
//    keyw2 = 0;

    gameover1 += 1
    setTimeout("mmain()", sec_time);

}
// ゲームオーバーの表示
function msg_draw(){
    ctx.font = "20px 'MS Pゴシック'";
    ctx.fillStyle = "white";
//    ctx.fillText("カーソルキーの上、下、右、左を押してください",200,100);
    ctx.fillText("マウスで車体位置を中心に上下左右に動かしてください",200,100); 
}

 

コメント
  • X
  • Facebookでシェアする
  • はてなブックマークに追加する
  • LINEでシェアする

カーゲーム(チューニング3)

2021年12月30日 21時43分48秒 | ゲーム開発(Game development)

カーゲーム(チューニング3)

スピード(フレーム数)を落としました。10秒/千 →20秒/千 多分そんな感じ。

keyのクリアをkeyupイベントで行いました。

キーでも楽しめると思います。

キーとマウスでスピードを変えました。

コメント
  • X
  • Facebookでシェアする
  • はてなブックマークに追加する
  • LINEでシェアする

カーゲーム(チューニング2)

2021年12月30日 20時15分10秒 | ゲーム開発(Game development)

順番を入れ替えるだけで改善しました。

 

function touchpice(tx,ty){
    mx = tx;
    my = ty;
   if(ty < sv_cary - 30) { keyw2 = 5; keyw = 3;}
    if(tx < sv_carx - 80)  keyw = 1;
    if(tx > sv_carx + 80)  keyw = 2;
   if(ty - 50 > sv_y)  keyw2 = 6;
    if(ty > sv_cary - 30) keyw2 = 6;

    sv_y = ty;
}

マウスで動かしてください。

カーゲーム(チューニング2)

コメント
  • X
  • Facebookでシェアする
  • はてなブックマークに追加する
  • LINEでシェアする

カーゲーム(チュウニング)

2021年12月30日 16時08分49秒 | ゲーム開発(Game development)

マウスで動かしやすいようにチュウニングしました。

一度、運転しやすいか運転してみてください。意見求む。

カーゲーム(チュウニング)

カーブの戻りを3分の1のゆっくりにしました。

コメント
  • X
  • Facebookでシェアする
  • はてなブックマークに追加する
  • LINEでシェアする

カーゲーム(車が基準です)

2021年12月30日 11時18分12秒 | ゲーム開発(Game development)

 

車の位置を基準にマウスが左、右、上、ブレーキを判断します。タッチも同じで。

微妙に動かすとムーブイベントが行われます。

カーゲーム(車が基準です)

 

考察の残骸いり。コーディング。

function touchpice(tx,ty){
    mx = tx;
    my = ty;
//    if((tx < 395) && (tx >1))  keyw2= 5;
//    if((tx < 800) && (tx >405))  keyw2 = 6;
//    if((ty < 645) && (ty >600))  keyw = 1;
//    if((ty < 660) && (ty >700))  keyw = 2;
//    if(tx < 380)  keyw = 1;
//    if(tx > 420)  keyw = 2;
//    if(ty < 540)  {keyw2 = 5; car_lr[0] = 0;}
//    if(ty - 50 > sv_y)  keyw2 = 6;
//    if(ty > 600) keyw2 = 6;

    if(tx < sv_carx - 80)  keyw = 1;
    if(tx > sv_carx + 80)  keyw = 2;
//    if(ty < sv_cary)  {keyw2 = 5; car_lr[0] = 0;}
    if(ty < sv_cary - 30)  keyw2 = 5;
    if(ty - 50 > sv_y)  keyw2 = 6;
    if(ty > sv_cary - 30) keyw2 = 6;

 

    sv_y = ty;
//    element = document.getElementById("idresult2");
//    element.innerHTML = " x=" + tx + " y=" + ty;


//    keyup = 1;
//(400,650)10 (1~395、、405~800)600~655、、660~700)
}

影の注意点。

1)楕円を作るために縁を1/3すると描画の座標は3倍しないといけません。

コメント
  • X
  • Facebookでシェアする
  • はてなブックマークに追加する
  • LINEでシェアする