カーゲーム（衝突アクション）

カーゲーム（衝突アクション）

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

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

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

音が鳴らない。

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

なぜ？

 

javascriptの描画。

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

独立している。

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

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

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

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

 

カーゲーム（敵車あり）

カーゲーム（敵車あり）

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

・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);
 
}

 

カーゲーム（現時点）コーディング

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

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);
    }
}

//ｐｃのマウスクリックイベントで起動する関数
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); 
}

 

カーゲーム（チューニング３）

カーゲーム（チューニング３）

スピード（フレーム数）を落としました。１０秒/千　→２０秒／千　多分そんな感じ。

ｋｅｙのクリアをｋｅｙｕｐイベントで行いました。

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

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

カーゲーム（チューニング２）

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

 

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;
}

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

カーゲーム（チューニング２）

カーゲーム（チュウニング）

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

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

カーゲーム（チュウニング）

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

カーゲーム（車が基準です）

 

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

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

カーゲーム（車が基準です）

 

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

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）
}

影の注意点。

１）楕円を作るために縁を１／３すると描画の座標は３倍しないといけません。