JS实现打砖块简单小游戏

最新推荐文章于 2023-08-15 00:42:53 发布

木塚_MZ

最新推荐文章于 2023-08-15 00:42:53 发布

阅读量476

点赞数

文章标签： javascript

本文链接：https://blog.youkuaiyun.com/weixin_46514047/article/details/120119528

版权

运行效果：

代码如下：

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>打砖块</title>
        <style>
			#div1{
				width: 600px;
				height: 600px;
				border: 1px solid black;
				position: relative;
				margin: 100px auto;
				position: relative;
				display: none;
			}
			#div2{
			 	width: 600px;
				height: 600px;
			 	border: 1px solid black;
			 	margin: 100px auto;
			 	position: relative;
			 	display: block;
			 	background-image: url(images/001.jpg);
			 	background-size: contain;
			 }
        	#div2 #title{
        		font-size: 100px;
        		margin: 50px;
        	}
        	#div2 #btn{
        		width: 200px;
        		height: 40px;
        		font-size: 25px;
        		position: absolute;
        		left: 200px;
        		top: 500px;
        	}
			#ball{
				width: 20px;
				height: 20px;
				background-color: red;
				border-radius: 50%;
				position: absolute;
				bottom: 30px;
				left: 290px;
			}
			#bat{
				width: 100px;
				height: 30px;
				background-color: blue;
				border-radius: 5%;
				position: absolute;
				bottom: 0px;
				left: 250px;
			}
			#brick div{
				width: 98px;
				height: 18px;
				border: 1px