HTML5+JavaScriptによるRPG制作
【基本機能】

HTML5のcanvas機能を利用した、基本的な機能について考察してみる。

HTML5のcanvas機能
PNG画像を保存する関数
直線を引く関数
カラー版直線を引く関数
三角形を描画する関数
カラー版三角形を描画する関数
三角形を塗りつぶす関数
カラー版三角形を塗りつぶす関数
JavaScriptのキーコード




HTML5のcanvas機能

html5jsrpg.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta name="robots" content="noindex,nofollow">
<meta charset="utf-8" />
<title>HTML5+JavaScriptによるRPG制作</title>
<script language="JavaScript" type="text/javascript">
// グローバル変数
var cvs; // canvas要素のオブジェクトを取得する為の変数
var cnt; // コンテキストを取得する為の変数

window.onload = function(){
  cvs = document.getElementById("html5jsrpg"); // canvas要素のオブジェクトを取得
  cnt = cvs.getContext("2d"); // コンテキストを取得
  cnt.fillStyle = "#808080"; // canvasの背景色(灰色)を指定
  cnt.fillRect(0,0,640,480); // canvas全体を背景色の矩形で塗りつぶす
};
</script>
</head>
<body bgcolor="#c0c0c0">
<div style="text-align:center;">
<h1>HTML5+JavaScriptによるRPG制作</h1>
<canvas id="html5jsrpg" width="640" height="480"></canvas>
</div>
</body>
</html>

(解説) HTML5の雛形。今後は、ここに色々と追加・変更を加えていく。


背景画像の挿入

html5jsrpg.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta name="robots" content="noindex,nofollow">
<meta charset="utf-8" />
<title>HTML5+JavaScriptによるRPG制作</title>
<script language="JavaScript" type="text/javascript">
// グローバル変数
var cvs; // canvas要素のオブジェクトを取得する為の変数
var cnt; // コンテキストを取得する為の変数

window.onload = function(){
  cvs = document.getElementById("html5jsrpg"); // canvas要素のオブジェクトを取得
  cnt = cvs.getContext("2d"); // コンテキストを取得
  cnt.fillStyle = "#808080"; // canvasの背景色(灰色)を指定
  cnt.fillRect(0,0,640,480); // canvas全体を背景色の矩形で塗りつぶす

  var lattice = new Image();
  lattice.src = "lattice.png";
  lattice.onload = function () {
    cnt.drawImage(lattice, 0, 0, 640, 480, 0, 0, 640, 480);
  };

};
</script>
</head>
<body bgcolor="#c0c0c0">
<div style="text-align:center;">
<h1>HTML5+JavaScriptによるRPG制作</h1>
<canvas id="html5jsrpg" width="640" height="480"></canvas>
</div>
</body>
</html>

(解説) 上記の雛形に、drawImageメソッドを用いて、背景画像を挿入したもの。




PNG画像を保存する関数

saveasPNG関数

// PNG画像として保存
var saveasPNG = function(){
  var png = cvs.toDataURL("image/png");
  document.getElementById("newImg").src = png;
};

(解説) 




直線を引く関数

drawLine関数

// 直線を引く関数
var drawLine = function(x0, y0, x1, y1){
  cvs = document.getElementById("html5jsrpg"); // canvas要素のオブジェクトを取得
  cnt = cvs.getContext("2d"); // コンテキストを取得
  cnt.beginPath();
  cnt.moveTo(x0,y0);
  cnt.lineTo(x1,y1);
  cnt.stroke();
};

(解説) 直線を引く関数。


カラー版直線を引く関数

drawColorLine関数

// カラー版直線を引く関数
var drawColorLine = function(x0, y0, x1, y1, color){
  cvs = document.getElementById("html5jsrpg"); // canvas要素のオブジェクトを取得
  cnt = cvs.getContext("2d"); // コンテキストを取得
  cnt.beginPath();
  cnt.moveTo(x0,y0);
  cnt.lineTo(x1,y1);
  cnt.strokeStyle = color;
  cnt.stroke();
};

