HTML5とJavaScriptで簡単にゲームが作れるライブラリです！ 以上.
ハッカソンでぼくが作ったくまのゲームをベースに説明していきます.
･どんなゲームか?
画面中央にいるひらめに,くまが当たるとくまが消えます.それを回避しゴールまでくまを導くのがゲームの趣旨です.
･操作方法
ゲームで下のくま達は基本的に右側に走ります.くまをクリックしてやることによりランダムでくまを動かすことが出来ます.
因みに,ひらめもPCの十字キーを使い操作できます.
HTMLはbodyの中に何も書きません.headに準備くらいですね.
ぼくはこんな感じでで書きました.
↑<body>の中身を書かないのはきれい好きです.
続いて,javascript
enchant();
window.onload = function(){
var i;
var game = new Game(320, 320);
var directx =1;
var directy =1;
game.fps = 10;
game.preload("chara1.png");
game.preload("hirame.gif");
game.onload = function(){
//hirame
hirame = new Sprite(32, 32);
hirame.image = game.assets["hirame.gif"];
hirame.x = 280;
hirame.y = 60;
hirame.frame = 5;
game.rootScene.addChild(hirame);
//kuma
newbear = new Array();
for(i =0; i <= 40; i++){
newbear[i] = new Sprite(32, 32);
newbear[i].image = game.assets["chara1.png"];
newbear[i].x = 0;
newbear[i].y = i*32;
newbear[i].frame = 5;
game.rootScene.addChild(newbear[i]);
newbear[i].addEventListener("enterframe", function(){
this.x += 1;
this.frame = this.age % 2 + 6;
if(this.x > 320){
var uho ="
クリア！
";
$("body").append(uho);
$("div#kuria").css("color","blue");
game.stop();
}
if(this.within(hirame, 40)) {
game.rootScene.removeChild(this);
}
});
newbear[i].addEventListener("touchstart", function(){
this.x += Math.random()*10;
this.y += Math.random()*10;
this.frame = this.age % 2 + 6;
});
}
hirame.addEventListener("enterframe", function(){
hirame.x -=15*directx;
hirame.y -=15*directy;
});
hirame.addEventListener(Event.ENTER_FRAME, function(){
if (game.input.left && (hirame.x > 0)){
hirame.x = hirame.x - 30;
}
if (game.input.right && (hirame.x < game.width-hirame.width)){
hirame.x = hirame.x + 30;
}
if (game.input.down && (hirame.y > 0)){
hirame.y = hirame.y + 30;
}
if (game.input.up && (hirame.y < game.width-hirame.width)){
hirame.y = hirame.y - 30;
}
});
hirame.addEventListener(Event.ENTER_FRAME, function(){
// 画面外かどうか調べる
if ((hirame.x < 0) || (hirame.x > (game.width-hirame.width))){
directx = directx * -1;
}
if ((hirame.y < 0) || (hirame.y > (game.height-hirame.height))){
directy = directy * -1;
}
});
};
game.start();
};
説明
1行目ではenchant.jsの呼び出しです.
3～6行目は変数宣言です.4行目は画面の大きさ設定でブラウザの左上からx軸y軸ともどもに320px設定しました.
9行目は1秒間に何回画面が更新されるかです.10回に設定してます.
10,11行目はくまとひらめ(キャラクター)の画像の先読み込みです.
15行目はひらめの大きさ指定です.4行目と同じ形で指定してます.
16行目は11行目でpreloadした画像を指定しています.
17,18行目はひらめの初期ポジションです.17行目はx軸,18行目はy軸を設定してます.
21行目のrootSceneとはgameオブジェクトにはデフォルトであたえられている1つの Scene オブジェクトです.
今回はSceneという機能を使わなかったのですが,RPG等でいうとバトル前→バトル→バトル後みたいに画面がかわりますよね.そういうことができる機能です.
33行目は"enterframe"というイベントが起きたときの処理を書いています.
36～43行目はクリアになった時の処理です.
42行目はゲームが終わりになる処理です.
44行目はひらめとくまが当たったときの処理です.
45行目のremoveChildでくまが消えます.
48行目はマウスでクリックしたときの処理です.
61～74行目はボタンイベントです.game.input.○○で○○のボタンを押したときの処理がかけます.75行目～83行目はひらめが画面外に消えそうになったら方向を帰る処理です.
85行目はgameスタートの処理です.
以上です！
簡単なので是非やってみてください！
This is quite a good blog.Are you also searching for <a href=
返信削除'www.nursingwritingcenter.com/bsn-writing-services ">BSN Writing Services?</a> we are the best solution for you. We are best known for delivering the best bsn writing services to students without having to break the bank.
Your blogs are great.Are you also searching for Nursing Writing Help? we are the best solution for you. We are best known for delivering nursing writing services to students without having to break the bank.
返信削除