JavaScript and HTML5 programming game Flappy Bird simple version-JS Tutorial-php.cn

Home

Web Front-end

JS Tutorial

JavaScript and HTML5 programming game Flappy Bird simple version

小云云

Mar 17, 2018 pm 04:27 PM

html5javascript

In the previous article, we shared with you how to write a pushing box game with JS and H5. This article mainly shares with you how to write a classic game: Flappy Bird simple version using js and H5

Statement: I am new to JS and H5. This article involves the writing method and algorithm. If there is any better improvement, please give me your suggestions~

1. Ability requirements:

2. The following work needs to be completed:

1. When designing the game (including birds, pillars, etc.), we must follow a clear logic: the bird is doing vertical Straight up throw and free fall motion, the pillar is continuously created and moves to the left, isolating the bird and the pillar, each of them is their own)

2. Draw a bird that cannot flap its wings

3. Let the bird fly (free fall, click the mouse to throw it vertically)

4. Logic part (the pillar moves to the left, the bird hits the pillar and the game ends, etc.)

5. Score calculation (score increases by 1 for each pillar passed)

6. Add background (pictures, music, sound effects, etc.)

3. Start writing:

First We need to create 4 classes: game.html (used to run the game), game.js (used to write the logic part), paint.js (used to draw objects), pojo.js (used to create objects and encapsulate them)

game.html class:

Written in HTML5, you need to add , and I am used to setting margin to 0 ：

<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8" />
		<title>flappy bird</title>
		
		<style>
		/*设置边距为0*/
			body{
				margin:0px;
				overflow:hidden;
			}
		/*加背景*/
			#can1{
				background-image: url(背景.jpg);
				background-size:100%100%;
			}
		</style>
		<script type="text/javascript" src="pojo.js"></script>
		<script type="text/javascript" src="game.js"></script>
		<script type="text/javascript" src="paint.js"></script>
		<!--调用run()-->
		<script>
		    window.onload = function (){
			run();
		    };
		</script>
	</head>
	<body>
		<!--画布标签，设置长宽像素-->
		<canvas id="can1" width="1536" height="733"></canvas>
		<!--加入背景音乐-->
		<audio src="bgm.mp3" autoplay loop></audio>
		<!--加入点击鼠标触发的音效-->
		<audio id="audio1" autoplay></audio>
	</body>
</html>

In fact, the run() method is called in the html file, and the

pojo.js class: used to store classes, we need two classes: the bird's pillar. Here, we are doing a simple version, so the bird is replaced by a circle approximation, so that the subsequent collision detection will be easier to write. Among them, the determined value is written directly, and the variable value is not assigned.

The writing format is as follows:

//鸟类（圆代替）
function Bird(color){
	//鸟的颜色
	this.color = color;
	//鸟巩膜的颜色
	this.eyeColor = &#39;white&#39;;
	//鸟巩膜的半径
	this.eyeRadius = 10;
	//鸟瞳孔的颜色
	this.eyeInsideColor = &#39;black&#39;;
	//鸟瞳孔的半径
	this.eyeInsideRadius = &#39;2.5&#39;;
	//鸟初始位置
	this.left = 100;
	this.top = 300;
	//鸟身体半径
	this.size = 25;
	//鸟的速度
	this.v = 0;		//向下为+	向上为-
	//分数计算
	this.score = 0;
	//是否存活
	this.isLive = true;
}

Note: We must take all the attributes of the bird into consideration and encapsulate them in game.js Use

Then we need to write the pillar class:

//柱子类
//上面下面各一个，在一个竖直线上；
//上下柱子的间隔固定；
//左右两列柱子间隔固定；
//柱子的粗细固定；
//柱子相对鸟的速度
function Pillar(position, length){
	//柱子颜色
	this.color = &#39;lime&#39;;
	//柱子向左移动速度
	this.v = 8;
	//柱子宽度
	this.width = 80;
	//柱子位置，是每个柱子左上角的位置
	this.position = position;
	//柱子长度
	this.length = length;
	//柱子是否存在，意思一会解释
	this.isLive = true;
	//鸟是否通过当前柱子
	this.isPass = false;
}

Next we have to write the paint.js class, which is also a comparison A troublesome class, you need to use

First and most important, I suggest putting paint.js at the front every time: clear the screen (if If it is not clear, the last drawing will remain and become the "movement track"):

//清屏
function clearScreen(ctx){
	ctx.clearRect(0, 0, 1536, 750);
}

