打砖块游戏入门代码

 1 <!DOCTYPE html>
 2 <html lang="en">
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>Document</title>
 6         <style>
 7             #div1{ 400px; height: 400px; border: 1px solid black; margin: 100px auto; position: relative;}
 8             #ball{ 20px; height: 20px; background-color: red; position: absolute; left: 0px; top: 0px}
 9         </style>
10         <script>
11             window.onload = function(){
12                 var oDiv1 = document.getElementById('div1');
13                 var oBall = document.getElementById('ball');
14 
15                 //水平方向的速度
16                 var speedX = Math.floor(Math.random() * 4) + 3;//Math.floor(Math.random() * 4) 随机0-4之间的数向下取整即取出的数为0-3，再+3，范围变成3-6
17                 //垂直方向
18                 var speedY = Math.floor(Math.random() * 3) + 5;//随机5-7之间的数
19 
20 
21                 setInterval(function(){
22                     oBall.style.left = oBall.offsetLeft + speedX + 'px';
23                     oBall.style.top = oBall.offsetTop + speedY + 'px';
24                     
25                     if(oBall.offsetLeft > 380 || oBall.offsetLeft < 0){
26                         speedX *= -1;
27                     }
28 
29                     if(oBall.offsetTop > 380 || oBall.offsetTop < 0){
30                         speedY *= -1;
31                     }
32                 }, 30);
33 
34             }
35         </script>
36     </head>
37     <body>
38         <div id = 'div1'>
39             <div id = 'ball'></div>
40         </div>
41     </body>
42 </html>

浏览器效果：

继续：

什么时碰撞：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>Document</title>
 6         <style>
 7             div{ 100px; height: 100px;  position: absolute;}
 8             #div1{background-color: red; left: 100px; top: 50px}
 9             #div2{background-color: blue; left: 250px; top: 100px}
10         </style>
11         <script>
12 
13             window.onload = function(){
14                 var oDiv1 = document.getElementById('div1');
15                 var oDiv2 = document.getElementById('div2');
16 
17                 drag(oDiv1);
18             }
19 
20 
21             //碰撞函数
22             function touch(node1, node2){
23                 var l1 = node1.offsetLeft;
24                 var r1 = node1.offsetLeft + node1.offsetWidth;
25                 var t1 = node1.offsetTop;
26                 var b1 = node1.offsetTop + node1.offsetHeight;
27 
28                 var l2 = node2.offsetLeft;
29                 var r2 = node2.offsetLeft + node2.offsetWidth;
30                 var t2 = node2.offsetTop;
31                 var b2 = node2.offsetTop + node2.offsetHeight;
32 
33                 if(l1 > r2 || r1 < l2 || t1 > b2 || b1 < t2){
34                     return false;
35                 }else{
36                     return true;
37                 }
38 
39             }
40 
41 
42 
43             //拖拽
44             function drag(node){
45                 var offsetX = 0;
46                 var offsetY = 0;
47                 node.onmousedown = function(ev){
48                     var e = ev || window.event;
49                     offsetX = e.clientX - node.offsetLeft;
50                     offsetY = e.clientY - node.offsetTop;
51 
52                     //拖拽
53                     document.onmousemove = function(ev){
54                         var e = ev || window.event;
55                         var oDiv2 = document.getElementById('div2');
56                         node.style.left = e.clientX - offsetX + 'px';
57                         node.style.top = e.clientY - offsetY + 'px';
58 
59                         if(touch(node, oDiv2)){
60                             node.style.backgroundColor = 'black';
61                         }else{
62                             node.style.backgroundColor = 'red';
63                         }
64                     }
65 
66                     //抬起，结束拖拽
67                     document.onmouseup = function(){
68                         document.onmousemove = null;
69                     }
70 
71                 }
72             }
73 
74         </script>
75     </head>
76     <body>
77         <div id = 'div1'></div>
78         <div id = 'div2'></div>
79     </body>
80 </html>

效果：

