欢迎访问优讯网!
您当前的位置:首页 > 爱编程

JavaScript实现打砖块游戏

时间:2020-02-26 08:37:41  来源:优讯网  作者:小卡司  浏览次数:
这篇文章主要为大家详细介绍了JavaScript实现打砖块游戏,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
 

本文实例为大家分享了JavaScript实现打砖块游戏的具体代码,供大家参考,具体内容如下

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://www.jb51.net/article/181285.htm


推荐资讯
如何下载旧版centos iso镜像 如何下载迷你mini版的centos镜像
如何下载旧版centos i
计算机的正确使用姿势 电脑痴如何正确的使用电脑
计算机的正确使用姿势
好用的后台管理的前端框架模版H-ui H-ui框架模版分享
好用的后台管理的前端
微信电脑多开方法 无需辅助电脑版微信双开方法分享
微信电脑多开方法 无
相关文章
栏目更新
栏目热门