Then, we draw the bird. Before drawing the bird, I suggest using Use the drawing tool to draw the general shape of the bird so that you can draw it with code later. This is the pattern of the bird I designed (the wings are a bit complicated and I don’t know how to draw them yet, so I didn’t draw them in the program, sorry)

After the design is completed, we can start painting in paint.js (I wrote the acquisition of the canvas and the creation of the brush in game.js instead of paint.js):

//画鸟，同样，所有的变量属性都要考虑到，并且在画巩膜，瞳孔，嘴唇时候都要以变量作为基准！里面的参数需要耐下心来调整。
function paintBird(ctx, left, top, size, color){
	ctx.beginPath();
	ctx.fillStyle = color;
	ctx.arc(left, top, size, 0, 2*Math.PI);//left:100	top:300		size:25
	ctx.fill();
	//画巩膜
	ctx.beginPath();
	ctx.fillStyle = bird.eyeColor;
	ctx.arc(left+13,top-8,bird.eyeRadius,0,2*Math.PI);
	ctx.fill();
	//画瞳孔
	ctx.beginPath();
	ctx.fillStyle = bird.eyeInsideColor;
	ctx.arc(left+18,top-8,bird.eyeInsideRadius,0,2*Math.PI);
	ctx.fill();
	//画嘴唇
	ctx.beginPath();
	ctx.strokeStyle = &#39;black&#39;;
	ctx.fillStyle = &#39;#FC6747&#39;;
	ctx.moveTo(left+4, top+3);
	ctx.lineTo(left+29, top+3);
	ctx.lineTo(left+33, top+6);
	ctx.lineTo(left+29, top+9);
	ctx.lineTo(left+32, top+12);
	ctx.lineTo(left+29, top+15);
	ctx.lineTo(left+4, top+15);
	ctx.lineTo(left+1, top+9);
	ctx.closePath();
	ctx.stroke();
	ctx.fill();
	ctx.beginPath();
	ctx.strokeStyle = &#39;black&#39;;
	ctx.moveTo(left+1,top+9);
	ctx.lineTo(left+29,top+9);
	ctx.stroke();
	//画翅膀，简易版先不画
}

This is what the painting looks like (I want to laugh just looking at it:) )

Then draw the pillars:

//画柱子，我用了渐变色，虽然调整的并不是很好，但是还能看
function paintPillar(ctx, left, top, width, height){
	ctx.beginPath();
	var grd=ctx.createLinearGradient(left,top,left+height,top);
	grd.addColorStop(0,"green");
	grd.addColorStop(0.45,"white");
	grd.addColorStop(1,"green");
	ctx.fillStyle = grd;
	ctx.fillRect(left, top, width, height);
}

Then we also need to display the score:

