《游戏学习》| html5 飞翔的小鸟 小游戏代码示例
游戏截图开始界面游戏界面结束界面项目代码结构总共包含几张图片、index.html和brid.js文件。index.html完整代码展示<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-wi
·
游戏截图
开始界面
游戏界面
结束界面
项目代码结构
总共包含几张图片、index.html和brid.js文件。
index.html完整代码展示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>BIRD飞飞飞</title>
<style>
#contaner{
width: 100%;
height: 600px;
margin: 0px auto;
background: url(images/sky.png);
position: relative;
overflow: hidden;
text-align: center;
}
#contaner #bird{
background: url(images/bird1.png) no-repeat;
position: absolute;
top: 230px;
width: 30px;
height: 30px;
left: 50%;
}
#contaner h2{
font-weight: bold;
color: #fff;
cursor: pointer;
top: 290px;
position: absolute;
left: 50%;
margin-left: -30px;
animation: bound 0.3s ease-in-out 0s infinite alternate;
}
@keyframes bound{
0%{
transform: scale(1);
}
25%{
transform: scale(0.8);
}
50%{
transform: scale(1.2);
}
100%{
transform: scale(1.5);
color: #09f;
}
}
#contaner #success{
width: 300px;
height: 300px;
font-weight: bold;
margin: 60px -150px;
position: absolute;
z-index: 999;
left: 50%;
text-align: center;
display: none;
}
#mask{
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #000;
opacity: 0.8;
z-index: 99;
display: none;
}
#contaner #success h1{
font-size: 35px;
margin-top: 40px;
color: #f00;
}
#contaner #success #results,span{
margin-top: 20px;
color: #ff0;
font-size: 20px;
font-weight: bold;
}
#contaner #co{
color: #fff;
font-weight: bold;
font-size: 30px;
position: fixed;
top: 0;
left: 50%;
z-index: 99;
}
</style>
</head>
<body>
<div id="contaner">
<p id="co"></p>
<div id="bird"></div>
<h2 id="new">点击开始</h2>
<div id="mask"></div>
<div id="success">
<h1>Game Over</h1>
<span>You Results:</span><p id="results"></p>
</div>
</div>
<script src="bird.js"></script>
</body>
</html>bird.js完整代码展示
var start=document.getElementById('new');
var flying=true;//用于判断小鸟的运动
// 初始化小鸟
var birds={
stepx: 52,
stepy: 0,
x: bird.offsetLeft,
y: bird.offsetTop
}
//背景
var sky={
x: 0
}
var count=0;//计数
var bg=setInterval(function(){
sky.x-=2;//控制背景移动
contaner.style.backgroundPositionX=sky.x+'px';
birds.stepy+=1;//小鸟下落
birds.y+=birds.stepy;
if(birds.stepy>=10){//小鸟运动
birds.stepy=-10;//小鸟飞起
birds.y+=birds.stepy;
}
bird.style.top=birds.y+'px';
},30)
start.onclick=function(){//开始游戏
start.style.display='none';
co.innerHTML=count;
results.innerHTML=count;
clearInterval(bg);//清除小鸟自动飞
birds.stepy=0;//初始化
setInterval(function(){
if(flying){
sky.x-=5;
contaner.style.backgroundPositionX=sky.x+'px';//控制背景移动
birds.y+=birds.stepy;
birds.x=birds.stepx;
birds.stepy+=1;//小鸟下落
if(birds.y<=0){//判断小鸟是否撞到顶
flying=false;
mask.style.display="block";
success.style.display="block";
co.style.display="none";
}
if(birds.y+bird.offsetHeight>=600){//判断小鸟是否掉落到底
flying=false;
mask.style.display="block";
success.style.display="block";
co.style.display="none";
}
bird.style.top=birds.y+'px';
bird.style.left=birds.x+'px';
}
},30)
contaner.onclick=function(){//点击
birds.stepy=-10;//点击一次小鸟飞起
}
function createzz(x){//初始化柱子属性
var zz={};
zz.x=x;
zz.uheight=50+Math.ceil(Math.random()*200);//随机上柱子的高度
zz.dheight=600-150-zz.uheight;//下柱子的高度
//创建柱子
var uzz=document.createElement('div');//创建上柱子
uzz.style.height=zz.uheight+'px';
uzz.style.width='52px';
uzz.style.position='absolute';
uzz.style.left=zz.x+'px';
uzz.style.background='url(images/pipe2.png) no-repeat center bottom';
uzz.style.top='0px';
contaner.appendChild(uzz);
var dzz=document.createElement('div');//创建下柱子
dzz.style.width='52px';
dzz.style.height=zz.dheight+'px';
dzz.style.position='absolute';
dzz.style.left=zz.x+'px';
dzz.style.background='url(images/pipe1.png) no-repeat';
dzz.style.top=zz.uheight+150+'px';
contaner.appendChild(dzz);
setInterval(function(){//控制柱子移动
if(flying){
zz.x-=5;
uzz.style.left = zz.x + 'px';
dzz.style.left = zz.x + 'px';
if(zz.x<=-52){//柱子移动到左边后回到右边一直循环
zz.x=1450;
}
if(zz.x>=0 && birds.x >= zz.x+52){//判断小鸟飞过柱子并计数
count++;
co.innerHTML=count;
results.innerHTML=count;
}
//判断小鸟有没有撞到柱子
var ucheck=birds.x + 30 > zz.x && birds.x < zz.x + 52 && birds.y <= zz.uheight;
var dcheck=birds.x + 30 > zz.x && birds.x < zz.x + 52 && birds.y+30 >= zz.uheight + 150;
if(ucheck || dcheck){
flying=false;
mask.style.display="block";
success.style.display="block";
co.style.display="none";
}
}
},30)
}
createzz(300);//第一对柱子
createzz(600);//第二对柱子
createzz(900);//第三对柱子
createzz(1200);//第四对柱子
createzz(1500);//第五对柱子
}完整代码下载
https://download.csdn.net/download/weixin_40986713/71896220相关知识
HTML、JavaScript（简称JS）和CSS（层叠样式表）是构建现代 Web 页面的三个关键技术。它们分别负责定义页面结构、交互行为和样式设计。下面对 HTML、JS 和 CSS 进行详细解释。
- HTML（超文本标记语言） HTML 是用于创建网页结构的标记语言。它由一系列标签组成，每个标签都有特定的功能和含义。通过使用这些标签，开发者可以定义网页的标题、段落、链接、图像等内容。
- 结构化：HTML 提供了各种标签来组织和描述页面的结构。例如，<html> 标签用于定义 HTML 文档的根元素，<head> 标签用于包含文档的元数据，<body> 标签用于定义页面的主要内容区域。
- 内容展示：HTML 标签用于展示不同类型的内容。<h1>~<h6> 标签用于定义标题级别，<p> 标签用于定义段落，<a> 标签用于创建链接，<img> 标签用于插入图像等。
- 表单处理：HTML 提供了一系列标签和属性用于创建表单，如 <form>、<input>、<textarea>、<select> 等。开发者可以使用这些标签来收集用户输入、提交数据和执行表单验证。
- JavaScript（JS） JavaScript 是一种基于对象和事件驱动的脚本语言，用于为 Web 页面添加交互行为。通过在 HTML 中嵌入 JavaScript 代码或引用外部 JavaScript 文件，开发者可以对网页进行动态操作和响应用户交互。
- 动态内容：JavaScript 可以修改页面的内容、样式和结构。例如，使用 DOM（文档对象模型） API，开发者可以通过 JavaScript 获取元素并改变其内容、样式、属性等。
- 事件处理：JavaScript 可以监听和响应各种事件，例如按钮点击、鼠标移动、键盘输入等。开发者可以为指定的元素或整个页面添加事件监听器，并在事件发生时触发相应的逻辑。
- 数据处理：JavaScript 支持多种数据类型和操作，包括数值计算、字符串处理、数组和对象操作等。开发者可以使用 JavaScript 进行数据验证、计算、转换等处理。
- CSS（层叠样式表） CSS 是一种用于定义网页样式和布局的样式表语言。它与 HTML 配合使用，将样式信息应用到 HTML 元素上，控制元素的外观和排版。
- 样式定义：CSS 使用选择器和属性来定义样式规则。选择器用于选中要应用样式的 HTML 元素，属性用于设置元素的样式和布局。例如，color 属性设置文本颜色，font-size 属性设置字体大小。
- 布局和盒模型：CSS 可以控制元素的位置、大小和布局。通过使用盒模型，开发者可以定义元素的内边距、外边距和边框样式，从而实现页面的灵活布局。
- 响应式设计：CSS 支持响应式设计，使网页能够根据不同设备的屏幕尺寸和分辨率自适应调整布局和样式。通过使用媒体查询和弹性布局等技术，可以实现移动优先的响应式网页设计。
总结： HTML、JavaScript 和 CSS 三者共同构成了现代 Web 页面的基础。HTML 负责定义页面结构，JavaScript 实现页面的交互行为，CSS 控制页面的样式和布局。通过这三种技术的组合应用，开发者可以创建动态、交互式和美观的 Web 页面。它们是 Web 开发中不可或缺的重要技术组成部分。
有“AI”的1024 = 2048，欢迎大家加入2048 AI社区
更多推荐
8
0- 0
已为社区贡献9条内容
所有评论(0)