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

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

2022-12-16 246
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 本文主要介绍如何使用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
JavaScript小游戏
HTML CSS JavaScript
HTML CSS
JavaScript HTML
ThundersArk
目录
相关文章
sunrr
|
6天前
|
前端开发 JavaScript 开发者
css和js
【4月更文挑战第22天】css和js
sunrr
19 6
sunrr
|
6天前
|
前端开发 JavaScript
结合CSS和JavaScript创建动态网页
【4月更文挑战第21天】结合CSS和JavaScript创建动态网页
sunrr
19 4
阿珊和她的猫
|
5天前
|
前端开发 JavaScript UED
CSS顶部与JS后写：网页渲染的奥秘
CSS顶部与JS后写：网页渲染的奥秘
阿珊和她的猫
7 0
东方睿赢
|
6天前
|
JavaScript 前端开发 算法
在JS小游戏中使用Box2D或其他物理引擎
【5月更文挑战第14天】Box2D（现在通常称为Box2D.js或者其WebAssembly版本，Emscripten Box2D）是一个流行的2D物理引擎，用于模拟刚体动力学、碰撞检测与响应以及关节约束等物理现象。虽然Box2D本身是用C++编写的，但它可以通过Emscripten等技术被编译为WebAssembly，从而在JavaScript环境中高效运行。
东方睿赢
15 4
游客pyivdsdmxqiee
|
6天前
|
移动开发 JavaScript 前端开发
HTML5作业(二)-----扑克牌拖放小游戏
该实验旨在理解元素拖放、CSS定位和DOM操作，任务是创建一个扑克牌拖放游戏。用户需将A框内13张随机扑克牌（背面朝上）按顺序拖至B框，最多存5张。当B框内形成顺子时游戏结束，显示拖动次数。实验提供HTML结构及部分JavaScript代码，包括创建和乱序扑克牌、处理拖放事件等。
游客pyivdsdmxqiee
11 0
游客pyivdsdmxqiee
|
6天前
|
移动开发 JavaScript 前端开发
HTML5作业(六)-----贪吃蛇小游戏设计与实现
这是一个JavaScript实现的贪吃蛇小游戏，目标是训练编程能力和熟悉DOM事件。玩家使用上下左右键控制蛇移动，吃食物得分，每次得分后蛇身体变长，游戏速度可调节。当蛇碰到墙壁或自身时，游戏结束。代码包括HTML结构、CSS样式和JavaScript逻辑，实现了游戏画面、分数显示、蛇的移动和碰撞检测等功能。
游客pyivdsdmxqiee
8 0
qiuqiushuibx
|
6天前
|
前端开发 JavaScript 索引
CSS常见用法 以及JS基础语法
CSS常见用法 以及JS基础语法
qiuqiushuibx
15 0
小华qvq
|
6天前
|
JavaScript 前端开发
js和css以及js制作弹窗
js和css以及js制作弹窗
小华qvq
14 1
程序员-刘华强
|
6天前
|
JavaScript 前端开发
JavaScript DOM 文档对象模型（获取、改变html元素）
JavaScript DOM 文档对象模型（获取、改变html元素）
程序员-刘华强
16 0
游客hjgt3xacvje4w
|
6天前
|
前端开发 JavaScript
使用html+css+javaScript 完成计算器
使用html+css+javaScript 完成计算器
游客hjgt3xacvje4w
23 0

热门文章

最新文章

  • 1
    JavaScript 权威指南第七版（GPT 重译）（六）(4)
  • 2
    JavaScript 权威指南第七版（GPT 重译）（三）(1)
  • 3
    JavaScript 权威指南第七版（GPT 重译）（二）(1)
  • 4
    JavaScript 权威指南第七版（GPT 重译）（四）(4)
  • 5
    JavaScript 权威指南第七版（GPT 重译）（七）(1)
  • 6
    JavaScript 权威指南第七版（GPT 重译）（六）(3)
  • 7
    JavaScript 权威指南第七版（GPT 重译）（三）(2)
  • 8
    【专栏】Vue.js和Node.js如何结合构建现代Web应用
  • 9
    JavaScript 权威指南第七版（GPT 重译）（一）(1)
  • 10
    JavaScript 权威指南第七版（GPT 重译）（五）(2)
  • 1
    HTML 链接
    18
  • 2
    HTML 链接语法
    26
  • 3
    请描述如何使用`BeautifulSoup`或其他类似的库来解析 HTML 或 XML 数据。
    31
  • 4
    自适应窗口图片轮播HTML代码
    22
  • 5
    前端框架演进史：从HTML到现代化开发
    45
  • 6
    如何在HTML中添加图像链接
    36
  • 7
    如何在HTML文件中添加超链接
    28
  • 8
    HTML玩转超链接a标签
    31
  • 9
    PHP爬虫技术：利用simple_html_dom库分析汽车之家电动车参数
    31
  • 10
    打造个性化的个人网页：从HTML到个人品牌
    23

    • 相关课程

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

    • 相关电子书

    更多
  • Python第五讲——关于爬虫如何做js逆向的思路
  • JavaScript面向对象的程序设计
  • 天猫HTML5互动技术实践

    • 相关实验场景

    更多
  • 1分钟部署经典小游戏
  • HTML及前端框架
  • CSS基础教程
  • Html5和Webpack1：Webpack5打包工具介绍
    • 下一篇
    2024年阿里云免费云服务器及学生云服务器申请教程参考