HTML5 慣性鳥ゲームの制作と共有 (クラシック ゲーム)

当時の電子辞書に載っていた古典的なゲームは、その後無数のバリエーションを生み出してきました。ここでは、元のゲームプレイと操作が復元されます。こんな「難しい」懐かしの名作ゲームを実現しました。

ゲームプレイも非常にシンプルで、何も触れる必要はなく、そのまま進みます。。。

 

試してみると、携帯電話の再生が改善されます。

クリックして再生

ゲームプレイのバリエーションも数多くあります。

ここでは、開発には LayaBox ゲーム フレームワークが使用され、表示と制御の点では 2D フレームワーク技術がゲームの開発に使用されます。

-------------------------------------------------- --------------------------------------

近い将来、私たちはさらにさまざまなタイプの H5 ゲームを作成し、コードを共有し続けます。

ゲームに興味のある友達は注目を集めることができます

-------------------------------------------------- ------------------------------------------

機能実現

1. 鳥の慣性飛行機能を作成し、画面を長押しすると上向きに加速し続けます。

2. ゲームの障害物はランダムに表示されます。

3. 鳥が障害物や地面にぶつかると、ゲームオーバーのメッセージが表示されます。

4. 鳥のアニメーション効果、目、プロペラの変化を作成しました。

ソースアドレス: pro.youyu001.com

制作アイデア

1. 表示に関しては、Layabox フレームワークが使用され、基本的な画像表示効果が追加されます。

2. 制御に関しては、マウスのクリックおよびリフト イベントを使用して、キャラクターの飛行効果を制御します。

3. 慣性の面では、速度変数が設定され、速度は時間とともに下向きに加速し、重力加速度の影響をシミュレートします。

4. アニメーションに関しては、複数の画像のコマ送りアニメーションが使用されます。

5. 最後は衝突エフェクトで、キャラクターと障害物の位置を計算し、重なるとゲームオーバーです。

以上が開発のアイデアとポイントです。

キーコードの説明

1.ゲームレイヤー、UIレイヤーを作成し、背景などの表示絵を追加しました。

	//创建图层
	var gameCeng = new Laya.Sprite();
	Laya.stage.addChild(gameCeng);

	//创建UI图层
	var uiCeng = new Laya.Sprite();
	Laya.stage.addChild(uiCeng);

	//创建背景
	var bg = new Laya.Sprite();
	bg.loadImage("res/lianxi/flyChange/bg_0.png");
	gameCeng.addChild(bg);

	//添加树
	var tree = new Laya.Sprite();
	tree.loadImage("res/lianxi/flyChange/tree.png");
	gameCeng.addChild(tree);
	tree.y = 450;

	//障碍物层
	var crashCeng = new Laya.Sprite();
	gameCeng.addChild(crashCeng);

	//添加地面
	var ground = new Laya.Sprite();
	ground.loadImage("res/lianxi/flyChange/land.png");
	gameCeng.addChild(ground);
	ground.y = 600;

2.マウスを押して持ち上げて、キャラクターが飛行するかどうかの効果を制御します。

var isUp = false;
	Laya.stage.on(Laya.Event.MOUSE_DOWN, this, mouseDownHandler);
    function mouseDownHandler() {
		if(gameType == 2) {
			reset();

		} else {
			gameType = 1;

			ready.visible = false;
			readyTip.visible = false;

			isUp = true;
			wheels.play();
		}

    }
	Laya.stage.on(Laya.Event.MOUSE_UP, this, mouseUpHandler);
    function mouseUpHandler() {
		if(gameType != 1) {
			return;
		}
		isUp = false;
		wheels.stop();
    }

3.フレームレートには速度という変数が追加され、変数を一律に変更することで慣性効果が実現されます。

function animate() {
	role.y += roleSpeedY;
	if(role.y < 0){
		role.y = 0;
		roleSpeedY = 0;
	}

	if(isUp == true) {
		roleSpeedY -= 0.3;
	} else {
		roleSpeedY += 0.3;
	}
}
Laya.timer.frameLoop(1, this, animate);

4. 複数の画像を使用してフレーム レート アニメーションの効果を作成し、再生速度を制御および定義します。

	//图片地址
	var urlArr = ["res/lianxi/flyChange/bear_0_0_0.png","res/lianxi/flyChange/bear_0_0_1.png","res/lianxi/flyChange/bear_0_0_2.png"];
	//创建动画实例
	var role = new Laya.Animation();
	role.loadImages(urlArr);
	role.play();
	//设置每张图的播放时间间隔 毫秒ms
	role.interval = 500; 
	role.pivotX = 48;
    role.pivotY = 48;
	role.x = 100;
	role.y = 300;
	gameCeng.addChild(role);

	//图片地址
	var wheelsArr = ["res/lianxi/flyChange/wheels_0.png","res/lianxi/flyChange/wheels_1.png","res/lianxi/flyChange/wheels_2.png","res/lianxi/flyChange/wheels_3.png"];
	//创建动画实例
	var wheels = new Laya.Animation();
	wheels.loadImages(wheelsArr);
	//设置每张图的播放时间间隔 毫秒ms
	wheels.interval = 50; 
	role.addChild(wheels);

5. キャラクターと障害物の位置、キャラクターと地面の位置関係を判断し、重なった場合はゲームオーバーを促します。

//游戏结束提示
var overTip = new Laya.Sprite();
overTip.loadImage("res/lianxi/flyChange/text_gameover.png");
uiCeng.addChild(overTip);
overTip.y = 300;
overTip.x = 70;
overTip.visible = false;

function animate() {
	if(gameType != 1) {
		return;
	}

	addCrane();
	for(var i = 0; i < craneArr.length; i ++) {
		var crane = craneArr[i];
		crane.x -= 2;
		//碰撞判断
		if(role.x > crane.x && role.x < crane.x + crane.width && role.y < crane.y + crane.height && role.y > crane.y) {
			over();
		}
	}
	
	//碰到地面 game over
	if(role.y > 570) {
		over();
	}
}
Laya.timer.frameLoop(1, this, animate);

function over() {
	gameType = 2;
	overTip.visible = true;
	wheels.stop();
}