jquery实现一个打砖块小游戏效果代码-html代码-BFW代码库

jquery实现一个打砖块小游戏效果代码

代码语言：html

所属分类：游戏

代码描述：jquery实现一个打砖块小游戏效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			.box{
				width: 800px;
				height: 500px;
				margin: 20px auto;
				border: 10px solid #000;
				position: relative;
			}
			.ball{
				width: 10px;
				height: 10px;
				background-color: purple;
				border-radius: 100%;
				position: absolute;
				bottom: 0;
				left: 50%;
			}
			.cont{
				width: 800px;
				height: 150px;
				
			}
			.list{
				width: 35px;
				height: 10px;
				float: left;
				margin: 10px;
			}
			.item{
				width: 35px;
				height: 10px;
				background-color: orangered;
			}
		</style>
	</head>
	<body>
		
		<div class="box">
			<div class="cont">
				
				
			</div>
			
			<div class="ball"></div>
		</div>
		
		
		<script>
			$(function(){
				var timer; //小球移动定时器
				var timer2; //碰撞检测定时器
				//定义小球初始速度和坐标
				var direction = {"x":5,"y":5}
				//定义小球移动函数
				function ballMove(){
					
					//获取小球距离box左边和上边的位置
					var ballL = $('.ball').position().left
					var ballT = $(".ball").position().top
					
					//获取box 宽  高
					var boxw = $(".box").width()
					var boxh = $('.box').height()
					
					//获取小球ball 宽 高
					var ballw = $(".ball").width()
					var ballh = $(".ball").height()
					
					//判断遇到边界反弹
					//遇到左右 边界
					if((ballL+ballw)>boxw||ballL<0){
						direction.x = -direction.x
					}
					
					//遇到上下边界
					if((ballT+ballh)>boxh||ballT<0){
						direction.y = -direction.y
					}
					
					
					$(".ball").css(.........完整代码请登录后点击上方下载按钮下载查看