ホームページ講座
あえて旧式のＨＴＭＬ手書き
近年、ＷＥＢサービスの発展に伴い、ブログやＭｉｘｉなどのＳＮＳ、Twitterといったサービスによって、誰でも気軽に情報を世界に公開できるようになっています。
以前では、ネットに情報を公開するにはＨＴＭＬを覚える必要がありましたが、そんなことは現在では必要ありません。
ですが、このサイトはあえてＨＴＭＬによる手書きを選んでいます。
ここでは、HTMLの知識が多少ある方を中心に解説していきますので、単純に情報を公開したいと思う方は、ブログをすることがお勧めです。
いや、初心者でも、やりたいという根気があれば、WEBサイト作りは十分に楽しめます。
ゲームも作れるJavascript
ポイントはメインループ
Javascriptはブラウザで動作するプログラムであり、自由にHTMLの要素を書き換えることができます。
キーボードやマウスの入力をリアルタイムで検出することができます。
また、タイマーイベント(setInterval)「を使用すれば、一定の間隔で関数(メソッド)を実行することができます。
この組み合わせにより、ゲームプログラムで重要なメインループを実現することができます。
<script>
setInterval(main,16);
var sync=true;
function main(){
if(!sync)return false;
sync=false;
ctrl(); // 入力＆制御処理 割愛します
hit(); // 当たり判定処理 割愛します
sync=true;
}
</script>
基本はこれ、この関数で16ミリ秒ごとにmain関数を実行することができます。
ブロック要素でスプライトを実現
CSSでは、ブロック要素の縦と横の大きさを定義することができます。 また、表示する位置を座標で指定することもできます(position:absolute)。 さらに、CSSの設定では、背景画像を設定することもできます。 この組み合わせによって、２Ｄゲームで重要なスプライトを表現することができます。
<script>
<style>
/* スプライト */
.spr{
position:absolute;
}
/* 自機 */
#my{
width:16px;
height:16px;
top:30px;
left:10px;
}
</style>
<body>
<div id="main" class="scr">
<div id="my" class="spr"></div>
<div id="chp1" class="spr"></div>
<div id="chp2" class="spr"></div>
</div>
サンプルゲーム
ゲーム自体はプチコン１画面作品の「ホバリングゲーム」と同じ同じような内容です。
タイトル画面は作っていないので、起動と同時に始まります(やっつけなのでパソコン専用)。
「十字ボタンの上」で上昇、離すと下降。障害物にぶつからないように飛び続けるだけのゲーム。
サンプルなので、スコア表示もありません。
リトライしたかったら、F5でリロードしてください。
?
コメントを多めに入れておいたので、右クリックでソースを見れば、どういうことをやっているかはわかると思います。
また、このサイトでは以前に自分が作った、Javascriptで動作する簡単なゲームを公開しています。
HTML5でもない、Javascriptでも一応遊べるゲームができるということを知ってもらいたいです。
３ＤＳでも遊べるJavascriptゲーム
ニンテンドー３ＤＳブラウザでは、Javascriptが動作します。
よって、プログラム次第では遊べるゲームもできます。
ですが、Javascriptが遅いため、素早いゲームには向きませんでした。
サンプルゲームの３ＤＳ版
３ＤＳでプレイする
その他の作品(基本的に動きのあるゲームは重い)
3DSでも動く？Javascriptで動作するゲーム
。HTML 5はWebアプリケーションのクライアントサイド開発における事実上の標準技術です。Webブラウザが使える環境であればどこでも動作するため、スマートフォンはもちろん、最近ではテレビなどでも利用できます。本書はユーザビリティからパフォーマンスまで実際に利用する際に役立つ技を逆引きリファレンスとして活用できるテクニック集です。