(解説) カラー版直線を引く関数。


三角形を描画する関数

drawTriangle関数

// 三角形を描画する関数
var drawTriangle = function(x0, y0, x1, y1, x2, y2){
  cvs = document.getElementById("html5jsrpg"); // canvas要素のオブジェクトを取得
  cnt = cvs.getContext("2d"); // コンテキストを取得
  cnt.beginPath();
  cnt.moveTo(x0,y0);
  cnt.lineTo(x1,y1);
  cnt.lineTo(x2,y2);
  cnt.closePath();
  cnt.stroke();
};

(解説) 三角形を描画する関数。


カラー版三角形を描画する関数

drawColorTriangle関数

// カラー版三角形を描画する関数
var drawColorTriangle = function(x0, y0, x1, y1, x2, y2, color){
  cvs = document.getElementById("html5jsrpg"); // canvas要素のオブジェクトを取得
  cnt = cvs.getContext("2d"); // コンテキストを取得
  cnt.beginPath();
  cnt.moveTo(x0,y0);
  cnt.lineTo(x1,y1);
  cnt.lineTo(x2,y2);
  cnt.closePath();
  cnt.strokeStyle = color;
  cnt.stroke();
};

(解説) カラー版三角形を描画する関数。


三角形を塗りつぶす関数

fillTriangle関数

// 三角形を塗りつぶす関数
var fillTriangle = function(x0, y0, x1, y1, x2, y2){
  cvs = document.getElementById("html5jsrpg"); // canvas要素のオブジェクトを取得
  cnt = cvs.getContext("2d"); // コンテキストを取得
  cnt.beginPath();
  cnt.moveTo(x0,y0);
  cnt.lineTo(x1,y1);
  cnt.lineTo(x2,y2);
  cnt.closePath();
  cnt.fill();
};

(解説) 三角形を塗りつぶす関数。


カラー版三角形を塗りつぶす関数

fillColorTriangle関数

// カラー版三角形を塗りつぶす関数
var fillColorTriangle = function(x0, y0, x1, y1, x2, y2, color){
  cvs = document.getElementById("html5jsrpg"); // canvas要素のオブジェクトを取得
  cnt = cvs.getContext("2d"); // コンテキストを取得
  cnt.beginPath();
  cnt.moveTo(x0,y0);
  cnt.lineTo(x1,y1);
  cnt.lineTo(x2,y2);
  cnt.closePath();
  cnt.fillStyle = color;
  cnt.fill();
};

(解説) カラー版三角形を塗りつぶす関数。




JavaScriptのキーコード

keydownfunc関数

