HTML+CSS+JAVASCRIPT实现——球球坠落小游戏

简介: 本文主要介绍如何使用HTML三件套来实现制作一个网页小游戏-----球球坠落,玩家需要控制键盘来移动小球落在不断上升的台阶上,避免碰到最顶部或者掉进悬崖中,看能持续多久时间,获得更高的得分

本文主要介绍如何使用HTML三件套来实现制作一个网页小游戏-----球球坠落,玩家需要控制键盘来移动小球落在不断上升的台阶上,避免碰到最顶部或者掉进悬崖中,看能持续多久时间,获得更高的得分



游戏效果图


image.png



HTML+CSS部分

<!DOCTYPE html><html><head></head><body><!-- 4个board --><divid="board1"style="position: absolute; width:80px; height:10px; left:420px; top:555px; background-color: cadetblue;"></div><divid="board2"style="position: absolute; width:80px; height:10px; left:520px; top:555px; background-color: cadetblue;"></div><divid="board3"style="position: absolute; width:80px; height:10px; left:620px; top:555px; background-color: cadetblue;"></div><divid="board4"style="position: absolute; width:80px; height:10px; left:720px; top:555px; background-color: cadetblue;"></div><!-- 小球 --><divid="ball"class="circle"style="width:20px; height:20px; background-color:crimson; border-radius: 50%; position:absolute; left:600px; top:100px"></div><!-- 框 --><divid="box"style="border: 5px solid #555555; width:400px; height:550px"></div><!-- 分数 过的board越多,分数越高 --><divid="score"style="width:200px; height:10px; position:absolute; left:900px; font-family:'隶书'; font-size: 30px;">分数:0</div><!-- 游戏结束 --><divid="gg"style="width:200px; height:10px; position:absolute; left:550px; top:200px;font-family:'隶书'; font-size: 30px; display: none;">游戏结束</div></body></html>

JAVASCRIPT部分

