<html>
<meta http-equiv="content-type" charset="utf-8">
<head>
<title>JSでRPG 02 - 実験サイト</title> </head>
<body>
<canvas id="Gr0CanvasID" width="640" height="100"></canvas><br>
<canvas id="Gr1CanvasID" width="640" height="480"></canvas><br>
<canvas id="Gr2CanvasID" width="640" height="100"></canvas><br>
<script language="JavaScript">
window.onload = function(){
AutoExecFunction();
}
//var rect_canvasW = document.getElementById("Gr0CanvasID");
//var rect_ctxW = rect_canvasW.getContext("2d");
var rect_ctx0 = document.getElementById("Gr0CanvasID").getContext("2d");
var rect_ctxW = document.getElementById("Gr1CanvasID").getContext("2d");
var rect_ctx2 = document.getElementById("Gr2CanvasID").getContext("2d");
var MapData = new Array(1024);
var MapPosX = 0;
var MapPosY = 0;
// 画像
var ImgField = new Image(); // フィールド
var ImgFieldEnable = false;
var ImgCharMain = new Image(); // メインキャラ
var ImgCharMainEnable = false;
var ImgCharMainKage = new Image(); // メインキャラ影
var ImgCharMainKageEnable = false;
function AutoExecFunction() {
// 四角を描いてみる
////rect_ctxW.beginPath();
rect_ctx0.strokeRect(0, 0, 640, 100);
rect_ctx2.strokeStyle = "rgba( 0, 0, 0,1.0)"; // 線の色
rect_ctx2.fillStyle = "rgba( 64,180, 64,1.0)"; // 中の色
rect_ctx2.fillRect (0 ,0, 100, 100);
rect_ctx2.strokeRect(0, 0, 100, 100);
//// 線を引いてみる
//rect_ctxW.beginPath() //パスをリセット
//rect_ctxW.moveTo(10, 10) //開始座標指定
//rect_ctxW.lineTo(20, 20) //ライン描画
//rect_ctxW.stroke() // 輪郭表示
//var img_element = document.createElement("img");
//img_element.src = "./map.png";
//img_element.alt = "Bear";
//img_element.width = 200;
//const ImgField = new Image();
ImgField.src = "../rpg-img/map.png";
ImgField.onload = () => {
ImgFieldEnable=true;
//rect_ctxW.drawImage(ImgField, 0, 0,32,32, 0, 0,32,32);
//// 150, // sx (元画像の切り抜き始点X)
//// 130, // sy (元画像の切り抜き始点Y)
//// 130, // sWidth (元画像の切り抜きサイズ：横幅)
//// 180, // sHeight (元画像の切り抜きサイズ：高さ)
//// 0, // dx (Canvasの描画開始位置X)
//// 0, // dy (Canvasの描画開始位置Y)
//// 480, // dWidth (Canvasの描画サイズ：横幅)
//// 680 // dHeight (Canvasの描画サイズ：高さ)
//rect_ctxW.drawImage(ImgField, 0, 0,32,32, 32, 0,32,32);
};
// メインキャラ
ImgCharMain.src = "../rpg-img/char-main.png";
ImgCharMain.onload = () => { ImgCharMainEnable=true; };
// メインキャラ影
ImgCharMainKage.src = "../rpg-img/char-main-kage.png";
ImgCharMainKage.onload = () => { ImgCharMainKageEnable=true; };
//input_key_buffer[37] = false;
//input_key_buffer[38] = false;
//input_key_buffer[39] = false;
//input_key_buffer[40] = false;
// document.write("aa");
for(let idx = 0; idx < MapData.length; idx++ ) {
MapData[idx] = new Array(1024).fill(0);
}
for(let idx = 0; idx < 100000; idx++ ) {
RndX = Math.round( Math.random() * 1023 );
RndY = Math.round( Math.random() * 1023 );
MapData[RndX][RndY] = 1;
//document.write(RndX + " " + RndY + "<BR>" );
}
//document.write("aa");
}
FillColor = "rgba( 0, 0, 0,1.0)";
BackColor = "rgba(255,255,180,1.0)";
Cntkeydown = 0;
document.body.addEventListener( 'keydown' , event => {
//if (event.key === 'v' ) {
rect_ctx0.strokeStyle = FillColor; // 線の色
rect_ctx0.fillStyle = BackColor; // 中の色
rect_ctx0.strokeRect(10 , 50 - 13 , 100, 15);
rect_ctx0.fillRect (10 , 50 - 13 , 100, 15);
rect_ctx0.fillStyle = FillColor; // 中の色
rect_ctx0.font = "12px serif";
rect_ctx0.fillText(event.key + Cntkeydown , 10, 50);
//}
Cntkeydown++;
});
Cntonkeydown = 0;
// キーボードの入力状態を記録する配列
var input_key_buffer = new Array();
document.onkeydown = function (e){
input_key_buffer[e.keyCode] = true;
rect_ctx0.strokeStyle = FillColor; // 線の色
rect_ctx0.fillStyle = BackColor; // 中の色
rect_ctx0.strokeRect(10 , 70 - 13 , 100, 15);
rect_ctx0.fillRect (10 , 70 - 13 , 100, 15);
rect_ctx0.fillStyle = FillColor; // 中の色
rect_ctx0.font = "12px serif";
rect_ctx0.fillText( e.keyCode + " ON " + Cntonkeydown , 10, 70);
Cntonkeydown++;
};
document.onkeyup = function (e){
input_key_buffer[e.keyCode] = false;
rect_ctx0.strokeStyle = FillColor; // 線の色
rect_ctx0.fillStyle = BackColor; // 中の色
rect_ctx0.strokeRect(10 , 70 - 13 , 100, 15);
rect_ctx0.fillRect (10 , 70 - 13 , 100, 15);
rect_ctx0.fillStyle = FillColor; // 中の色
rect_ctx0.font = "12px serif";
rect_ctx0.fillText( e.keyCode + " OFF " + Cntonkeydown , 10, 70);
};
function dbgmsg(){
rect_ctx0.strokeStyle = FillColor; // 線の色
rect_ctx0.fillStyle = BackColor; // 中の色
rect_ctx0.strokeRect(10 , 30 - 13 , 100, 15);
rect_ctx0.fillRect (10 , 30 - 13 , 100, 15);
rect_ctx0.fillStyle = FillColor; // 中の色
rect_ctx0.font = "12px serif";
rect_ctx0.fillText("X:" + MainCharPosX + " Y:" + MainCharPosY , 10, 30);
}
var FullCount = 0;
var MoveCharCount = 0;
var IsMoveChar = false; // 今移動中か
var MainCharPosX = 0;
var MainCharPosY = 0;
var MapOffsetX = 0;
var MapOffsetY = 0;
const countUp = () => {
IntervalExecFunction();
}
setInterval(countUp, 100);
// ----------------------------------------------------------------------------------------------------------------------------------------------------------------
// ----------------------------------------------------------------------------------------------------------------------------------------------------------------
function IntervalExecFunction() {
rect_ctx0.strokeStyle = FillColor; // 線の色
rect_ctx0.fillStyle = BackColor; // 中の色
rect_ctx0.strokeRect(10 , 90 - 13 , 100, 15);
rect_ctx0.fillRect (10 , 90 - 13 , 100, 15);
rect_ctx0.fillStyle = FillColor; // 中の色
rect_ctx0.font = "12px serif";
rect_ctx0.fillText( FullCount + " ", 10, 90);
//dbgmsg();
FullCount++;
var ImgStandby = true;
if( ImgFieldEnable == true
&& ImgCharMainEnable == true
&& ImgCharMainKageEnable == true ){
ImgStandby = true;
}
var CharSizeXY = 32; // １キャラのサイズ
var MoveStep = 8; // 移動のステップ数
var FieldPosX = 0;
var FieldPosY = 0;
var CharPosX = 1;
var CharPosY = 1;
dbgmsg();
if( IsMoveChar == false ){
// 移動中でない場合
MainCharPosX = 1;
if( input_key_buffer[37] == true ){ // ←
MapPosX--;
MainCharPosY = 1;
IsMoveChar = true;
}else if( input_key_buffer[38] == true ){ // ↑
MapPosY--;
MainCharPosY = 3;
IsMoveChar = true;
}else if( input_key_buffer[39] == true ){ // →
MapPosX++;
MainCharPosY = 2;
IsMoveChar = true;
}else if( input_key_buffer[40] == true ){ // ↓
MapPosY++;
MainCharPosY = 0;
IsMoveChar = true;
}
}
if( IsMoveChar == true ){
// 移動中の場合
if( MainCharPosX == 1 ){
MoveCharCount = 0;
}
if( MoveCharCount == 0 || MoveCharCount == 1 ){
MainCharPosX = 0;
}else{
MainCharPosX = 2;
}
switch( MainCharPosY ){
case 1: // ←
MapOffsetX = (MoveCharCount - 3) * MoveStep;
if( MapOffsetX == 0 ){
IsMoveChar = false;
}
break;
case 3: // ↑
MapOffsetY = (MoveCharCount - 3) * MoveStep;
if( MapOffsetY == 0 ){
IsMoveChar = false;
}
break;
case 2: // →
MapOffsetX = (3 - MoveCharCount) * MoveStep;
if( MapOffsetX == 0 ){
IsMoveChar = false;
}
break;
default: // 0:↓
MapOffsetY = (3 - MoveCharCount) * MoveStep;
if( MapOffsetY == 0 ){
IsMoveChar = false;
}
}
MoveCharCount++;
}
if( ImgStandby == true ){
for( IdxY = 0; IdxY < 15; IdxY++) {
for( IdxX = 0; IdxX < 20; IdxX++) {
// 背景
rect_ctxW.drawImage(ImgField
, 0
, 0
, CharSizeXY
, CharSizeXY
, FieldPosX + IdxX * CharSizeXY + MapOffsetX
, FieldPosY + IdxY * CharSizeXY + MapOffsetY
, CharSizeXY
, CharSizeXY
);
if( MapData[IdxX + MapPosX][IdxY + MapPosY] == 1 ){
// 上乗画像
rect_ctxW.drawImage(ImgField
, CharPosX * CharSizeXY
, CharPosY * CharSizeXY
, CharSizeXY
, CharSizeXY
, FieldPosX + IdxX * CharSizeXY + MapOffsetX
, FieldPosY + IdxY * CharSizeXY + MapOffsetY
, CharSizeXY
, CharSizeXY
);
}
}
}
IdxX = 10;
IdxY = 7;
// メインキャラの影を表示
rect_ctxW.drawImage(ImgCharMainKage
, MainCharPosX * CharSizeXY
, MainCharPosY * CharSizeXY
, CharSizeXY
, CharSizeXY
, FieldPosX + IdxX * CharSizeXY
, FieldPosY + IdxY * CharSizeXY
, CharSizeXY
, CharSizeXY
);
// メインキャラを表示
rect_ctxW.drawImage(ImgCharMain
, MainCharPosX * CharSizeXY
, MainCharPosY * CharSizeXY
, CharSizeXY
, CharSizeXY
, FieldPosX + IdxX * CharSizeXY
, FieldPosY + IdxY * CharSizeXY
, CharSizeXY
, CharSizeXY
);
}
}
</script>
</body>
</html>