//计分
function paintScore(ctx, score){
	ctx.fillStyle = &#39;red&#39;;
	ctx.font = &#39;40px 黑体&#39;;
	ctx.fillText(&#39;分数:&#39;+score, 1320, 40);
}

Here, our Half of the work is done, and the next step is the most difficult part, game.js, which needs to consider logic, collision, movement, scoring and many other issues.

First introduce how to design the free fall of a bird:

Follow the above method , write the program as follows:

//点击鼠标事件
document.onmousedown = function (ev){
	//每点击一下出来音效
	var oAudio = document.getElementById(&#39;audio1&#39;);
	oAudio.src = &#39;扇翅膀emm.wav&#39;;
	//每点击一下做一次竖直上抛
	jump(bird);
}

//鸟自由落体
function drop(bird){
	bird.top = bird.top+bird.v;
	bird.v++;
}

//设置竖直上抛，直接将速度修改为负数即可
function jump(bird){
	bird.v = -13;
}

Next is game.js, for easy explanation, I will explain it directly in the code while writing:

//游戏逻辑中枢
//创建鸟的对象
var bird = new Bird('#FBEE30');
//创建柱子对象，把20个柱子放到数组中
var pillar = new Array(20);
var count = 0;
function run(){
	//获取画布
	var oCan = document.getElementById('can1');
	//创建画笔，2d
	var ctx = oCan.getContext('2d');
	//这timer1是游戏页面显示的东西的线程，每25毫秒刷新一次
	var timer1 = setInterval(function (){
		//每次画之前先清屏
		clearScreen(ctx);
		//判断鸟是否碰上柱子（是否死亡），死亡则弹框，结束线程
		if(!bird.isLive){
			alert('游戏结束!你的分数是'+bird.score+'!你好菜啊!')
			clearInterval(timer1);
			clearInterval(timer2);
		}
		//降落一下
		drop(bird);
		//判断鸟是否通过柱子
		for(var i = 0; i < pillar.length; i++){
			if(pillar[i] != null && pillar[i].isLive){
				//移动柱子
				movePillar(pillar[i]);
				//画柱子
				paintPillar(ctx, pillar[i].position.x, pillar[i].position.y, pillar[i].width, pillar[i].length);
				//计分，如果每个鸟的身体（圆）的左边通过一个柱子的最右边时，加一分
				if(pillar[i].position.x+pillar[i].width <= bird.left-bird.size && !pillar[i].isPass){
					//这里是因为每次通过上下两个柱子，如果是++的话就会每次加2，所以用+=0.5
					bird.score += 0.5;
					//通过的柱子将isPass设置为true，否则程序将默认鸟通过了所有柱子，就会加每次21
					pillar[i].isPass = true;
				}
			}
		}
		//检验鸟碰到柱子
		for(var i = 0; i < pillar.length; i++){
			if(pillar[i] != null && pillar[i].isLive){
				judgeImpact(bird, pillar[i]);
			}
		}
		//死亡后执行
		//画鸟
		paintBird(ctx, bird.left, bird.top, bird.size, bird.color);
		paintScore(ctx, bird.score);
	}, 25);

	//这个timer2是创建柱子的线程
	var timer2 = setInterval(function (){
		//上面的柱子的长度
		var l = Math.random()*330+100;
		//上面柱子，用json传变量
		pillar[count++] = new Pillar({x:1536, y:0}, l);
		//下面柱子
		pillar[count++] = new Pillar({x:1536, y:l+200}, 733-l-200);
		//如果柱子达到20个，自动将第20个设置为第0个，节省了内存，属于算法优化
		if(count == 20){
			count = 0;
		}
	}, 1100);
}

//点击鼠标事件
document.onmousedown = function (ev){
	//每点击一下出来音效
	var oAudio = document.getElementById(&#39;audio1&#39;);
	oAudio.src = &#39;扇翅膀emm.wav&#39;;
	//每点击一下做一次竖直上抛
	jump(bird);
}

//鸟自由落体
function drop(bird){
	bird.top = bird.top+bird.v;
	bird.v++;
}

//设置竖直上抛，直接将速度修改为负数即可
function jump(bird){
	bird.v = -13;
}

//移动柱子
function movePillar(pillar){
	pillar.position.x -= pillar.v;
	//如果柱子移动出画布，将isLive设置为false
	if(pillar.position.x < -80){
		pillar.isLive = false;
	}
}

//检测鸟和柱子碰撞
function judgeImpact(bird, pillar){
	//碰到上边框，死亡
	if(bird.top < bird.size){
		bird.isLive = false;
		bird.top = bird.size;
	}
	//碰到下边框，死亡
	else if(bird.top > 733-bird.size){
		bird.isLive = false;
		bird.top = 733-bird.size;
	}
	//当小鸟嵌入上下柱子的左边时（检验鸟是否碰到柱子的左边）
	if(Math.abs(bird.left-pillar.position.x) <= bird.size){
		//碰到上面柱子的左边
		if(pillar.position.y == 0){
			if(bird.top < pillar.length){
				bird.isLive = false;
				bird.left = pillar.position.x-bird.size;
			}
		}
		//碰到下面柱子的左边
		else{
			if(bird.top > pillar.position.y){
				bird.isLive = false;
				bird.left = pillar.position.x-bird.size;
			}
		}
	}
	//如果是上面柱子
	if(pillar.position.y == 0){
		//如果小鸟高度小于上面柱子
		if(Math.abs(bird.top-pillar.length) <= bird.size){
			//并且小鸟在两个柱子之间，死亡
			if(bird.left+bird.size > pillar.position.x && bird.left+bird.size < pillar.position.x+pillar.width+30){
				bird.isLive = false;
				bird.top = pillar.length+bird.size;
			}
		}
	}
	//如果是下面柱子
	else{
		//如果小鸟高度大于 下面柱子上方距离顶部的高度
		if(Math.abs(bird.top-pillar.position.y) <= bird.size){
			//并且小鸟在两个柱子之间，死亡
			if(bird.left+bird.size > pillar.position.x && bird.left+bird.size < pillar.position.x+pillar.width+30){
				bird.isLive = false;
				bird.top = pillar.position.y-bird.size;
			}
		}
	}
}

IV. Summary:

1. When using canvas or js to make, you must need the above classes (of course they can be combined, in order to identify the functions of each class I divided them into those four classes), you need to be oriented The idea of objects, when drawing, use the parameters in the object to draw, for example:

paintPillar(ctx, pillar[i].position.x, pillar[i].position.y, pillar[i].width, pillar[i].length);

2.关于柱子，我们必须符合这一条逻辑：先创建柱子数组（array），然后创建每个柱子，再画柱子，再移动，四个步骤缺一不可。

3.其中有对于算法的优化：在创建柱子的数组中，我们没有设置很多个柱子（比如说10000，虽然也不可能达到那么高的分），因为这样每25毫秒就要创建那么多柱子，再画和移动，内存占用很高，我们只用建立一个能存放20个柱子的数组，出屏幕的清掉，位置由新的代替，这样就极大程度减少了对内存的需要。

4.关于调试参数（比如说画鸟），要耐心调整，直到满意为止。

5.在检测鸟和柱子的碰幢时候，需要在逻辑上下功夫，建议先在稿纸上画出碰撞条件，再编写程序。

The above is the detailed content of JavaScript and HTML5 programming game Flappy Bird simple version. For more information, please follow other related articles on the PHP Chinese website!

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Behind the Scenes: What Language Powers JavaScript?Apr 28, 2025 am 12:01 AM

JavaScript runs in browsers and Node.js environments and relies on the JavaScript engine to parse and execute code. 1) Generate abstract syntax tree (AST) in the parsing stage; 2) convert AST into bytecode or machine code in the compilation stage; 3) execute the compiled code in the execution stage.

