面向对象-小球运动及大小操作

最新推荐文章于 2022-09-02 18:01:16 发布

LennieGao

最新推荐文章于 2022-09-02 18:01:16 发布

阅读量401

点赞数

文章标签：面向对象前端 JavaScript 原生js

本文链接：https://blog.csdn.net/weixin_43654258/article/details/85993506

版权

好好学习，天天向上。Are you ready?

话不多说，代码奉上。


    <!DOCTYPE html>
    <html lang="en">
    	<head>
    		<meta charset="UTF-8">
    		<title>Title</title>
    	</head>
    	<body>
    		<button>按钮</button>
    		<script>
    			function Ball(r) {
    				if (r) {
    					//                this是new 出来的对象
    					this.r = r;
    				}
    			}
    
    			Ball.prototype = {
    				_r: 25,
    				set r(value) {
    					this._r = value;
    					if (!this.ball) return;
    					this.ball.style.width = value * 2 + "px";
    					this.ball.style.height = value * 2 + "px";
    					this.ball.style.borderRadius = value + "px";
    				},
    				get r() {
    					return this._r;
    				},
    				ball: null,
    				bool: false,
    				createBall: function(parent) {
    					if (!this.ball) {
    						this.ball = document.createElement("div");
    						this.ball.style.width = this.r * 2 + "px";
    						this.ball.style.height = this.r * 2 + "px";
    						this.ball.style.borderRadius = this.r + "px";
    						this.ball.style.backgroundColor = "red";
    						this.ball.style.position = "absolute";
    						this.ball.self = this;
    						this.ball.addEventListener("click", this.clickHandler);
    						parent.appendChild(this.ball);
    					}
    					return this.ball;
    				},
    				clickHandler: function(e) {
    					this.self.bool = !this.self.bool;
    				},
    				update: function() {
    					if (!this.bool) return;
    					this.ball.style.left = this.ball.offsetLeft + 2 + "px";
    				}
    
    			};
    			var b1 = new Ball(20);
    			b1.createBall(document.body);
    			var bn = document.querySelector("button");
    			bn.addEventListener("click", clickHandler);
    
    			function clickHandler(e) {
    				b1.r = b1.r + 10;
    			}
    			var arr = [];
    // 			for (var i = 0; i < 10; i++) {
    // 				var b1 = new Ball(20);
    				b1.createBall(document.body);
    				arr.push(b1);
    			// }
    
    
    			animation();
    
    			function animation() {
    				requestAnimationFrame(animation);
    // 				for (var i = 0; i < arr.length; i++) {
    // 					arr[i].update();
    // 				}
    				b1.update();
    			}
    		</script>
    	</body>
    </html>