JavaScript始めました | 株式会社ヘキサドライブ | HEXADRIVE | ゲーム制作を中心としたコンテンツクリエイト会社

HEXA BLOG

ヘキサブログ

プログラム

HEXA BLOGプログラム2011.10.7

JavaScript始めました

まず始めに前アップルＣＥＯのスティーブ・ジョブズ氏の訃報について、
哀悼の意を表し、心からご冥福をお祈りいたします。
ＰＣ業界に限らずゲーム業界等様々な業界に大きな影響を与えた偉大な方でした。
そんなアップル製品のMacBook Airを先日購入したgood sunこと山口です。
今回はそんなMac購入のきっかけにもなったお話です。
突然ですがJavaScriptご存知ですか?
Android開発で有名なJava言語とは全くの別物のブラウザ等で動くスクリプト言語です。
ブラウザで動作するので、OSを気にすることなくプログラムを記述することが出来ます。
その為持ち運びやすかったり、寝転びながら操作できるMacBook Airは最適な環境だったりします。
この寝転んで…がしたくてMacを買いました。
さて、なぜJavaScriptなのかですが、百聞は一見に如かず。
今回は簡単に最近噂のHTML5のcanvasの紹介を兼ねてJavaScriptのサンプルプログラムを作って見ました。
今回のサンプルはランダムな色の玉が跳ねるだけなのですがcanvasには画像も貼れます。
canvasを使うことでブラウザ内に自由に描画を行うことが出来ますし、
タイマを使って描画タイミングを制御することで、アクション性の高いゲームにも向いた処理が行えます。
実はこのcanvasは3D描画を扱うことも出来たりします。
魅力がたっぷり詰まった環境についてまだまだ色々語りたいのですが、今回はこの辺で。
今回のサンプルは
MacOSX LionでSafariとGoogle Chrome
WindowsのInternet Explorer9,Firefox,Google Chrome,Operaで動作確認を行なっております。
恐らくcanvasが使えるブラウザ全てで動作するのではないでしょうか?
残念ながらInternet Explorerは9より前のバージョンは動作対象外となります。
↓今回のサンプルコードです。ダウンロードはこちら。

&lt;!DOCTYPE html&gt;
&lt;html lang="ja"&gt;
&lt;head&gt;
&lt;meta charset="UTF-8"&gt;
&lt;title&gt;javascriptサンプル&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
&lt;/body&gt;
&lt;script type="text/javascript" charset="UTF-8"&gt;
//! スクリーンサイズ
Screen = {
width:320,
height:240
};
//! ノードクラス
function Node(){
// パラメータはランダムで決定
this.posx = Math.floor(Math.random() * Screen.width);
this.posy = Math.floor(Math.random() * Screen.height);
this.dirx = Math.ceil((Math.random() - 0.5) * 3);
this.diry = Math.ceil((Math.random() - 0.5) * 3);
this.color = "#"+((Math.floor(Math.random()*255) &lt;&lt; 16) | (Math.floor(Math.random()*255) &lt;&lt; 8) | Math.floor(Math.random()*255)).toString(16);
this.rad = Math.ceil(Math.random() * 15);
this.isFill = Math.random() &gt; 0.5 ? true : false;
}
//! 更新関数
Node.prototype.update = function(){
this.posx += this.dirx;
this.posy += this.diry;
if((this.posx &gt; Screen.width) || (this.posx &lt; 0)){
this.posx -= this.dirx;
this.dirx = -this.dirx;
}
if((this.posy &gt; Screen.height) || (this.posy &lt; 0)){
this.posy -= this.diry;
this.diry = -this.diry;
}
}
//! 描画関数
Node.prototype.draw = function(context2d){
context2d.beginPath();
context2d.arc(this.posx, this.posy, this.rad, 0, 360, false);
if(this.isFill == true){
context2d.fillStyle = this.color;
context2d.fill();
}else{
context2d.strokeStyle = this.color;
context2d.lineWidth = 2;
context2d.stroke();
}
context2d.closePath();
}
//! フレーム管理クラス
function Frame(nodeCount){
// クリアカラーとキャンバスサイズ
this.clearColor = "#404040";
// コンテキストの準備
this.canvas = window.document.getElementById("canvas");
this.context2d = this.canvas.getContext('2d');
this.canvas.width = Screen.width;
this.canvas.height = Screen.height;
// クリアカラーでクリアする
this.context2d.fillStyle = this.clearColor;
this.context2d.fillRect(0, 0, Screen.width, Screen.height);
// ノードの準備
this.nodes = new Array(nodeCount);
for(var i = 0; i &lt; nodeCount; i++){
this.nodes[i] = new Node();
}
}
//! 実行
Frame.prototype.run = function(lastTime){
// クリア
this.context2d.fillStyle = this.clearColor;
this.context2d.fillRect(0, 0, Screen.width, Screen.height);
//! 全てのノードを更新して
for(var i  = 0; i &lt; this.nodes.length; i++){
this.nodes[i].update();
this.nodes[i].draw(this.context2d);
}
//! 更新を行う
var nowTime = new Date();
// 20FPS
var nextTime = 50 - (nowTime.getTime() - lastTime.getTime());
if(nextTime &lt;= 0){
nextTime = 1;
}
var _this = this;
setTimeout(function(){_this.run(nowTime);}, nextTime);
}
var frame = new Frame(100);
frame.run(new Date());
&lt;/script&gt;
&lt;/html&gt;