<script>// 设置box的样式varbox=document.getElementById("box");
box.style.position="absolute";
box.style.left="400px";
// 设置board的样式varboard1=document.getElementById("board1");
varboard2=document.getElementById("board2");
varboard3=document.getElementById("board3");
varboard4=document.getElementById("board4");
// 声音varshengyin=newAudio();
shengyin.src="声音2.mp3";
shengyinFlag=0; // 用来表示小球在第几块board上// 键盘事件函数varball=document.getElementById("ball");
document.onkeydown=f;
functionf(e){
vare=e||window.event;
switch(e.keyCode){
case37:
// 按下左键,小球左移,但不要超过左边框if(ball.offsetLeft>=box.offsetLeft+10)
ball.style.left=ball.offsetLeft-8+"px";
break;
case39:
// 按下右键,小球右移,但不要超过由边框if(ball.offsetLeft<=box.offsetLeft+box.offsetWidth-ball.offsetWidth-10)
ball.style.left=ball.offsetLeft+8+"px";
break;
case32:
}
}
// 定义一个分数变量varfenshu=0;
// 定义一个函数,移动给定的一个boardfunctionmoveBoard(board)
{
vart1=board.offsetTop;
if(t1<=0)
{
// 如果board移到最上面了,就随机换个水平位置,再移到最下面t2=Math.floor(Math.random() * (720-420) +420);
board.style.left=t2+"px";
board.style.top="555px";
fenshu+=1; //分数增加1document.getElementById("score").innerHTML="分数:"+fenshu;
}
// elseboard.style.top=board.offsetTop-1+"px";
}
// 定义小球的速度变量varstartSpeed=1;
varballSpeed=startSpeed;
// step函数是游戏界面的单位变化函数functionstep()
{
// board直接上下隔得太近,就逐个移动,否则,同时移动vart1=Math.abs(board1.offsetTop-board2.offsetTop);
vart2=Math.abs(board2.offsetTop-board3.offsetTop);
vart3=Math.abs(board3.offsetTop-board4.offsetTop);
// 定义一个board之间的间隔距离vart4=140;
if(t1<t4)
{
moveBoard(board1);
}
elseif(t2<t4)
{
moveBoard(board1);
moveBoard(board2);
}
elseif(t3<t4)
{
moveBoard(board1);
moveBoard(board2);
moveBoard(board3);
}
else{
moveBoard(board1);
moveBoard(board2);
moveBoard(board3);
moveBoard(board4);
}
// 定义小球的垂直移动规则,1、向下匀加速运动,2、如果碰到board就被board持续抬上去,// 直到按左右键离开了该board// 如果小球的纵坐标等于某个board的纵坐标,就被抬起vart5=Math.abs(ball.offsetTop-board1.offsetTop);
vart6=Math.abs(ball.offsetTop-board2.offsetTop);
vart7=Math.abs(ball.offsetTop-board3.offsetTop);
vart8=Math.abs(ball.offsetTop-board4.offsetTop);
if(t5<=ball.offsetHeight&&t5>0&&ball.offsetLeft>=board1.offsetLeft-ball.offsetWidth&&ball.offsetLeft<=board1.offsetLeft+board1.offsetWidth)
{
ball.style.top=board1.offsetTop-ball.offsetHeight+"px";
ballSpeed=startSpeed;
if(shengyinFlag!=1)
{
shengyin.play();
shengyinFlag=1;
}
}
elseif(t6<=ball.offsetHeight&&t6>0&&ball.offsetLeft>=board2.offsetLeft-ball.offsetWidth&&ball.offsetLeft<=board2.offsetLeft+board2.offsetWidth)
{
ball.style.top=board2.offsetTop-ball.offsetHeight+"px";
ballSpeed=startSpeed;
if(shengyinFlag!=2)
{
shengyin.play();
shengyinFlag=2;
}
}
elseif(t7<=ball.offsetHeight&&t7>0&&ball.offsetLeft>=board3.offsetLeft-ball.offsetWidth&&ball.offsetLeft<=board3.offsetLeft+board3.offsetWidth)
{
ball.style.top=board3.offsetTop-ball.offsetHeight+"px";
ballSpeed=startSpeed;
if(shengyinFlag!=3)
{
shengyin.play();
shengyinFlag=3;
}
}
elseif(t8<=ball.offsetHeight&&t8>0&&ball.offsetLeft>=board4.offsetLeft-ball.offsetWidth&&ball.offsetLeft<=board4.offsetLeft+board4.offsetWidth)
{
ball.style.top=board4.offsetTop-ball.offsetHeight+"px";
ballSpeed=startSpeed;
if(shengyinFlag!=4)
{ 
shengyin.play();
shengyinFlag=4;
}
}
else{
ballSpeed=ballSpeed+0.01; // 数字相当于加速度ball.style.top=ball.offsetTop+ballSpeed+"px";
}
// ballSpeed = ballSpeed + 0.01; // 数字相当于加速度// ball.style.top = ball.offsetTop + ballSpeed + "px";// 如果小球跑出来box,就结束游戏if(ball.offsetTop==0||ball.offsetTop>=box.offsetTop+box.offsetHeight)
{
clearInterval(gameover);
ball.style.display='none';
board1.style.display='none';
board2.style.display='none';
board3.style.display='none';
board4.style.display='none';
vargg=document.getElementById("gg"); //显示游戏结束gg.style.display='block';
}
}
vargameover=setInterval("step();", 8);
</script>

代码整合

