打砖块游戏入门代码
打砖块游戏入门代码
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style> 7 #div1{width: 400px; height: 400px; border: 1px solid black; margin: 100px auto; position: relative;} 8 #ball{width: 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{width: 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{width: 400px; height: 400px; border: 1px solid black; margin: 100px auto;position: relative;} 8 #ball{position: absolute; width: 20px; height: 20px; border-radius: 50%; background-color: red} 9 #bat{width: 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{width: 400px; height: 400px; border: 1px solid black; margin: 100px auto;position: relative;} 8 #ball{position: absolute; width: 20px; height: 20px; border-radius: 50%; background-color: red; bottom: 20px; left: 190px} 9 #bat{width: 100px; height: 20px; background-color: blue; position: absolute; bottom: 0px; left: 150px} 10 #brick div{width: 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>
效果：
