Html5 inertia bird game production and sharing (classic game)

The classic game in the electronic dictionary back then, has since produced countless variants of the game. The original gameplay and operation are restored here. Realized this kind of "difficult" nostalgic classic game.

The gameplay is also very simple, you don't need to touch anything and keep going. . .

 

You can try it out, and the mobile phone will play better.

Click to play

There are also many variants of gameplay to recall:

Here, the LayaBox game framework is used for development, and the 2D framework technology is used to develop the game in terms of display and control.

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

In the near future, we will continue to produce more different types of H5 games and share the code.

Friends who are interested in the game can add attention

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

function realization

1. Created the inertial flight function of the bird, press and hold the screen to continue to accelerate upwards.

2. Game obstacles will appear randomly.

3. When the bird hits an obstacle or the ground, it prompts that the Game Over game is over.

4. Created the animation effect of the bird, the changes of the eyes and the propeller.

Source address: pro.youyu001.com

production ideas

1. In terms of display, the Layabox framework is used, and basic image display effects are added.

2. In terms of control, click and lift events of the mouse to control the flying effect of the character.

3. In the aspect of inertia, a speed variable is set, and the speed accelerates downward with time, simulating the effect of gravity acceleration.

4. In terms of animation, frame-by-frame animation of multiple pictures is used.

5. The last is the collision effect. Calculate the position of the character and the obstacle. If they overlap, the game will be over.

The above are some ideas and key points of development.

key code description

1. Created the game layer , UI layer , and added display pictures such as the background .

	//创建图层
	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. Press and lift the mouse to control the effect of whether the character is flying .

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. In the frame rate , the variable of speed is added , and the inertia effect is realized through uniform modification of the variable .

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. Use multiple pictures to create the effect of frame rate animation, control and define the playback speed.

	//图片地址
	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. Judge the position of the character and the obstacle, the positional relationship between the character and the ground, and prompt Game Over when there is an overlap.

//游戏结束提示
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();
}