继续：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>Document</title>
 6         <style>
 7             #div1{ 400px; height: 400px; border: 1px solid black; margin: 100px auto;position: relative;}
 8             #ball{position: absolute;  20px; height: 20px; border-radius: 50%; background-color: red}
 9             #bat{ 100px; height: 20px; background-color: blue; position: absolute; bottom: 0px; left: 150px}
10         </style>
11         <script>
12             window.onload = function(){
13                 var oDiv1 = document.getElementById('div1');
14                 var oBall = document.getElementById('ball');
15                 var oBat = document.getElementById("bat");
16 
17                 //随机速度
18                 var speedX = Math.floor(Math.random() * 5) + 2;
19                 var speedY = Math.floor(Math.random() * 4) + 3;
20 
21                 //让牌子可以水平方向拖拽
22                 dragX(oBat);
23 
24 
25                 setInterval(function(){
26                     oBall.style.left = oBall.offsetLeft + speedX + 'px';
27                     oBall.style.top = oBall.offsetTop + speedY + 'px';
28 
29                     if(oBall.offsetLeft >= 380 || oBall.offsetLeft <= 0){
30                         speedX *= -1;
31                     }
32 
33                     if(oBall.offsetTop >= 380 || oBall.offsetTop <= 0){
34                         speedY *= -1;
35                     }
36 
37                     //判断小球和拍子是否发生了碰撞
38                     if(touch(oBall, oBat)){
39                         speedY *= -1;
40                     }
41                 }, 30);
42             }
43 
44             //水平方向拖拽
45             function dragX(node){
46                 var offsetX = 0;
47                 
48                 node.onmousedown = function(ev){
49                     var e = ev || window.event;
50                     offsetX = e.clientX - node.offsetLeft;
51 
52                     document.onmousemove = function(ev){
53                         var e = ev || window.event;
54                         //限制出界
55                         var l = e.clientX - offsetX;
56                         if(l < 0){
57                             l = 0;
58                         }
59                         if(l > 300){
60                             l = 300;
61                         }
62                         node.style.left = l + 'px';
63                     }
64 
65                     document.onmouseup = function(){
66                         document.onmousemove = null;
67                     }
68                 }
69             }
70 
71             //碰撞函数
72             function touch(node1, node2){
73                 var l1 = node1.offsetLeft;
74                 var r1 = node1.offsetLeft + node1.offsetWidth;
75                 var t1 = node1.offsetTop;
76                 var b1 = node1.offsetTop + node1.offsetHeight;
77 
78                 var l2 = node2.offsetLeft;
79                 var r2 = node2.offsetLeft + node2.offsetWidth;
80                 var t2 = node2.offsetTop;
81                 var b2 = node2.offsetTop + node2.offsetHeight;
82 
83                 if(l1 > r2 || r1 < l2 || t1 > b2 || b1 < t2){
84                     return false;
85                 }else{
86                     return true;
87                 }
88 
89             }
90         </script>
91     </head>
92     <body>
93         <div id = 'div1'>
94             <div id = 'ball'></div>
95             <div id = 'bat'></div>
96         </div>
97     </body>
98 </html>

效果：