<!DOCTYPEhtml><html><head></head><body><!--4个board--><divid="board1"style="position: absolute; width:80px; height:10px; left:420px; top:555px; background-color: cadetblue;"></div><divid="board2"style="position: absolute; width:80px; height:10px; left:520px; top:555px; background-color: cadetblue;"></div><divid="board3"style="position: absolute; width:80px; height:10px; left:620px; top:555px; background-color: cadetblue;"></div><divid="board4"style="position: absolute; width:80px; height:10px; left:720px; top:555px; background-color: cadetblue;"></div><!--小球--><divid="ball"class="circle"style="width:20px; height:20px; background-color:crimson; border-radius: 50%; position:absolute; 
left:600px; top:100px"></div><!----><divid="box"style="border: 5px solid #555555; width:400px; height:550px"></div><!--分数过的board越多,分数越高--><divid="score"style="width:200px; height:10px; position:absolute; left:900px; font-family:'隶书'; font-size: 30px;">分数:0</div><!--游戏结束--><divid="gg"style="width:200px; height:10px; position:absolute; left:550px; top:200px;font-family:'隶书'; font-size: 30px; display: none;">游戏结束</div><script>// 设置box的样式varbox=document.getElementById("box");
box.style.position="absolute";
box.style.left="400px";
// 设置board的样式varboard1=document.getElementById("board1");
varboard2=document.getElementById("board2");
varboard3=document.getElementById("board3");
varboard4=document.getElementById("board4");
// 声音varshengyin=newAudio();
shengyin.src="声音2.mp3";
shengyinFlag=0; // 用来表示小球在第几块board上// 键盘事件函数varball=document.getElementById("ball");
document.onkeydown=f;
functionf(e){
vare=e||window.event;
switch(e.keyCode){
case37:
// 按下左键,小球左移,但不要超过左边框if(ball.offsetLeft>=box.offsetLeft+10)
ball.style.left=ball.offsetLeft-8+"px";
break;
case39:
// 按下右键,小球右移,但不要超过由边框if(ball.offsetLeft<=box.offsetLeft+box.offsetWidth-ball.offsetWidth-10)
ball.style.left=ball.offsetLeft+8+"px";
break;
case32:
}
}
// 定义一个分数变量varfenshu=0;
// 定义一个函数,移动给定的一个boardfunctionmoveBoard(board)
{
vart1=board.offsetTop;
if(t1<=0)
{
// 如果board移到最上面了,就随机换个水平位置,再移到最下面t2=Math.floor(Math.random() * (720-420) +420);
board.style.left=t2+"px";
board.style.top="555px";
fenshu+=1; //分数增加1document.getElementById("score").innerHTML="分数:"+fenshu;
}
// elseboard.style.top=board.offsetTop-1+"px";
}
// 定义小球的速度变量varstartSpeed=1;
varballSpeed=startSpeed;
// step函数是游戏界面的单位变化函数functionstep()
{
// board直接上下隔得太近,就逐个移动,否则,同时移动vart1=Math.abs(board1.offsetTop-board2.offsetTop);
vart2=Math.abs(board2.offsetTop-board3.offsetTop);
vart3=Math.abs(board3.offsetTop-board4.offsetTop);
// 定义一个board之间的间隔距离vart4=140;
if(t1<t4)
{
moveBoard(board1);
}
elseif(t2<t4)
{
moveBoard(board1);
moveBoard(board2);
}
elseif(t3<t4)
{
moveBoard(board1);
moveBoard(board2);
moveBoard(board3);
}
else{
moveBoard(board1);
moveBoard(board2);
moveBoard(board3);
moveBoard(board4);
}
// 定义小球的垂直移动规则,1、向下匀加速运动,2、如果碰到board就被board持续抬上去,// 直到按左右键离开了该board// 如果小球的纵坐标等于某个board的纵坐标,就被抬起vart5=Math.abs(ball.offsetTop-board1.offsetTop);
vart6=Math.abs(ball.offsetTop-board2.offsetTop);
vart7=Math.abs(ball.offsetTop-board3.offsetTop);
vart8=Math.abs(ball.offsetTop-board4.offsetTop);
if(t5<=ball.offsetHeight&&t5>0&&ball.offsetLeft>=board1.offsetLeft-ball.offsetWidth&&ball.offsetLeft<=board1.offsetLeft+board1.offsetWidth)
{
ball.style.top=board1.offsetTop-ball.offsetHeight+"px";
ballSpeed=startSpeed;
if(shengyinFlag!=1)
{
shengyin.play();
shengyinFlag=1;
}
}
elseif(t6<=ball.offsetHeight&&t6>0&&ball.offsetLeft>=board2.offsetLeft-ball.offsetWidth&&ball.offsetLeft<=board2.offsetLeft+board2.offsetWidth)
{
ball.style.top=board2.offsetTop-ball.offsetHeight+"px";
ballSpeed=startSpeed;
if(shengyinFlag!=2)
{
shengyin.play();
shengyinFlag=2;
}
}
elseif(t7<=ball.offsetHeight&&t7>0&&ball.offsetLeft>=board3.offsetLeft-ball.offsetWidth&&ball.offsetLeft<=board3.offsetLeft+board3.offsetWidth)
{
ball.style.top=board3.offsetTop-ball.offsetHeight+"px";
ballSpeed=startSpeed;
if(shengyinFlag!=3)
{
shengyin.play();
shengyinFlag=3;
}
}
elseif(t8<=ball.offsetHeight&&t8>0&&ball.offsetLeft>=board4.offsetLeft-ball.offsetWidth&&ball.offsetLeft<=board4.offsetLeft+board4.offsetWidth)
{
ball.style.top=board4.offsetTop-ball.offsetHeight+"px";
ballSpeed=startSpeed;
if(shengyinFlag!=4)
{ 
shengyin.play();
shengyinFlag=4;
}
}
else{
ballSpeed=ballSpeed+0.01; // 数字相当于加速度ball.style.top=ball.offsetTop+ballSpeed+"px";
}
// ballSpeed = ballSpeed + 0.01; // 数字相当于加速度// ball.style.top = ball.offsetTop + ballSpeed + "px";// 如果小球跑出来box,就结束游戏if(ball.offsetTop==0||ball.offsetTop>=box.offsetTop+box.offsetHeight)
{
clearInterval(gameover);
ball.style.display='none';
board1.style.display='none';
board2.style.display='none';
board3.style.display='none';
board4.style.display='none';
vargg=document.getElementById("gg"); //显示游戏结束gg.style.display='block';
}
}
vargameover=setInterval("step();", 8);
</script></body></html>


