lx,ly,lz は光源ベクトルらしい。
1.732は√３です。多分、１²＋１²＋１²の平方根、xyzの二乗の積の平方根 １の半径
RADは、描画の球の半径
128はｒｂｇ値です。
球の光源の距離の明るさです。
<textarea>
<html>
<head>
<title>CAR_GAME</title>
<script language="javascript" src="RenderV301.js"></script>
</head>
<body onload="init()">
<canvas id="world"></canvas>
</body>
</html>
</textarea>
＊＊＊＊javascript＊RenderV301.js＊＊＊＊＊
var canvas;
var ctx;
WIDTH = 640;
HEIGHT = 480;
VIEW_WIDTH = 640;
VIEW_HEIGHT = 480;
RAD = 180;
var lx = -1 / 1.732;
var ly = -1 / 1.732;
var lz = 1 / 1.732;
//var lx = 1 / 2.0;
//var ly = 1 / 2.0;
//var lz = 1 / 2.0;
var fAmbient = 128.0;
var fDirect = 128.0;
var fDot = 0;
//RAD2 = 250;
//RAD3 = 300;
//var bordcolor = ["white", "silver", "gray"];
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();
nBright = 0;
//（描画処理）
for( y = 0; y
for( x = 0; x
dx = x - VIEW_WIDTH / 2.0;
dy = y - VIEW_HEIGHT / 2.0;
dzsq = RAD * RAD -dx * dx - dy * dy;
if(dzsq > 0.0 ){
dz = Math.sqrt(dzsq);
nx = dx / RAD; ny = dy / RAD; nz = dz / RAD;
fDot = nx * lx + ny * ly + nz * lz;
if(fDot >= 0.0){
nBright = parseInt(fDot * fDirect + fAmbient);
} else {
nBright = parseInt(fAmbient);
}
sBright = 0;
wkcolor = "rgb(" + nBright + "," + nBright + "," + nBright + ")";
ctx.beginPath();
ctx.lineWidth = 1;
ctx.moveTo(x,y);
ctx.lineTo(x+1,y+1);
//全て座標を指定（ドット）
ctx.strokeStyle = wkcolor;
ctx.stroke();
}
}
}
// element = document.getElementById("idresult");
// element.innerHTML = "16=" + k.toString(16);
}
まねまねですが、デザインしました。
車を３台以上から選べるようにしました。
→を押すかクリックすると４台目の車を選べます。
カーゲーム（自車デザインあり）←クリックでゲームにリンクします。（無料）
ZAHYO_XY = [
"00,300,280,800,320,a",
"00,300,360,800,410,s",
"04,300,390,800,440,r",
"04,060,220,260,380,1",
"04,300,220,500,380,2",
"04,540,220,740,380,3",
"04,005,300,045,350,L",
"04,750,300,795,350,R",
];
ZAHYOMAX = 8;
// A,S,R<1,2,3の判定。
function touchkey(tx,ty){
mx = tx;
my = ty;
element = document.getElementById("idselect");
sec_time = element.value;
hmoj = "0";
for(i = 0; i < ZAHYOMAX; i++){
tidx = parseInt(ZAHYO_XY[i].substr(0,2));
tx1 = parseInt(ZAHYO_XY[i].substr(3,3));
ty1 = parseInt(ZAHYO_XY[i].substr(7,3));
tx2 = parseInt(ZAHYO_XY[i].substr(11,3));
ty2 = parseInt(ZAHYO_XY[i].substr(15,3));
tmoj = ZAHYO_XY[i].substr(19,1);
if(idx === tidx){
if((tx >= tx1) && (tx <= tx2) && (ty >= ty1) && (ty <= ty2)){
hmoj = tmoj;
break;
}
}
}
if(hmoj === "a") keyw2 = 5;
if(hmoj === "s") keyw3 = 1;
if(hmoj === "r") keyw3 = 2;
if(hmoj === "1") keyw4 = 1;
if(hmoj === "2") keyw4 = 2;
if(hmoj === "3") keyw4 = 3;
if(hmoj === "L") wn -= 1;
if(hmoj === "R") wn += 1;
if(wn + 3 > MYCARMAX) wn = MYCARMAX - 3;
if(wn < 0) wn = 0;
// element = document.getElementById("idresult2");
// element.innerHTML = " x=" + tx + " y=" + ty + " hmoj=" + hmoj + " idx= " + idx;
}
function keydown(e){
element = document.getElementById("idselect");
sec_time = element.value;
k = e.keyCode;
if(k==37) { keyw = 1; keyw2 = 5;}
// if(k==38) { keyw2 = 5; keyw = 3; sec_time = 20;}
if(k==38) { keyw2 = 5; keyw = 3;}
if(k==39) { keyw = 2; keyw2 = 5;}
if(k==40) keyw2 = 6;
if(k==65) keyw2 = 5;
if(k==90) keyw2 = 6;
if(k==83) keyw3 = 1; //s
if(k==13) keyw3 = 2; //enter
if(k===49 || k===35) keyw4 = 1; //1
if(k===50 || k===40) keyw4 = 2; //2
if(k===51 || k===34) keyw4 = 3; //3
keyp = 1;
if(idx === 4){
if(k ===39){
wn +=1;
if(wn+3 > MYCARMAX) wn = MYCARMAX - 3;
}
if(k ===37){
wn -=1;
if(wn < 0) wn = 0;
}
}
}
function keyupop(e){
if(keyp = 1){ keyw = 0;; keyw2 = 0; keyp = 0;}
}
img_car[21].src = "car30.png";
img_car[22].src = "car31.png";
img_car[23].src = "car32.png";
img_car[24].src = "car33.png";
img_car[25].src = "car34.png";
img_car[26].src = "car35.png";
img_car[27].src = "car36.png";
if(idx === 4){
move_car(0);
draw_text("Select your car", 400, 160, WHITE, fnt_m, moj_m);
for(i=0; i < 3; i++){
x = 160+240*i;
y = 300;
col = BLACK;
if(i+wn === mycar){
col = "rgb(0, 128, 255)";
}
ctx.fillStyle = col;
ctx.fillRect(x-100, y-80, 200, 160);
draw_text("[" + (i+1) + "]", x-40, y-50, WHITE, fnt_m, moj_m);
ctx.drawImage(img_car[3+(i+wn)*7], x-100, y-20);
}
if(3+wn < MYCARMAX){
draw_text("→", 750, 350, GREEN, fnt_m, moj_m);
}
if(3+wn > 3){
draw_text("←", 5, 350, GREEN, fnt_m, moj_m);
}
draw_text("[Enter] OK!", 300, 430, GREEN, fnt_m, moj_m);
if(keyw4 === 1) mycar = 0+wn;
if(keyw4 === 2) mycar = 1+wn;
if(keyw4 === 3) mycar = 2+wn;
if(keyw3 === 2) { idx = 0; keyw3 = 0;}
}
