ひろひろの生活日記（ＬＩＦＥ　Of　HIROHIRO）

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

スピードを速くしました。

2021年12月29日 22時52分21秒 | ゲーム開発（Game development)

直線が気持ちいい。マウスの操作で走らすのが楽です。

カーゲーム（スピードアップ）

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

カーゲーム（タッチとマウスで動くようにしました）

2021年12月29日 19時50分07秒 | ゲーム開発（Game development)

カーゲーム（タッチ、マウス）

 

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

カーゲーム（コーディング）

2021年12月29日 18時27分21秒 | ゲーム開発（Game development)

載せました。全ステップです。

イメージデータがありませんが、pythonの本はkindleで1000円以下です。

購入すれば、パスワードがありイメージデータをダウンロードできますよ。

 

var canvas;
var ctx;


WIDTH  = 800;
HEIGHT = 700;

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

//    ctx.drawImage(img_bg,ofsx,ofsy);

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

 

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

    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;
//    keyup = 1;
}
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;
        }
    }

//    for(i=0; i
//        updown[i] =  parseInt(5*Math.sin(i*(Math.PI/180)));
//    }
//Math.sin((180*i)/23*(Math.PI/180));

}
function draw_shadow(x, y, siz){
//    element = document.getElementById("idresult2");
//    element.innerHTML = " siz=" + siz;

//    siz = 50;
    ctx.globalAlpha= 0.5;
//    ctx.arc(x-siz/2, y-siz/4, siz/2, 0, Math.PI*2, false);
    ctx.beginPath();
    ctx.scale(1, 0.25);
    ctx.fillStyle = "black";
    ctx.arc(x, (y-siz/4)*4, siz/2, 0, Math.PI*2, false);

//    ctx.arc(x-50/2, y-200/4, 200/2, 0, Math.PI*2, false);
//    ctx.scale(1, 1);
    ctx.fill();
    ctx.setTransform(1,0,0,1,0,0);
    ctx.globalAlpha=1;

 

}
function drive_car(key){
    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] < -3) car_lr[0] += 1;
        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(key === 5){
       car_spd[0] += 3;
    } else if(key === 6){
       car_spd[0] -= 10;
    } else {
       car_spd[0] -= 0.25;
    }

    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;
    if(k==38) keyw = 5;
    if(k==39) keyw = 2;
    if(k==40) keyw = 6;
    if(k==65) keyw = 5;
    if(k==90) keyw = 6; 
//    draw_road(curve, undulation); 
    element = document.getElementById("idresult2");
    element.innerHTML = " k=" + k;
    
}

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));
    }
//    drive_car(keyw);
//    keyw = 0;
    make_course();

//    car_y[0] = 0;
//    car_x[0] = 0;

    vertical = 0;

}

function mmain(){

//    if(keyup===1){
//       car_y = (car_y+1)%CMAX;
//    }
    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);
    

//    keyup = 0;

    //（描画処理）
    
    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);
//        if((car_y+i)%12 === 0){
//            wkcolor = "#FFFFFF";
//        }
        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]);
        }
//        drive_car(keyw);
//        keyw = 0;

    }
    drive_car(keyw);
    keyw = 0;

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

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

 

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

カーゲーム（javascriptコーディング）

2021年12月29日 14時54分34秒 | ゲーム開発（Game development)

参考までに、良ければ本買ってください。もとはpythonです。

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

 

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

 

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

　　k = e.keyCode;

    if(k==37) keyw = 1;
    if(k==38) keyw = 5;
    if(k==39) keyw = 2;
    if(k==40) keyw = 6;
    if(k==65) keyw = 5;
    if(k==90) keyw = 6; 
    
}

 

function draw_shadow(x, y, siz){
    ctx.globalAlpha= 0.5;
    ctx.beginPath();
    ctx.scale(1, 0.25);
    ctx.fillStyle = "black";
    ctx.arc(x, (y-siz/4)*4, siz/2, 0, Math.PI*2, false);

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

}

function drive_car(key){
    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] < -3) car_lr[0] += 1;
        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(key === 5){
       car_spd[0] += 3;
    } else if(key === 6){
       car_spd[0] -= 10;
    } else {
       car_spd[0] -= 0.25;
    }

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

 


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


    drive_car(keyw);
    keyw = 0;

    setTimeout("mmain()",100);

 

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

カーゲーム（途中です）車が描画され走ります。

2021年12月29日 14時26分42秒 | ゲーム開発（Game development)

キーAか、キー上↑でアクセル

キーＺか、キー下↓でブレーキ

キー←左で左に曲がる

キー→右で右に曲がります。

途中ですがプレイしてみてください。

カーゲーム

 

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

楕円の描画。

2021年12月29日 07時33分18秒 | ゲーム開発（Game development)

   １対0.5で横と縦の比率を変形しています。

　５０％の透明度にしています。

 

　ctx.globalAlpha=0.2;
    ctx.scale(1,0.5);
    ctx.beginPath();
    ctx.fillStyle = "black";
    ctx.arc(30, 80, 20, 0, Math.PI*2, false)
    ctx.fill();
    ctx.globalAlpha=1;
    ctx.strokeRect(5,5,25,15);

 

下のコードを試してください。透明度とクリアが必要なのが分かります。

    ctx.strokeStyle = "#FF0000";
    ctx.strokeRect(15,40,25,15);

    ctx.globalAlpha=0.5;
    ctx.scale(1,0.5);
    ctx.beginPath();
    ctx.fillStyle = "black";
    ctx.arc(30, 80, 20, 0, Math.PI*2, false)
    ctx.fill();

    ctx.setTransform(1,0,0,1,0,0);

    ctx.globalAlpha=1;
//    ctx.scale(1,1);
    ctx.beginPath();
    ctx.fillStyle = "#0000FF";
    ctx.rect(10,180,40,40);
    ctx.fill();

 

 

以下のpythonのコーデイングをjavascriptで実現してみてください。

カー（車の下）に影をつけるコーデイングです。

def draw_shadow(bg, x, y, siz):
    shadow = pygame.Surface([siz, siz/4])
    shadow.fill(RED)
    shadow.set_colorkey(RED)
    shadow.set_alpha(128)
    pygame.draw.ellipse(shadow, BLACK, [0,0,size,size/4])
    bg.blit(shadow, [x-siz/2, y-siz/4])

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

プロフィール

プロフィール画像

自己紹介
パソコン講習、ソフト開発をしています。社会、世界、宇宙の話も好きです。よろしく。（＾＾）

カレンダー

2021年12月
日 月 火 水 木 金 土
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31

バックナンバー

ブックマーク

goo
最初はgoo
ひろひろシステム
タイピングソフトダウンロードできます。漢字学習ひろひろ漢字もよろしく
ひろひろ漢字
漢字学習サポートサイト（無料です）小学１から中二まで 簿記の意味
広場まいどあり
大阪南部近隣情報発信サイト
Light Night Buddhism(LNB)（光と闇と仏法）
顕元初本尊開示抄、御本尊をダウンロードできます。
一人将棋
一人で将棋をさして遊ぶ。WEBアプリサイトです。棋譜の再生が出来ます。
アルファポリス
小説の投稿サイトです。ユーザ名「ひろの助」で掲載中です。
カーレース
カーレースのゲーム開発の自サイトです。いまは、タイムトライアルです。
  • RSS2.0