小球碰壁（面向对象）

最新推荐文章于 2022-03-02 14:51:19 发布
最新推荐文章于 2022-03-02 14:51:19 发布
阅读量261 收藏 1
点赞数 2
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44701816/article/details/88370153
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <script>
        class Ball{
            constructor(r,parent){
                this.createBall(r,parent);
                this.speedX=0;
                this.speedY=0;
            }
            createBall(r,parent){
                if(this.ball) return this.ball;
                if(!parent) parent=document.body;
                if(r<=0) r=20;
                this.ball=document.createElement("div");
                this.ball.style.width=r*2+"px";
                this.ball.style.height=r*2+"px";
                this.ball.style.borderRadius=r+"px";
                this.ball.style.backgroundColor="red";
                this.ball.style.position="absolute";
                parent.appendChild(this.ball);
                return this.ball;
            }
            update(){
                this.ball.style.left=this.ball.offsetLeft+this.speedX+"px";
                this.ball.style.top=this.ball.offsetTop+this.speedY+"px";
                if(this.ball.offsetLeft+this.ball.offsetWidth>300 || this.ball.offsetLeft<=0){
                    this.speedX=-this.speedX;
                }
                if(this.ball.offsetTop+this.ball.offsetHeight>300 || this.ball.offsetTop<=0){
                    this.speedY=-this.speedY;
                }
            }
        }

        let list=[];
        init();
        function init() {
            for(let i=0;i<10;i++){
                let ball=new Ball(randomInt(10,20));
                ball.speedX=randomInt(2,8);
                ball.speedY=randomInt(1,10);
                list.push(ball);
            }
            animation();
        }

        function randomInt(min,max) {
            return Math.floor(Math.random()*(max-min)+min);
        }

        function animation() {
            requestAnimationFrame(animation);
            for(let i=0;i<list.length;i++){
                list[i].update();
            }
        }


        
    </script>
