ゲームを作る試み・その1

お世話になっております。
坂上です。
この前、社長についていった東大阪市民ふれあい祭りにて同友会の皆様がイライラ棒などのゲームを作ってちびっ子たちに楽しんでもらっていたのをふと思い出しまして

そういえば情報屋さんとしてゲームつくれないの?とか言われた気がするので大学時代に作った記憶を頼りにゲームを作ってみようかなと思った次第です。

そしてせっかくご覧いただいている皆様にもプログラムに触れてもらいたいのでなるべく簡単に書きます。皆さんもレッツプログラミング!

さてまず初めに開発環境なるものを用意します。
ちなみに今業務で使っているのはVisual Studioとかいうやつなのですが、え?そんなもの持ってない?調べたら無償版もあるけどダウンロードがめんどくさい?なるほど。じゃあ今このブログを見ているwebブラウザがあればなんとかなるようにしましょう。
(ケータイやスマホの方はファイル管理が非常に難しいのでPCをご用意ください。)

まずはデスクトップに適当なフォルダを作ってください。gameとかなんでもOKです。それをダブルクリックで開きます。

さらに右クリック>新規作成>テキストドキュメントを押すことで「新しいテキストドキュメント.txt」というのが作成されるかと思います。

そのテキストドキュメントに下記コードをコピペしてください。意味は後程説明します。今はおまじない程度に考えておいてください。

ーーーーーーーーー

<!DOCTYPE html>
<html>
<body>
<canvas id=”canvas” width=”500″ height=”500″></canvas>
<script type=”text/javascript” src=”main.js”></script>
</body>
</html>

ーーーーーーーーー

(ワードプレスでコードってどう貼るのが正解なのだろう・・・・)

そして、そのファイルの名前を変えます。ファイルを右クリックして「名前の変更」をクリックします。「main.html」にしましょう。ドット(.)以下(いわゆる拡張子)も変えるのがミソです。その際、拡張子を変更すると、ファイルが使えなくなる可能性があります。みたいなことを聞かれますが.htmlにすることで真価を発揮するファイルなので気にせず「はい」で変更してください。

残念なことにこれだけでは動きません。もうひとファイル作っていただく必要があります。

次もテキストドキュメントを新規作成してください。この時、先ほど作成したmain.htmlと同じフォルダ内に作成するようにしてください。

中身は以下をコピペでOKです。

ーーーーーーーーー

var canvas,context;
var x=10,y=10;

window.onload = function() {
canvas = document.getElementById(“canvas”);
context = canvas.getContext(‘2d’);
draw();
};

var draw = function(){
context.clearRect(0, 0, canvas.width, canvas.height);
context.fillStyle = “black”;
context.fillRect(x, y, 10, 10);
}

window.onkeydown = function(e) {
if(e.keyCode == 37){ x= x-5 }
if(e.keyCode == 38){ y= y-5 }
if(e.keyCode == 39){ x= x+5 }
if(e.keyCode == 40){ y= y+5 }
draw();
};

ーーーーーーーーー

ちょっとプログラムっぽさがでてきてる感じがしませんか?とはいえ、プログラマーから見たらオブジェクト指向とかいう基礎もできてない駄目コードなのですが、まずは動くことが大事なので気にしてはダメです。エンジニアのパパに見せて駄目だしされたらごめんなさい。

さて先ほどのファイルも名前と拡張子を変えていきます。「main.js」にしましょう。これも拡張子「.js」までちゃんと変えるようにしてください。これですべての準備が整いました。とりあえず、main.htmlをダブルクリックしてみてください。通常であればブラウザが立ち上がると思います。もし立ち上がらなければ、main.htmlを右クリック>プログラムから開く>Microsoft Edgeを起動してください。グーグルが好きなんだというあなたはGoogle Chromeで起動してください。

さて、画面の左上に黒い四角があるかと思います。なかったら、BELEZAのfacebookに報告してください(このブログにはコメント機能がないので)。黒い点があるかたはキーボードの矢印を押してみてください。どうですか?動きましたでしょうか?動けば成功です!もし動かなければBELEZAのfacebookに・・

さて、こんなのゲームじゃないじゃんと思われた方、そうです。こんなものはまだゲームとは言えません。自機っぽいのを作っただけです。これから敵とかスコアとか追加していかなければなりません。

しかし、今回は僕の体力的にもブログの長さ的にもどうやらここまでのようです。次回はコードの解説などできたらと思います。次回もよろしくお願いします。

2018-02-15 | Posted in ブログ, 坂上(システム事業部)Comments Closed 

関連記事