原生js实现FlappyBird摇摆小鸟游戏代码-html代码-BFW代码库

原生js实现FlappyBird摇摆小鸟游戏代码

代码语言：html

所属分类：游戏

代码描述：原生js实现FlappyBird摇摆小鸟游戏代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">

<style>
    body {
	width:100vw;
	height:100vh;
	margin:0;
	display:flex;
	align-items:center;
	justify-content:center;
	font-family:Helvetica,sans-serif;
	overflow-x:hidden;
}
canvas {
	position:absolute;
}
.ctn {
	position:relative;
	width:360px;
	height:640px;
}
#scoreboard {
	position:absolute;
	top:540px;
	width:360px;
	text-align:center;
	font-size:50px;
	color:#333333;
}
#start-screen {
	position:absolute;
	top:20px;
}
#gameover-screen {
	visibility:hidden;
	position:absolute;
	width:360px;
	height:640px;
	opacity:0;
	transition:opacity 1s;
	text-align:center;
}
#gameover {
	width:280px;
	background-color:#333333;
	color:#ffffff;
	padding:10px 20px;
	font-size:40px;
	letter-spacing:4px;
	margin:auto;
	margin-top:200px;
}
#replay {
	width:100px;
	background-color:#333333;
	color:#ffffff;
	padding:10px 20px;
	font-size:20px;
	letter-spacing:4px;
	transition:background-color 1s;
	margin:100px auto;
}
#replay:hover {
	background-color:#ffffff;
	color:#333333;
	cursor:pointer;
}
#ctrl-ctn {
	position:absolute;
	top:300px;
	left:80px;
	opacity:1;
	transition:opacity 1s;
}
.ctrl-btn {
	background-color:#333333;
	color:#ffffff;
	text-align:center;
	font-size:18px;
	padding:8px 16px;
	margin:10px;
}

</style>
</head>

<body>
    <div class="ctn"><canvas id="c" width="360px" height="640px"></canvas>
        <div id="scoreboard">0</div>
        <div id="start-screen">
            <div id="ctrl-ctn">
                <div id="up" class="ctrl-btn">↑</div>
                <div id="space" class="ctrl-btn">SPACE</div>
                <div id="tap" class="ctrl-btn">TAP</div>
            </div>
        </div>
        <div id="gameover-screen">
            <div id="gameover">GAME OVER</div>
            <div id="replay">REPLAY</div>
        </div>
    </div>
    <script >
        var bgSVG = `
            <svg id="bg-svg" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg"
                height="640" viewBox="0 0 360 640.00001" width="360" version="1.1" xmlns:cc="http://creativecommons.org/ns#"
                xmlns:dc="http://purl.org/dc/elements/1.1/">
                <rect id="rect5189-8" style="color-rendering:auto;color:#000000;isolation:auto;mix-blend-mode:normal;shape-rendering:auto;solid-color:#000000;image-rendering:auto"
                    height="640" width="360" y="0" x="0" fill="#d7eef4" />
                <g fill="#333333">
                    <path id="path10590-3-7-0" style="color-rendering:auto;color:#000000;isolation:auto;mix-blend-mode:normal;shape-rendering:auto;solid-color:#000000;image-rendering:auto"
                        d="m153.94 443.28c-1.6123 0-2.9194 1.2047-2.9194 2.6916v10.868c0 5.5017-2.7017 5.5166-4.9971 5.5166v-11.866c0-2.5165-1.8644-4.5558-4.1642-4.5558-2.2999 0-4.1643 2.0393-4.1643 4.5558v20.342c-2.2954 0-4.9971-0.........完整代码请登录后点击上方下载按钮下载查看