</body>
</html>
拾时光~
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
模拟小球碰壁（汇编）
08-06
注意： 我的程序用的是宽屏幕调试运行的，这样就导致了一个问题（汇编中画圆和分辨率的问题）：在普通屏幕的显示器上运行，球是个“椭圆”。。 －－－－－－－－－－－－－－－－－－－－－－－－－－－－－本程序，自己初学做的，由于时间仓促，并且这是我用汇编写第一个这样的稍长点程序，所以程序存在不少BUG，以及一些基本功能也未实现（呵呵～～ 但是小球确实能 碰 了）。因此，就免费发送了。在写这个程序的之前，我曾希望能找到个参考的（毕竟自己写这个汇编程序之前几乎什么不懂），可惜在网上很少有“小球碰撞”这个汇编写的。 所以我想这个仅仅作为抛砖引玉，也许还达不到。呵呵～～－－－－－－－－－－－－－－－－－－－－－－－－－－－－－注意： 我的程序用的是宽屏幕调试运行的，这样就导致了一个问题（汇编中画圆和分辨率的问题）：在普通屏幕的显示器上运行，球是个“椭圆”。。
小球碰壁与互撞
weixin_30785593的博客
10-15 173
1.用一个数组存储小球 2.生成小球并文档流插入和存入数组。生成的小球信息包括小球坐标、移动速度、移动方向、背景颜色、编号。 3.小球移动。根据小球小球移动方向，小球坐标加或减速度。同时，判断是否碰壁，如果碰壁，改变小球移动方向。 4.碰撞检测。判断小球是否与另一个小球相撞。如果相撞，判断2个小球的位置改变小球的移动方向。 5.绑定事件。每点击一次按钮，增加一个小球，并让小球移动。 部分...
面向对象——自定义小球碰壁反弹
weixin_48683052的博客
03-02 248
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <style type="text/css"> .wrap{ width: 500px; he.
小球碰壁（面向对象）+观察者模式
weixin_41086056的博客
04-23 174
//模板 class Ball{ constructor(r,parent){ this.createBall(r,parent);//传入r与parent后就执行这个createrBall this.speedX=0; this.speedY=0; } createBall(r,parent){ if(this.ball) return this.ball; if(!parent) pare...
小球碰撞（面向对象）
从零出发
05-23 1249
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;title&gt;01小球碰撞(面向对象版)&lt;/title&gt; &lt;style type="text/css"&gt; * { margin: 0; pad
炫彩小球（面向对象）.html
08-31
炫彩小球（面向对象）.html
用Java实现小球碰壁反弹
12-22
在Java编程中，模拟小球碰壁反弹是一个常见的练习，它涉及到基本的物理运动规则以及图形绘制的概念。这里的核心代码片段展示了如何通过简单的逻辑来实现这一功能。让我们深入理解这段代码并探讨其中涉及的关键知识点...
通过面向对象利用JS实现五彩小球
02-18
`class Ball`可以定义一个基础小球对象，包括构造函数来初始化属性，如位置(x, y)、速度(dx, dy)、颜色(color)等。然后通过`new Ball()`实例化多个小球对象，每个都有自己的状态。 3. **underscore库**： ...
小球碰壁 课程设计 代码
04-28
这个是课程设计的时候做的，整个界面的设计都... 本程序实现的功能就是：模拟小球碰壁的过程。 由于这个程序现学现做，然后加上时间仓促，所以有些功能也未完成，而且程序中还存在一些BUG，现在自己也懒了，不想弄了。
帆布小球碰壁效果
weixin_34080571的博客
06-04 92
<!doctype html><html><head><meta charset="utf-8"><meta name="author" content="http://www.softwhy.com/" /><title>帆布小球碰壁效果</title> <style> canvas { bor...
EasyX小球碰壁
07-05
在EasyX头文件下的C++程序代码，小球随机动，碰壁以后反弹
小球随机碰壁源代码
05-28
小球可以随机的碰壁，运用数学知识，直接导入到eclips 留就可以直接运行了，很方便的
汇编实验4
abc2212684的博客
11-17 125
题1：编写完整汇编程序，实现向内存 b800:07b8 开始的连续 16 个 字单元重复填充字数据0403H 代码如下： 运行结果：窗口中间显示出一行爱心 使用debug查看： 本题中遇到一个问题，我运行完程序之后出现了一行爱心，但是，使用debug查看时却发现与实际情况不符合，例如会出现下图所示的情况 其中，应该是0304出现的位置却变成了07和20，最后试了好久发现，解决办法...
JavaScript面向对象的小球碰撞实现基本原理
长城郭靖的专栏
10-21 1347
主要记录一下重点和难点 &lt;!doctype html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;碰撞反弹&lt;/title&gt; &lt;style&gt; *{margin:0;} .main{margin: 100px auto;border: 1px s
js 小球碰壁反弹and小球碰撞
热门推荐
敲代码不爱找bug的妹子
08-31 1万+
好像好几天没有更博了呢，最近有点变懒了，这样不好，不好~~我们要做热爱学习的好孩子，嘻嘻，今天下午补上。。。我们在学习js的时候，一个很经典的案例就是小球的碰壁反弹效果啦~简单的小球碰壁效果可以慢慢延伸，让我们做出的效果更漂亮。如图~这个样子放上好像有点单调，这个案例就是实现了多个小球的同时碰壁反弹，并且不同的小球碰撞后也可发生碰撞反应，相应的小球运动方向也会发生改变。什么事情都要从简单开始，一点一
用Java实现小球碰壁反弹（算法十分简单）
wsdhla的专栏
07-23 9058
核心代码如下： if(addX){ x+=3; }else{ x-=3; } if(addY){ y+=6; }else{ y-=6; } if(x=(width-50)){ addX=!addX; } if(y=(height-50)){ addY=!addY; }
java小程序（小球碰壁）
万豪给给的博客
06-08 3023
模拟一个小球碰壁后，沿光的反射方向运动的动画。 package mypro01; import java.awt.*; class Main { public static void main(String[]args) { Frame f=new Frame(); f.setSize(1010,710); MyPanel m=new MyPanel(
毕设酒店管理系统论文视频源码集.zip
最新发布
07-27
[毕设]酒店管理系统论文视频源码集" 是一个针对计算机科学或信息技术相关专业学生毕业设计项目的综合资源包。这个资源集包含了酒店管理系统开发所需的各个方面，旨在帮助学生从理论到实践全面理解和掌握酒店管理系统的开发流程和技术细节。 具体来说，这个资源集通常包括： 论文：详细阐述了酒店管理系统的背景、需求分析、系统设计、实现过程及测试验证等各个环节，为学生提供了系统的理论框架和思路指导。 视频教程：通过视频形式，直观地展示了酒店管理系统的开发过程，包括开发环境的搭建、代码编写、数据库设计、功能实现等步骤，便于学生理解和模仿。 源码：提供了酒店管理系统的完整源代码，包括前端界面、后端逻辑及数据库设计等部分，学生可以直接下载并运行，或者根据自己的需求进行修改和扩展。 综上所述，"毕设酒店管理系统论文视频源码集"是一个集论文指导、视频教学和源码实践于一体的综合性资源，对于想要进行酒店管理系统开发的学生来说，具有极高的参考价值和实用性。 参考4条信息源
eclipse小球碰壁反弹
05-22
Eclipse小球碰壁反弹是一种经典的计算机图形学演示，通过模拟小球在一个有边界的空间内运动，当小球撞到边界时会发生反弹，从而演示了物理学中的动量守恒定律。这种演示通常在计算机图形学或者物理学课程中使用，可以帮助学生更好地理解动量守恒定律以及计算机图形学中的动画效果。在Eclipse中实现这种演示通常需要使用Java编程语言以及相关的图形库和物理引擎。您有什么具体的问题需要我解答吗？
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值