JS实现打砖块简单小游戏
发布时间
阅读量：
阅读量
运行效果：
代码如下：
<!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 solid black;
float: left;
}
</style>
<script type="text/javascript">
window.onload = function(){
var oDiv1 = document.getElementById("div1");
var oBall = document.getElementById("ball");
var oBat = document.getElementById("bat");
var oBrick = document.getElementById("brick");
var aBricks = oBrick.getElementsByTagName("div");
var oDiv2 = document.getElementById("div2");
var btn = document.getElementById("btn");
var title = document.getElementById("title");
btn.onclick = function(){
oDiv2.style.display = "none";
oDiv1.style.display = "block";
ballMove(); //调用小球移动函数里面包含小球的碰撞检测
dragX(oBat);
createBrick(60);
}
function ballMove(){
//让小球可以水平方向移动，随机一个水平方向的速度(3-6)
var speedX = parseInt(Math.random() * 4) + 3;
//让小球可以垂直方向移动，随机一个水平方向的速度(5-7)
var speedY = -(parseInt(Math.random() * 3) + 5);
setInterval(function(){
oBall.style.left = oBall.offsetLeft + speedX + "px";
oBall.style.top = oBall.offsetTop + speedY + "px";
//使小球在div1内运动
if(oBall.offsetLeft >= 579 || oBall.offsetLeft <= 1){
speedX *= -1;
}
if(oBall.offsetTop <= 0){
speedY *= -1;
}
//小球碰到底部结束游戏
if(oBall.offsetTop >= 580){
setTimeout(function(){
window.location.reload();
alert("游戏结束");
oDiv2.style.display = "block";
oDiv1.style.display = "none";
},100)
}
//进行碰撞
//1.小球和滑块检测
if(konck(oBall, oBat)){
//改变小球的方向
speedY *= -1;
}
//2.小球和砖块发生碰撞
for(var i=0; i<aBricks.length; i++){
if(konck(aBricks[i], oBall)){
speedY *= -1;
//砖块被销毁
oBrick.removeChild(aBricks[i]);
if(aBricks.length == 0){
window.location.reload();
alert("恭喜你，游戏通关啦~~~");
}
break;
}
}
}, 30);
}
}
//滑块的拖拽
function dragX(node){
node.onmousedown = function(ev){
var e = ev || window.event;
var offsetX = e.clientX - node.offsetLeft;
document.onmousemove = function(ev){
var e = ev || window.event;
var l = e.clientX - offsetX;
//限制边界
if(l <= 0){
l = 0;
}
if(l >= 500){
l = 500;
}
node.style.left = l + "px";
}
document.onmouseup = function(){
document.onmousemove = null;
}
}
window.onkeydown = function(ev){
var e = event || window.event;
var which = e.which || e.keyCode;//获取键盘时间
//键盘速度
var speed = 50;
switch(which){
case 37://左
if(node.offsetLeft <= 0){//左边界
node.style.left = 0 +"px";
}else{
node.style.left = node.offsetLeft - speed + 'px';
}
// console.log(node.offsetLeft);
break;
case 39://右
if(node.offsetLeft >= 500){//右边界
node.style.left = 500 +"px";
}else{
node.style.left = node.offsetLeft + speed + 'px';
}
// console.log(node.offsetLeft);
break;
default:
break;
}
}
window.onkeyup = function(){
document.onkeydown = null;
}
}
//创建滑块
// 文档流的转换
// 相对定位 转 绝对定位
function createBrick(n){
var oBrick = document.getElementById("brick");
for(var i=0; i<n; i++){
var node = document.createElement("div");
node.style.backgroundColor = randomColor();
oBrick.appendChild(node);
}
var aBricks = oBrick.getElementsByTagName("div");
for(var i=0; i<aBricks.length; i++){
aBricks[i].style.left = aBricks[i].offsetLeft + "px";
aBricks[i].style.top = aBricks[i].offsetTop + "px";
}
for(var i=0; i<aBricks.length; i++){
aBricks[i].style.position = "absolute";
}
}
//随机颜色
function randomColor(){
var str = "rgb(" + parseInt(Math.random() * 256) + "," + parseInt(Math.random() * 256) + "," + parseInt(Math.random() * 256) + ")";
return str;
}
//检测碰撞
function konck(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;
}
}
</script>
</head>
<body>
<div id="div2">
<div id="title">打砖块游戏</div>
<button id="btn">开始游戏</button>
</div>
<div id="div1">
<div id="ball"></div>
<div id="bat"></div>
<div id="brick">
<!-- <div></div>
<div></div> -->
</div>
</div>
</body>
</html>
AI写代码参考链接：
如何用原生js编写一个简单的打砖块游戏
全部评论 (0)
还没有任何评论哟~