JavaScript
☘ 主页 > 网络编程 > JavaScript >

JavaScript实现打砖块游戏的代码

2020-02-27 | 秩名 | 点击：次

html+css部分

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>打砖块</title>
 <link rel="stylesheet" type="text/css" href="css/break.css" rel="external nofollow" />
 <script type="text/javascript" src="js/break.js"></script>
  
 
 <style type="text/css">
  *{
  padding: 0;
  margin: 0;
  }
  .content{
  position: relative;
  width: 800px;
  height: 600px;
  background-color: #999;
  margin: 0 auto;
  overflow: hidden;
  }
  .game{
  position: relative;
  width: 550px;
  height: 500px;
  background-color: pink;
  margin: 20px auto 0;
  }
  .brick{
  position: absolute;
  width: 50px;
  height: 20px;
  background-color: blueviolet;
  }
  .flap{
  position: absolute;
  width: 120px;
  height: 30px;
  bottom: 0;
  left: 0;
  background-color: blue;
  }
  .ball{
  position: absolute;
  width: 30px;
  height: 30px;
  bottom: 30px;
  left: 0;
  border-radius: 50%;
  background-color: greenyellow;
  }
  .btn{
  position: absolute;
  width: 550px;
  height: 50px;
  bottom: 0;
  left: 125px;
  }
  .btn button{
  width: 120px;
  height: 40px;
  }
  #score{
  position: absolute;
  width: 80px;
  height: 30px;
  right: 0;
  top: 10%;
  background-color: #fff;
  /*border: 1px solid red;*/
  }
 </style>
 </head>
 <body>
 <div class="content">
  <div class="game">
  <!--<div class="brick"></div>-->
  <!--<div class="flap"></div>
  <div class="ball"></div>-->
  </div>
  <div class="btn">
  <button id="start">开始</button>
  <button id="reset">重置</button>
  </div>
  <div id="score">
  
  </div>
 </div>
 </body>
</html>

js部分

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
window.onload = init;
 
function init(){
 var gameArea = document.getElementsByClassName("game")[0];
 var rows = 5;
 var cols = 11;
 var b_width = 50;
 var b_height = 20;
 var bricks = [];
 var speedX = 5;
 var speedY = -5;
 var interId = null;
 var lf = 0;
 var tp = 0;
 var flap
 var ball;
 var n = 0;
 
 var st = document.getElementById("start");
 var rt = document.getElementById("reset");
 var score = document.getElementById("score");
 score.innerHTML = "得分:" + n;
 
 renderDom();
 bindDom();
 
 function renderDom(){
 getBrick();
 //得到五彩砖块
 function getBrick(){
  for (var i = 0; i < rows; i++) {
  var tp = i * b_height;
  var brick = null;
  for (var j = 0; j < cols; j++) {
   var lf = j * b_width;
   brick = document.createElement("div");
   brick.className = "brick";
   brick.setAttribute("style","top:" + tp + "px;left:" + lf + "px;");
   brick.style.backgroundColor = getColor();
   bricks.push(brick);
   gameArea.appendChild(brick);
  }
  }
 }
 
 //添加挡板
 var flap = document.createElement("div");
 flap.className = "flap";
 gameArea.appendChild(flap);
 //添加挡板小球
 var ball = document.createElement("div");
 ball.className = "ball";
 gameArea.appendChild(ball);
 }
 
 function bindDom(){
 flap = document.getElementsByClassName("flap")[0];
 
 window.onkeydown = function(e){
  var ev = e || window.event;
  var lf = null;
  if (e.keyCode == 37) { //左键往左走
  lf = flap.offsetLeft - 10;
  if (lf < 0) { 
   lf = 0;
  }
  flap.style.left = lf + "px";
  
  }else if (e.keyCode == 39) { //右键往右走
  lf = flap.offsetLeft + 10;
  if (lf >= gameArea.offsetWidth - flap.offsetWidth) {
   lf = gameArea.offsetWidth - flap.offsetWidth
  }
  flap.style.left = lf + "px";
  }
 }
 
 st.onclick = function(){
  ballMove();
  st.onclick = null;
 }
 
 rt.onclick = function(){
  window.location.reload();
 }
 
 }
 
 //得到砖块的随即颜色
 function getColor(){
 var r = Math.floor(Math.random()*256);
 var g = Math.floor(Math.random()*256);
 var b = Math.floor(Math.random()*256);
 return "rgb(" + r + "," + g + "," + b +")";
 }
 //实现小球上下左右来回运动
 function ballMove(){
 ball = document.getElementsByClassName("ball")[0];
 
 interId = setInterval(function(){
  lf = ball.offsetLeft + speedX;
  tp = ball.offsetTop + speedY;
  //实现砖块消失的效果
  for (var i = 0; i < bricks.length; i++) {
  var bk = bricks[i];
  if ((lf + ball.offsetWidth/2) >= bk.offsetLeft
   && (lf + ball.offsetWidth/2) <= (bk.offsetLeft + bk.offsetWidth)
   && (bk.offsetTop + bk.offsetHeight) >= ball.offsetTop
  ) {
   bk.style.display = "none";
   speedY = 5;
   n++;
   score.innerHTML = "得分:"+n;
  }
  }
  
  if (lf < 0) {
  speedX = -speedX;
  }
  if (lf >= (gameArea.offsetWidth - ball.offsetWidth)){
  speedX = -speedX;
  }
  if (tp <= 0) {
  speedY = 5;
  }else if((ball.offsetTop + ball.offsetHeight) >= flap.offsetTop
   && (ball.offsetLeft + ball.offsetWidth/2) >= flap.offsetLeft
   && (ball.offsetLeft + ball.offsetWidth/2) <= (flap.offsetLeft + flap.offsetWidth)
  ){
  speedY = -5;
  }else if(ball.offsetTop >= flap.offsetTop){
  gameOver();
  }
  ball.style.left = lf + 'px';
  ball.style.top = tp + "px";
 },20)
 }
 
 //判断游戏是否结束
 function gameOver(){
 alert("game over" + "\n" + "您的得分是" + score.innerHTML);
 clearInterval(interId);
 }
 
}

原文链接：https://blog.csdn.net/qq_39585562/article/details/77967914?ops_request_misc=%7B%22request_id%22%3A%22158259639519725256755564%22%2C%22scm%22%3A%2220140713.130056874..%22%7D&request_id=158259639519725256755564&biz_id=0&utm_source=distribute.pc_search_
相关文章
最新更新