AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

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

2022-12-16 317
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 本文主要介绍如何使用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>


文章标签：
JavaScript
前端开发
关键词：
JavaScript CSS
HTML CSS
CSS html
JavaScript小游戏
CSS javascript
ThundersArk
目录
相关文章
疯狂的猿
|
17天前
纸屑飘落生日蛋糕场景js+css3动画特效
纸屑飘落生日蛋糕CSS3动画特效是一款js+css3制作的全屏纸屑飘落，生日蛋糕点亮庆祝动画特效。
疯狂的猿
33 3
疯狂的猿
|
17天前
|
Web App开发 移动开发 HTML5
html5 + Three.js 3D风雪封印在棱镜中的梅花鹿动效源码
html5 + Three.js 3D风雪封印在棱镜中的梅花鹿动效源码。画面中心是悬浮于空的梅花鹿，其四周由白色线段组成了一个6边形将中心的梅花鹿包裹其中。四周漂浮的白雪随着多边形的转动而同步旋转。建议使用支持HTML5与css3效果较好的火狐(Firefox)或谷歌(Chrome)等浏览器预览本源码。
疯狂的猿
59 2
恩爸编程
|
27天前
|
JavaScript 前端开发
js+jquery实现贪吃蛇经典小游戏
本项目采用HTML、CSS、JavaScript和jQuery技术，无需游戏框架支持。通过下载项目文件至本地，双击index.html即可启动贪吃蛇游戏。游戏界面简洁，支持方向键控制蛇移动，空格键实现游戏暂停与恢复功能。
恩爸编程
57 14
东方睿赢
|
27天前
|
前端开发 测试技术 定位技术
如何利用HTML和CSS构建企业级网站的全过程。从项目概述到页面结构设计，再到HTML结构搭建与CSS样式设计，最后实现具体页面并进行优化提升，全面覆盖了网站开发的关键步骤
本文深入介绍了如何利用HTML和CSS构建企业级网站的全过程。从项目概述到页面结构设计，再到HTML结构搭建与CSS样式设计，最后实现具体页面并进行优化提升，全面覆盖了网站开发的关键步骤。通过实例展示了主页、关于我们、产品展示、新闻动态及联系我们等页面的设计与实现，强调了合理布局、美观设计及用户体验的重要性。旨在为企业打造一个既专业又具吸引力的线上平台。
东方睿赢
56 7
土木林森
|
27天前
|
前端开发 JavaScript 搜索推荐
HTML与CSS在Web组件化中的核心作用及前端技术趋势
本文探讨了HTML与CSS在Web组件化中的核心作用及前端技术趋势。从结构定义、语义化到样式封装与布局控制，两者不仅提升了代码复用率和可维护性，还通过响应式设计、动态样式等技术增强了用户体验。面对兼容性、代码复杂度等挑战，文章提出了相应的解决策略，强调了持续创新的重要性，旨在构建高效、灵活的Web应用。
土木林森
35 6
龙大吉
|
27天前
|
存储 移动开发 前端开发
高效的 HTML 与 CSS 编写技巧，涵盖语义化标签、文档结构优化、CSS 预处理、模块化设计、选择器优化、CSS 变量、媒体查询等内容
本文深入探讨了高效的 HTML 与 CSS 编写技巧，涵盖语义化标签、文档结构优化、CSS 预处理、模块化设计、选择器优化、CSS 变量、媒体查询等内容，旨在提升开发效率、网站性能和用户体验。
龙大吉
37 5
疯狂的猿
|
1月前
|
JavaScript
原生JS实现斗地主小游戏
这是一个原生的JS网页版斗地主小游戏，代码注释全。带有斗地主游戏基本的地主、选牌、提示、出牌、倒计时等功能。简单好玩，欢迎下载
疯狂的猿
32 7
我是快乐的嘟嘟
|
1月前
|
JavaScript 前端开发
CSS3 动画和 JavaScript 动画的性能比较
具体的性能表现还会受到许多因素的影响，如动画的复杂程度、浏览器的性能、设备的硬件条件等。在实际应用中，需要根据具体情况选择合适的动画技术。
我是快乐的嘟嘟
27 1
kaixin321-44007
|
1月前
|
缓存 前端开发 JavaScript
优化CSS和JavaScript加载
优化CSS和JavaScript加载
kaixin321-44007
32 1
八百标兵奔北坡
|
1月前
|
缓存 前端开发 JavaScript
优化CSS和JavaScript加载
Next.js和Nuxt.js在优化CSS和JavaScript加载方面提供了多种策略和工具。Next.js通过代码拆分、图片优化和特定的CSS/JavaScript优化措施提升性能；Nuxt.js则通过代码分割、懒加载、预渲染静态页面、Webpack配置和服务端缓存来实现优化。两者均能有效提高应用性能。
八百标兵奔北坡
24 1

热门文章

最新文章

  • 1
    CSS 居中方法总结
  • 2
    CSS伪元素实现的3D按钮
  • 3
    CSS3的新属性的一下总结
  • 4
    webpack window 使用sass来编译css样式
  • 5
    一款非常棒的纯CSS3 3D菜单演示及制作教程
  • 6
    IE6, IE7, IE8 CSS 兼容速查表
  • 7
    CSS-选择器7-属性
  • 8
    css学习2
  • 9
    Tailwind 生成的 CSS文件竟然有 3.7 Mb 这么巨大！这还能用？
  • 10
    asp.net 多个css文件内容自动放到一个文件中
  • 1
    JavaScript闭包允许内部函数访问并保留外部函数的变量，即使外部函数执行结束
    55
  • 2
    js设计模式-观察者模式与发布/订阅模式
    74
  • 3
    js设计模式-策略模式与代理模式的应用
    74
  • 4
    深入理解JavaScript中的闭包机制
    62
  • 5
    使用Vue.js构建交互式前端的技术探索
    91
  • 6
    使用Node.js构建实时聊天应用的技术指南
    133
  • 7
    深入理解JavaScript中的事件循环机制
    90
  • 8
    【MongoDB 专栏】MongoDB 的 JavaScript 引擎与脚本执行
    124
  • 9
    JavaScript 数组方法概览
    39
  • 10
    在JavaScript中，函数原型（Function Prototype）是一个特殊的对象
    70

    • 相关课程

    更多
  • JavaScript入门与实战
  • JavaScript 自学手册文档教程
  • HTML基础入门学习
  • HTML5 新特性教程
  • 零基础学前端HTML+CSS
  • 前端开发CSS基础

    • 相关电子书

    更多
  • JavaScript面向对象的程序设计
  • JavaScript函数
  • Delivering Javascript to World

    • 相关实验场景

    更多
  • 2048小游戏
  • 前端开发基础3：CSS3常见显示属性
  • Html5和Webpack3：Webpack5的常见用法
  • Html5和Webpack2：Webpack5打包JS和样式表
  • Html5和Webpack1：Webpack5打包工具介绍
  • HTML及前端框架
    • 下一篇
    【案例实战】SpringBoot整合阿里云文件上传OSS