• 学习资料:JavaScript小项目 弹弹球


    本文转自:https://blog.csdn.net/weixin_42881768/article/details/105621787?depth_1-utm_source=distribute.pc_category.none-task-blog-hot-2&request_id=&utm_source=distribute.pc_category.none-task-blog-hot-2
    效果如下:
    在这里插入图片描述
    css部分代码:

    <style>
        #main{
            width: 600px; 
            height:300px;
            background: gray;
            margin-left: 300px;
            position: absolute; 
        }
        #ball {
            width: 20px;
            height: 20px;
            background-color: yellow;
            border-radius: 50%;
            position: relative;
        }
        #board{
            width: 80px;
            height: 10px;
            background: red;
            position: absolute;
            bottom: 0;
            left: 450px;
        }
    </style> 
    

    html部分代码:

    <div id="main">
    	<div id="ball" style="left:0;top:0;"> </div>
    	<div id="board"></div>
    </div>
    

    js部分代码:

    <script>
    var main = document.getElementById('main');
    var ball = document.getElementById('ball');
    var board = document.getElementById('board');
    //设置小球运动速度
    ball.speedX = 3;
    ball.speedY = 4;
    //控制小球运动轨迹
    ball.run = function(){
        //parseInt:将字符串转换为整数
        var left = parseInt(this.style.left) + this.speedX; 
        var top = parseInt(this.style.top) + this.speedY;
        this.style.left = left + 'px';
        this.style.top = top + 'px';
    	    this.check( left,top);
    }
    //检测碰撞实践
    ball.check = function(left,top){
        if(left <= 0 || left >= 580){   
            this.turnX();
        }
        //球撞到上边转向
        if(top <= 0){
            this.turnY();
        }
        //小球碰到下边时,未用挡板则输
        if(top >= 282){
            clearInterval();   //非setInterval
            alert("您输了!点击确定再来一局!");
            this.init();
        }
        //碰撞挡板后Y转向
        var board_left = parseInt(board.style.left); //挡板的左边距
        var board_top  = parseInt(board.style.top); //挡板的上边距
        if(left  >= board_left && left  <= board_left+80 && top+20 >=board_top){
            this.turnY();
        }
    }
    //控制小球转向
    ball.turnX = function(){
        this.speedX = -this.speedX;
    }
    ball.turnY= function(){
        this.speedY= -this.speedY;
    }
    //设置小球移动时间间隔为20ms
    var clock = setInterval(function(){
        ball.run();
    },20)
    //移动挡板
    main.onmousemove=function(e){   
        //如果进入非main区,则直接返回,无变化。用于防止鼠标进入红色挡板内发生相对于挡板的移动。
        if(e.target!== main){  //严格不等于
            return;
        }
        //假设位置是长方形挡板的底边中点。
        board.style.left=e.offsetX-25+'px'; //数字与px(像素)之间不可有空格。
        board.style.top=e.offsetY-9+'px';
    }
        ball.init = function(){ 
        ball.style.left = 0;
        ball.style.top = 0;
    }
    </script>
    

    完整代码

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8" />
    		<title>弹弹球</title>
    		<style>
    			#main{
    			    width: 600px; 
    			    height:300px;
    			    background: gray;
    			    margin-left: 300px;
    			    position: absolute; 
    			}
    			#ball {
    			    width: 20px;
    			    height: 20px;
    			    background-color: yellow;
    			    border-radius: 50%;
    			    position: relative;
    			}
    			#board{
    			    width: 80px;
    			    height: 10px;
    			    background: red;
    			    position: absolute;
    			    bottom: 0;
    			    left: 450px;
    			}
    		</style>
    	</head>
    	<body>
    		<div id="main">
    			<div id="ball" style="left:0;top:0;"> </div>
    			<div id="board"></div>
    		</div>
    		<script>
    			var main = document.getElementById('main');
    			var ball = document.getElementById('ball');
    			var board = document.getElementById('board');
    			//设置小球运动速度
    			ball.speedX = 3;
    			ball.speedY = 4;
    			//控制小球运动轨迹
    			ball.run = function(){
    				//parseInt:将字符串转换为整数
    				var left = parseInt(this.style.left) + this.speedX; 
    				var top = parseInt(this.style.top) + this.speedY;
    				this.style.left = left + 'px';
    				this.style.top = top + 'px';
    				this.check( left,top);
    			}
    			//检测碰撞实践
    			ball.check = function(left,top){
    				if(left <= 0 || left >= 580){   
    					this.turnX();
    				}
    				//球撞到上边转向
    				if(top <= 0){
    					this.turnY();
    				}
    				//小球碰到下边时,未用挡板则输
    				if(top >= 282){
    					clearInterval();   //非setInterval
    					alert("您输了!点击确定再来一局!");
    					this.init();
    				}
    				//碰撞挡板后Y转向
    				var board_left = parseInt(board.style.left); //挡板的左边距
    				var board_top  = parseInt(board.style.top); //挡板的上边距
    				if(left  >= board_left && left  <= board_left+80 && top+20 >=board_top){
    					this.turnY();
    				}
    			}
    			//控制小球转向
    			ball.turnX = function(){
    				this.speedX = -this.speedX;
    			}
    			ball.turnY= function(){
    				this.speedY= -this.speedY;
    			}
    			//设置小球移动时间间隔为20ms
    			var clock = setInterval(function(){
    				ball.run();
    			},20)
    			//移动挡板
    			main.onmousemove=function(e){   
    				//如果进入非main区,则直接返回,无变化。用于防止鼠标进入红色挡板内发生相对于挡板的移动。
    				if(e.target!== main){  //严格不等于
    					return;
    				}
    				//假设位置是长方形挡板的底边中点。
    				board.style.left=e.offsetX-25+'px'; //数字与px(像素)之间不可有空格。
    				board.style.top=e.offsetY-9+'px';
    			}
    				ball.init = function(){ 
    				ball.style.left = 0;
    				ball.style.top = 0;
    			}
    		</script>
    	</body>
    </html>
    
  • 相关阅读:
    作业20170928--2 单元测试
    作业20170928—1代码规范,结对要求
    第三周PSP
    20170922-3 功能测试作业
    第二周PSP
    采用c#实现功能1
    linux下搭建生成HLS所需的.ts和.m3u8文件
    android编译ffmpeg+x264
    ubuntu.sh: 113: ubuntu.sh: Syntax error: "(" unexpected
    解决:[WARNING] fpm_children_bury(), line 215: child 2736 (pool default) exited on signal 15 SIGTERM after 59.588363 seconds from start
  • 原文地址:https://www.cnblogs.com/coding365/p/12872203.html
Copyright © 2020-2023  润新知