本站首页 收藏本站
广告位联系

APP正在开发中...
返回顶部
您的位置： 主页 > 网络编程 > JavaScript >

收藏
分享到

JavaScript实现打砖块游戏的代码

JavaScript 来源：互联网搜集 作者：秩名 发布时间：2020-02-27 16:26:03 人浏览
摘要

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

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);
 }
 
}


版权声明 : 本文内容来源于互联网或用户自行发布贡献，该文观点仅代表原作者本人。本站仅提供信息存储空间服务和不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权， 违法违规的内容， 请发送邮件至2530232025#qq.cn(#换@)举报，一经查实，本站将立刻删除。

您可能感兴趣的文章 :

原文链接 : 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_
相关文章
推荐阅读
最新更新
友情链接
  • 本站所有内容来源于互联网或用户自行发布，本站仅提供信息存储空间服务，不拥有版权，不承担法律责任。如有侵犯您的权益，请您联系站长处理！
  • Copyright © 2017-2022 F11.CN All Rights Reserved. F11站长开发者网 版权所有 | 苏ICP备2022031554号-1 | 51LA统计