简单制作弹球打砖块网页小游戏

游戏开始页面如图：

点击开始游戏后小球开始运动，当小球碰到左、右容器边框时，小球向x轴的反方向移动，当小球碰到容器上边框时小球向y轴的反方向移动

代码如下：

//水平边界判断，当小球的left值小于容器左边界或者大于容器右边界时，将水平方向速度取反if(nextleft<=0||nextleft>=box.offsetWidth-ball.offsetWidth-10){speedX=-speedX;}//垂直边界判断，当小球的top值小于容器上边界时，将垂直方向速度取反if(nexttop<=0){speedY=-speedY;}

除了判断上述小球的方向运动，还需要判断小球与滑块和砖块碰撞检测，于是可以把小球和滑块或小球和砖块当做参数传到创建的碰撞函数中。如果返回值为真，则设小球朝y轴的反方向运动，直到小球碰到容器下边框后游戏结束

碰撞函数代码如下：

//碰撞检测函数function knock(node1,node2){var l1 = node1.offsetLeft;var r1 = node1.offsetLeft + node1.offsetWidth;var t1 = node1.offsetTop;var b1 = node1.offsetTop+node1.offsetHeight;var l2 = node2.offsetLeft;var r2 = node2.offsetLeft + node2.offsetWidth;var t2 = node2.offsetTop;var b2 = node2.offsetTop+node2.offsetHeight;if(l2>r1||r2<l1||t2>b1||b2<t1){return false;}else{return true;}}

完整代码：https://download.csdn.net/download/m0_59767127/19877001

简单制作弹球打砖块网页小游戏相关推荐

利用js制作的简单网页小游戏
利用html和js制作的简单的网页小游戏这个是我第一次利用js制作网页的小游戏,若有错误欢迎指出. 设计的游戏是类似于配对的小游戏.废话不多说,直接上代码,代码中有比较详细的说明. <!DOC ...
使用Hype物理引擎制作一个网页小游戏（中）
在上一小节中,相信大家跟着小编的教程都能够顺利完成这款网页小游戏的静态场景制作,在本小节中,小编将带着大家完成网页小游戏的动画录制部分. 第一步:从上一节的游戏预览效果可以看到,游戏过程中,上方的矩形 ...
Egret制作打砖块微信小游戏
使用Egret制作微信小游戏打砖块-包括好友排行榜项目创建与配置项目逻辑代码项目发布微信小游戏的开发项目所有代码项目创建与配置创建一个Egret EUI项目,默认库即可: 导入素材,在r ...
Pits - CSS3+JS网页小游戏
src="http://www.sfg.name/apps/pits/" width="600" height="300"> 玩游戏 ...
java计算机毕业设计网页小游戏交流论坛源代码+数据库+系统+lw文档
java计算机毕业设计网页小游戏交流论坛源代码+数据库+系统+lw文档 java计算机毕业设计网页小游戏交流论坛源代码+数据库+系统+lw文档本源码技术栈: 项目架构:B/S架构开发语言:Java ...
基于Python制作的消消乐小游戏
导语哈喽,好久不见.消失人口上线更新一波每月必出的 python 制作小游戏系列文章.本期我们将制作一个消消乐小游戏,让我们愉快地开始吧开发工具 Python 版本:3.6.4 相关模块: pyg ...
贪食蛇php,贪吃蛇网页小游戏的代码
贪吃蛇网页小游戏的代码 ::selection { color:#FFFFFF; background:transparent; } ::-moz-selection { color:#FFFFFF; ...
Unity 游戏实例开发集合之打砖块休闲小游戏快速实现
Unity 游戏实例开发集合之打砖块休闲小游戏快速实现目录 Unity 游戏实例开发集合之打砖块休闲小游戏快速实现一.简单介绍二.打砖块游戏内容与操作三.游戏代码框架四.知识点 ...
400多款HTML5网页模版网页小游戏免费下载
欢迎访问博主个人网站,记得收藏哦,点击查看 - - - >>>> 公众号推荐:计算机类毕业设计系统源码,IT技术文章分享,游戏源码,网页模板小程序推荐:网站资源快速收录–百度 ...
HTML5 + css3 + js 网页设计作业网页小游戏
用HTML5 + css3 + js 做的一个翻图片的网页小游戏,挺有意思的吧! 因为上网页课要交一个个人的网页设计作业,时间挺紧的,记得以前玩游戏偶尔看到一个翻转图片的小游戏,就想模仿着做一个! 目 ...

简单制作弹球打砖块网页小游戏

简单制作弹球打砖块网页小游戏相关推荐

最新文章

热门文章