目录
相关文章
|
4月前
|
移动开发 前端开发 JavaScript
征信报告修改器,征信报告生成器,制作软件无痕修改软件【js+html+css】
本项目为信用评分模拟器教学工具,采用HTML5实现,仅供学习参考。核心功能通过JavaScript构建,包含虚拟数据生成、权重分配及信用因素分析(如还款记录、信用使用率等)。
|
4月前
|
前端开发 JavaScript
个人征信电子版无痕修改, 个人信用报告pdf修改,js+html+css即可实现【仅供学习用途】
本代码展示了一个信用知识学习系统的前端实现,包含评分计算、因素分析和建议生成功能。所有数据均为模拟生成
|
3月前
|
开发框架 JavaScript 前端开发
精选HTML、JavaScript、ASP代码片段集锦
这些代码片段代表了HTML, JavaScript和ASP的基本应用,可被集成到更复杂的项目中。它们注重实用性,并且易于理解,旨在帮助开发者快速开始项目构建或进行学习。尽管ASP不如其他服务器端技术(如Node.js, PHP, Ruby等)现代,但它在遗留系统中仍非常普遍,了解基础仍具有价值。
129 14
|
4月前
|
存储 前端开发 JavaScript
仿真银行app下载安装, 银行卡虚拟余额制作app,用html+css+js实现逼真娱乐工具
这是一个简单的银行账户模拟器项目,用于学习前端开发基础。用户可进行存款、取款操作,所有数据存储于浏览器内存中
|
4月前
|
前端开发
个人征信PDF无痕修改软件,个人征信模板可编辑,个人征信报告p图神器【js+html+css仅供学习用途】
这是一款信用知识学习系统,旨在帮助用户了解征信基本概念、信用评分计算原理及信用行为影响。系统通过模拟数据生成信用报告,涵盖还款记录
|
4月前
|
前端开发 JavaScript 容器
制作b超单生成器, 假怀孕b超单图片制作, p图医院证明【css+html+js装逼恶搞神器】
本资源提供一个适合用于熟人之间恶搞的工具,效果逼真,仅供学习参考与娱乐。包含前端技术学习要点:语义化布局、响应式设计、Flexbox、图片自适应
|
4月前
|
前端开发
医院检查单子p图软件,在线制作仿真病历,js+css+html装逼神器
本示例展示如何用HTML/CSS创建医疗信息页面,内容仅供学习参考。页面模拟“阳光医院体检中心”场景,提供预约功能验证(如姓名、手机号、日期)。所有数据仅用于演示
|
4月前
|
存储 自然语言处理 前端开发
抖音快手小红书虚拟评论截图生成器,模拟对话制作工具,html+js+css
这是一款纯前端实现的多平台虚拟评论生成器,支持抖音、快手、小红书风格,适用于产品演示与UI设计。采用Vanilla JS与Flexbox布局,利用IndexedDB存储数据,CSS Variables切换主题。
|
4月前
|
存储 前端开发 安全
病历单生成器在线制作,病历单生成器app,HTML+CSS+JS恶搞工具
本项目为医疗病历模拟生成器,旨在为医学教学和软件开发测试提供数据支持,严格遵守《医疗机构病历管理规定》。

热门文章

最新文章