var keydownfunc = function( event ) {

  var code = event.keyCode;

  switch (code) {
  case 37: // ←キー
    event.preventDefault();
    ;
    break;
  case 38: // ↑キー
    event.preventDefault();
    ;
    break;
  case 39: // →キー
    event.preventDefault();
    ;
    break;
  case 40: // ↓キー
    event.preventDefault();
    ;
    break;

  case 48: // 0キー
    event.preventDefault();
    ;
    break;
  case 49: // 1キー
    event.preventDefault();
    ;
    break;
  case 50: // 2キー
    event.preventDefault();
    ;
    break;
  case 51: // 3キー
    event.preventDefault();
    ;
    break;
  case 52: // 4キー
    event.preventDefault();
    ;
    break;
  case 53: // 5キー
    event.preventDefault();
    ;
    break;
  case 54: // 6キー
    event.preventDefault();
    ;
    break;
  case 55: // 7キー
    event.preventDefault();
    ;
    break;
  case 56: // 8キー
    event.preventDefault();
    ;
    break;
  case 57: // 9キー
    event.preventDefault();
    ;
    break;

  case 65: // aキー
    event.preventDefault();
    ;
    break;
  case 66: // bキー
    event.preventDefault();
    ;
    break;
  case 67: // cキー
    event.preventDefault();
    ;
    break;
  case 68: // dキー
    event.preventDefault();
    ;
    break;
  case 69: // eキー
    event.preventDefault();
    ;
    break;
  case 70: // fキー
    event.preventDefault();
    ;
    break;
  case 71: // gキー
    event.preventDefault();
    ;
    break;
  case 72: // hキー
    event.preventDefault();
    ;
    break;
  case 73: // iキー
    event.preventDefault();
    ;
    break;
  case 74: // jキー
    event.preventDefault();
    ;
    break;
  case 75: // kキー
    event.preventDefault();
    ;
    break;
  case 76: // lキー
    event.preventDefault();
    ;
    break;
  case 77: // mキー
    event.preventDefault();
    ;
    break;
  case 78: // nキー
    event.preventDefault();
    ;
    break;
  case 79: // oキー
    event.preventDefault();
    ;
    break;
  case 80: // pキー
    event.preventDefault();
    ;
    break;
  case 81: // qキー
    event.preventDefault();
    ;
    break;
  case 82: // rキー
    event.preventDefault();
    ;
    break;
  case 83: // sキー
    event.preventDefault();
    ;
    break;
  case 84: // tキー
    event.preventDefault();
    ;
    break;
  case 85: // uキー
    event.preventDefault();
    ;
    break;
  case 86: // vキー
    event.preventDefault();
    ;
    break;
  case 87: // wキー
    event.preventDefault();
    ;
    break;
  case 88: // xキー
    event.preventDefault();
    ;
    break;
  case 89: // yキー
    event.preventDefault();
    ;
    break;
  case 90: // zキー
    event.preventDefault();
    ;
    break;

  }

};

(解説) window.onload = function(){}の中に、
「window.addEventListener('keydown',keydownfunc,true);」
を記述





(解説) 





(解説) 





(解説) 




【没案】canvasレイヤーと背景画像の読み込みを追加したもの

html5jsrpg.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta name="robots" content="noindex,nofollow">
<meta charset="utf-8" />
<title>HTML5+JavaScriptによるRPG制作</title>
<script language="JavaScript" type="text/javascript">
// グローバル変数
var cvs1, cvs2; // canvas要素のオブジェクトを取得する為の変数
var cnt1, cnt2; // コンテキストを取得する為の変数

window.onload = function(){
  cvs1 = document.getElementById("background"); // canvas要素のオブジェクトを取得
  cnt1 = cvs1.getContext("2d"); // コンテキストを取得
  cnt1.fillStyle = "#808080"; // canvasの背景色(灰色)を指定
  cnt1.fillRect(0,0,640,480); // canvas全体を背景色の矩形で塗りつぶす

  var lattice = new Image();
  lattice.src = "lattice.png";
  lattice.onload = function () {
    cnt1.drawImage(lattice, 0, 0, 640, 480, 0, 0, 640, 480);
  };

  cvs2 = document.getElementById("html5jsrpg"); // canvas要素のオブジェクトを取得
  cnt2 = cvs2.getContext("2d"); // コンテキストを取得
  cnt2.fillStyle = "#808080"; // canvasの背景色(灰色)を指定
  cnt2.fillRect(0,320,640,160); // canvas全体を背景色の矩形で塗りつぶす
};
</script>
</head>
<body bgcolor="#c0c0c0" style="margin-left:auto;margin-right:auto;text-align:center;">
<div style="text-align:center;">
<h1>HTML5+JavaScriptによるRPG制作</h1>
<canvas id="background" style="position:absolute; left:360px;
 top:80px; z-index:1" width="640" height="480"></canvas>
<canvas id="html5jsrpg" style="position:absolute; left:360px;
 top:80px; z-index:2" width="640" height="480"></canvas>
</div>
</body>
</html>

(解説) 上記にcanvasレイヤーと背景画像の読み込みを追加したもの。
PNG画像として保存する機能との両立が難しいため、保留。




Shadow Academy トップへ戻る

inserted by FC2 system