<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{margin: 0;padding: 0;}
#div2{width:510px;height:600px;border: 1px solid black;margin: 50px 500px;position: relative;float: left;display:block;background-image: url(girl.jpg);background-size:contain;}
#div2 #title{font-size: 100px;margin :50px auto;}
#div2 #kaishi{width:150px;height:40px;font-size: 30px;position: absolute;left:180px;top:500px;}
#div1{width:510px;height:600px;border: 1px solid black;margin: 50px 500px;position: relative;display: none;}
#ball{width:15px;height:15px;border-radius: 50%;background-color: red;position: absolute;left:250px;top:560px;}
#block{width:90px;height:15px;background-color: blue;position: absolute;left:200px;top:585px;}
#daizi div {width:100px; height: 20px;border: 1px solid black; float: left;}
</style>
<script>
window.onload = function(){
//找到小球和大的框
var oDiv1 = document.getElementById("div1");
var oBall = document.getElementById("ball");
var oBlock = document.getElementById("block");
var oDiv2 = document.getElementById("div2");
var kaishi = document.getElementById("kaishi");
var title = document.getElementById("title");
var oDaizi = document.getElementById("daizi");
var daiziDiv = oDaizi.getElementsByTagName("div");
var timer2 = setInterval(function(){
title.style.color = randomColor();
},500);
kaishi.onclick = function(){
clearInterval(timer2);
oDiv2.style.display = "none";
oDiv1.style.display = "block";
ballMove(); //调用小球移动函数里面包含小球的碰撞检测
blockMove(oBlock);//调用拖动滑块函数
creatDiv(60)//调用滑块函数
}
//小球移动函数
function ballMove(){
//设置小球速度
var speedX =4;
var speedY =-4;
var timer =null;
//设置定时器
setInterval(function(){
clearInterval(timer);
//小球的移动范围设置
if(oBall.offsetLeft <= 0 || oBall.offsetLeft >=495){
speedX*=-1;
}if(oBall.offsetTop <=0){
speedY *= -1;
}if(oBall.offsetTop >=585){
setTimeout(function(){
window.location.reload();
alert("游戏结束,请重新开始");
// clearInterval(timer);
oDiv2.style.display = "block";
oDiv1.style.display = "none";
},100)
}
//小球的左和上的移动距离
oBall.style.left = oBall.offsetLeft + speedX +"px";
oBall.style.top = oBall.offsetTop + speedY +"px";
// 小球和滑块的碰撞检测
if(pengzhuang(oBall,oBlock)){
speedY *= -1;
}
// 小球和方块的碰撞检测
for(var i =0; i<daiziDiv.length;i++){
if(pengzhuang(oBall,daiziDiv[i])){//如果碰撞了
switch(daiziDiv.length/10){
case 5 :speedX=4;speedY =-4;break;
case 4 :speedX=6;speedY =-6;break;
case 3 :speedX=8;speedY =-8;break;
case 2 :speedX=10;speedY =-10;break;
case 1 :speedX=12;speedY =-12;break;
default :break;
}
speedY *= -1;
oDaizi.removeChild(daiziDiv[i]);
if(daiziDiv.length == 0){
setTimeout(function(){
window.location.reload();
alert("恭喜你,游戏通关啦~~~");},100);
}
break;
}
}
},30);
}
}
//碰撞函数(在小球函数中调用检测碰撞)
function pengzhuang(node1,node2){
var l1 = node1.offsetLeft;
var r1 = node1.offsetLeft + node1.offsetWidth;
var t1 = node1.offsetTop;
var b1 = node1.offsetTop + node1.offsetHeight;
var l2 = node2.offsetLeft;
var r2 = node2.offsetLeft + node2.offsetWidth;
var t2 = node2.offsetTop;
var b2 = node2.offsetTop + node2.offsetHeight;
if(l2 > r1 || r2 < l1 || t2 > b1 || b2 < t1){
return false;
}else{
return true;
}
}
//创建滑块函数
function creatDiv(n){
var oDaizi = document.getElementById("daizi");
for(var i =0; i<n;i++){
var newdiv = document.createElement("div");
newdiv.style.background =randomColor();
oDaizi.appendChild(newdiv);
}
//文档流转换
var daiziDiv = oDaizi.getElementsByTagName("div");
//找到所有的砖块的位置
for(var i = 0; i < daiziDiv.length; i++){
daiziDiv[i].style.left = daiziDiv[i].offsetLeft + 'px';
daiziDiv[i].style.top = daiziDiv[i].offsetTop + 'px';
}
//把这些砖块的位置全部设置为绝对定位
for(var i = 0; i < daiziDiv.length; i++){
daiziDiv[i].style.position = 'absolute';
}
}
//滑块拖动函数
function blockMove(block){
block.onmousedown = function(ev){
var e = ev || window.event;
offsetX = e.clientX - block.offsetLeft;
document.onmousemove = function(ev){
var e = ev || window.event;
var l = e.clientX -offsetX;
if(l <= 0){
l = 0;
}if(l >= 410){
l = 410;
}
block.style.left = l + "px";
}
}
block.onmouseup = function(){
document.onmousemove = null;
}
window.onkeydown = function(ev){
var e = event || window.event;
var which = e.which || e.keyCode;//获取键盘时间
//键盘速度
var speed = 30;
switch(which){
case 37://左
if(block.offsetLeft <= 0){//左边界
block.style.left = 0 +"px";
}else{
block.style.left = block.offsetLeft - speed + 'px';
}console.log(block.offsetLeft);
break;
case 39://右
if(block.offsetLeft >= 420){ //右边界
block.style.left = 420 +"px";
}else{
block.style.left = block.offsetLeft + speed + 'px';
}console.log(block.offsetLeft);
break;
default:
break;
}
}
window.onkeyup = function(){
document.onkeydown = null;
}
}
//随机颜色函数
function randomColor(){
var str = "rgba(" + parseInt(Math.random() * 256) + "," + parseInt(Math.random() * 256) + "," + parseInt(Math.random() * 256) + ",1)";
return str;
}
</script>
</head>
<body>
<div id="div2">
<div id="title">打砖块游戏</div>
<button id="kaishi">开始游戏</button>
</div>
<div id="div1">
<div id="ball"></div>
<div id="block"></div>
<div id="daizi">
<!-- 创建滑块 -->
<!-- <div></div>
<div></div> -->
</div>
</div>
</body>
</html>