加砖块：

  1 <!DOCTYPE html>
  2 <html lang="en">
  3     <head>
  4         <meta charset="UTF-8">
  5         <title>Document</title>
  6         <style>
  7             #div1{ 400px; height: 400px; border: 1px solid black; margin: 100px auto;position: relative;}
  8             #ball{position: absolute;  20px; height: 20px; border-radius: 50%; background-color: red; bottom: 20px; left: 190px}
  9             #bat{ 100px; height: 20px; background-color: blue; position: absolute; bottom: 0px; left: 150px}
 10             #brick div{ 78px; border: 1px solid black; height: 18px;float: left;}
 11         </style>
 12         <script src = '../tool.js'></script>
 13         <script>
 14             window.onload = function(){
 15                 var oDiv1 = document.getElementById('div1');
 16                 var oBall = document.getElementById('ball');
 17                 var oBat = document.getElementById("bat");
 18 
 19                 //随机速度
 20                 var speedX = Math.floor(Math.random() * 5) + 2;
 21                 var speedY = -(Math.floor(Math.random() * 4) + 3);
 22 
 23                 //让拍子可以水平方向拖拽
 24                 dragX(oBat);
 25                 //创建对应数量的砖块
 26                 createBrick(40);
 27 
 28 
 29 
 30                 var timer = setInterval(function(){
 31                     oBall.style.left = oBall.offsetLeft + speedX + 'px';
 32                     oBall.style.top = oBall.offsetTop + speedY + 'px';
 33 
 34                     if(oBall.offsetLeft >= 380 || oBall.offsetLeft <= 0){
 35                         speedX *= -1;
 36                     }
 37 
 38                     if(oBall.offsetTop <= 0){
 39                         speedY *= -1;
 40                     }
 41 
 42                     if(oBall.offsetTop >= 380){
 43                         alert('GAME OVER');
 44                         clearInterval(timer);
 45                     }
 46 
 47                     //判断小球和拍子是否发生了碰撞
 48                     if(touch(oBall, oBat)){
 49                         speedY *= -1;
 50                     }
 51                     //判断小球和砖块是否发生了碰撞
 52                     var oBrick = document.getElementById('brick');
 53                     var nodes = oBrick.getElementsByTagName("div");
 54                     //将所有的砖块遍历，判断是否有发生碰撞的
 55                     for(var i = 0; i < nodes.length; i++){
 56                         if(touch(nodes[i], oBall)){
 57                             speedY *= -1;
 58                             //砖消失
 59                             oBrick.removeChild(nodes[i]);
 60                         }
 61                     }
 62                 }, 30);
 63             }
 64 
 65             //创建砖块的函数  n代表生成砖块的个数
 66             function createBrick(n){
 67                 var oBrick = document.getElementById('brick');
 68                 for(var i = 0; i < n; i++){
 69                     var node = document.createElement("div");
 70                     node.style.backgroundColor = randomColor();
 71                     oBrick.appendChild(node);
 72                 }
 73                 var nodes = oBrick.getElementsByTagName("div");
 74 
 75                 //将砖块的相对定位转成绝对定位  文档流转化
 76                 for(var i = 0; i < nodes.length; i++){
 77                     nodes[i].style.left = nodes[i].offsetLeft + 'px';
 78                     nodes[i].style.top = nodes[i].offsetTop + 'px';
 79                 }
 80                 for(var i = 0; i < nodes.length; i++){
 81                     nodes[i].style.position = "absolute";
 82                     
 83                 }
 84             }
 85             //水平方向拖拽
 86             function dragX(node){
 87                 var offsetX = 0;
 88                 
 89                 node.onmousedown = function(ev){
 90                     var e = ev || window.event;
 91                     offsetX = e.clientX - node.offsetLeft;
 92 
 93                     document.onmousemove = function(ev){
 94                         var e = ev || window.event;
 95                         //限制出界
 96                         var l = e.clientX - offsetX;
 97                         if(l < 0){
 98                             l = 0;
 99                         }
100                         if(l > 300){
101                             l = 300;
102                         }
103                         node.style.left = l + 'px';
104                     }
105 
106                     document.onmouseup = function(){
107                         document.onmousemove = null;
108                     }
109                 }
110             }
111 
112             //碰撞函数
113             function touch(node1, node2){
114                 var l1 = node1.offsetLeft;
115                 var r1 = node1.offsetLeft + node1.offsetWidth;
116                 var t1 = node1.offsetTop;
117                 var b1 = node1.offsetTop + node1.offsetHeight;
118 
119                 var l2 = node2.offsetLeft;
120                 var r2 = node2.offsetLeft + node2.offsetWidth;
121                 var t2 = node2.offsetTop;
122                 var b2 = node2.offsetTop + node2.offsetHeight;
123 
124                 if(l1 > r2 || r1 < l2 || t1 > b2 || b1 < t2){
125                     return false;
126                 }else{
127                     return true;
128                 }
129 
130             }
131         </script>
132     </head>
133     <body>
134         <div id = 'div1'>
135             <div id = 'brick'>
136                 
137             </div>
138             <div id = 'ball'></div>
139             <div id = 'bat'></div>
140         </div>
141     </body>
142 </html>

效果：