The Future of Python and JavaScript: Trends and PredictionsApr 27, 2025 am 12:21 AM

The future trends of Python and JavaScript include: 1. Python will consolidate its position in the fields of scientific computing and AI, 2. JavaScript will promote the development of web technology, 3. Cross-platform development will become a hot topic, and 4. Performance optimization will be the focus. Both will continue to expand application scenarios in their respective fields and make more breakthroughs in performance.

Python vs. JavaScript: Development Environments and ToolsApr 26, 2025 am 12:09 AM

Both Python and JavaScript's choices in development environments are important. 1) Python's development environment includes PyCharm, JupyterNotebook and Anaconda, which are suitable for data science and rapid prototyping. 2) The development environment of JavaScript includes Node.js, VSCode and Webpack, which are suitable for front-end and back-end development. Choosing the right tools according to project needs can improve development efficiency and project success rate.

Is JavaScript Written in C? Examining the EvidenceApr 25, 2025 am 12:15 AM

Yes, the engine core of JavaScript is written in C. 1) The C language provides efficient performance and underlying control, which is suitable for the development of JavaScript engine. 2) Taking the V8 engine as an example, its core is written in C, combining the efficiency and object-oriented characteristics of C. 3) The working principle of the JavaScript engine includes parsing, compiling and execution, and the C language plays a key role in these processes.

JavaScript's Role: Making the Web Interactive and DynamicApr 24, 2025 am 12:12 AM

JavaScript is at the heart of modern websites because it enhances the interactivity and dynamicity of web pages. 1) It allows to change content without refreshing the page, 2) manipulate web pages through DOMAPI, 3) support complex interactive effects such as animation and drag-and-drop, 4) optimize performance and best practices to improve user experience.

C and JavaScript: The Connection ExplainedApr 23, 2025 am 12:07 AM

C and JavaScript achieve interoperability through WebAssembly. 1) C code is compiled into WebAssembly module and introduced into JavaScript environment to enhance computing power. 2) In game development, C handles physics engines and graphics rendering, and JavaScript is responsible for game logic and user interface.

From Websites to Apps: The Diverse Applications of JavaScriptApr 22, 2025 am 12:02 AM

JavaScript is widely used in websites, mobile applications, desktop applications and server-side programming. 1) In website development, JavaScript operates DOM together with HTML and CSS to achieve dynamic effects and supports frameworks such as jQuery and React. 2) Through ReactNative and Ionic, JavaScript is used to develop cross-platform mobile applications. 3) The Electron framework enables JavaScript to build desktop applications. 4) Node.js allows JavaScript to run on the server side and supports high concurrent requests.

Python vs. JavaScript: Use Cases and Applications ComparedApr 21, 2025 am 12:01 AM

Python is more suitable for data science and automation, while JavaScript is more suitable for front-end and full-stack development. 1. Python performs well in data science and machine learning, using libraries such as NumPy and Pandas for data processing and modeling. 2. Python is concise and efficient in automation and scripting. 3. JavaScript is indispensable in front-end development and is used to build dynamic web pages and single-page applications. 4. JavaScript plays a role in back-end development through Node.js and supports full-stack development.

See all articles