js小游戏（飞行的小鸟--canvas）

最新推荐文章于 2024-06-16 17:04:32 发布

家里有蜘蛛

最新推荐文章于 2024-06-16 17:04:32 发布

阅读量1.5k

点赞数 6

分类专栏： # 原生js

本文链接：https://blog.csdn.net/qq_44983621/article/details/100006844

版权

原生js 专栏收录该内容

18 篇文章 1 订阅

订阅专栏

js小游戏（飞行的小鸟）

这个里面用到的主要是 canvas 绘图
在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			body {
				background-color: gray;
			}

			#canvas {
				display: block;
				background-color: white;
				/* opacity: 0.5; */
				margin: 180px auto;
				border: 2px solid white;
				border-radius: 15px;
			}

			#center {
				width: 800px;
				margin: 0 auto;
				position: relative;
			}

			#mark {

				position: absolute;
				top: -60px;
				/* left: 0; */
				left: 320px;
				width: 130px;
				height: 50px;
				border: 2px solid aqua;
				text-align: center;
				line-height: 50px;
				border-radius: 10px;
				background-color: aqua;
				font-family: "微软雅黑";
				/* font-weight: bold; */
				color: red;
				font-size: 20px;
			}

			#p {
				width: 200px;
				height: 200px;
				position: absolute;
				text-align: center;
				line-height: 200px;
				top: 90px;
				left: 300px;
				display: none;
				border: 2px solid black;
				border-radius: 50%;
				background-color: gray;
				font-size: 20px;
				color: red;

			}
		</style>
	</head>
	<body>
		<div id="center">
			<canvas id="canvas" width="800px" height="400px">

			</canvas>
			<div id="mark"></div>
			<p id="p" style="background-color:rgba(0, 0, 0, 0.1)"></p>
		</div>
	</body>
	<script type="text/javascript">
		// var canvas = .getElementById("canvas");
		var context = canvas.getContext("2d");
		//新建一个图片
		var img = new Image();
		img.src = "images/Clipboard2.jpg";
		var birdX = 200;
		var birdY = 100;
		var birdTimer = null;
		img.onload = function() {
			//判断第一次使用这个定时器
			if (birdTimer == null) {
				birdTimer = setInterval(function() {
					//小鸟最低到底部
					if (birdY <= 340)
						birdY += 1;


					//清除上一帧画面
					context.clearRect(0, 0, 800, 400);
					drawColumn();
					context.drawImage(img, birdX, birdY);
				}, 10)
			}

		}
		//鼠标摁下小鸟往上飞切换图片  本来是小鸟挥动翅膀 但是没找到图，干脆换了一个图
		canvas.onmousedown = function() { 
			img.src = "images/bird2.png";
			birdY -= 40;
		}
		//松开换回来
		canvas.onmouseup = function() {

			img.src = "images/Clipboard2.jpg";
		}
		var columnArr = [];
		var columnTimer = null;

		function creatColumn() {

			columnTimer = setInterval(function() {
				//column数组
				var column = {};
				column.positionX = 800;
				//在-100到-200之间随机Y值,这个值取决于图片大小
				column.positionY = -Math.round(Math.random() * 100 + 100);
				//把图片添加进来
				column.imgA = new Image();
				column.imgB = new Image();
				column.imgA.src = "images/zhuzifan.jpg";
				column.imgB.src = "images/zhuzizheng.jpg";
				//每日一列柱子都不一样
				column.id = new Date().getTime();
				columnArr.push(column);
			
			}, 1500)
			//画图
		}

		creatColumn();
		var same = null;
		var mark = 0;
		//绘图

		function drawColumn() {
			//画出不同的柱子
			for (var i = 0; i < columnArr.length; i++) {
				//柱子左移
				columnArr[i].positionX--;
				//画
				context.drawImage(columnArr[i].imgA, columnArr[i].positionX, columnArr[i].positionY);
				context.drawImage(columnArr[i].imgB, columnArr[i].positionX, columnArr[i].positionY + 400);
				//判断通过的条件
				if (birdX + 60 >= columnArr[i].positionX && birdX - 70 <= columnArr[i].positionX) {
					console.log("'asd");
					//柱子不同则加分
					if (columnArr[i].id != same) {
						mark++;
						same = columnArr[i].id;
						document.getElementById("mark").innerHTML = "得分：" + mark;
					}
					//碰撞游戏结束
					if (birdY < columnArr[i].positionY + 250 || birdY + 60 > columnArr[i].positionY + 400) {
						console.log("pengle");
						clearInterval(birdTimer);
						clearInterval(columnTimer);
						p.style.display = "block";

						p.innerHTML = "游戏即将重新开始";
						setTimeout(function() {
							location.reload(); //重新加载页面
						}, 3000)
					}
				}
			}
		}
	</script>
</html>

小游戏制作的比较粗略，图片处理的一般，可以换成自己喜欢图片。

家里有蜘蛛

关注

6
点赞
踩
14

收藏

觉得还不错? 一键收藏
3
评论
js小游戏（飞行的小鸟--canvas）

js小游戏（飞行的小鸟）这个里面用到的主要是 canvas 绘图<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> body { backgrou...
复制链接

扫一扫