javascript实现打砖块小游戏(附完整源码)


Posted in Javascript onSeptember 18, 2020

小时候玩一天的打砖块小游戏,附完整源码

在?给个赞?

实现如图

javascript实现打砖块小游戏(附完整源码)

需求分析

1、小球在触碰到大盒子上、左、右边框,以及滑块后沿另一方向反弹,在碰到底边框后游戏结束;

2、小球在触碰到方块之后,方块消失;

3、消除所有方块获得游戏胜利;

4、可通过鼠标与键盘两种方式移动滑块;

5、游戏难度可调整,实时显示得分。

代码分析

1、html结构:左右两个提示框盒子分别用一个div,在其中添加需要的内容;中间主体部分用一个div,里面包含一个滑块(slider),一个小球(ball),以及一个装有所有方块的brick盒子,我们通过使用js在brick中动态添加方块,这样大大减少了div的数量。简化了html结构。

2、css样式:通过使用position:relative/absolute/fixed,完成对整个页面的布局;

3、js行为:首先对于小球的运动,我们通过使用setInterval定时器进行实现;小球与滑块以及方块之间的碰撞,我们通过碰撞检测函数进行实现;滑块的移动我们需要设置两种方法,通过鼠标实现可以使用拖拽;通过键盘实现使用键盘事件。

一些封装的函数

动态创建方块

函数分析

1、首先,我们在id=“brick”的div盒子中动态插入n个方块,在css中预先为这些盒子设置了固定的宽高,并设置了左浮动布局。这样,所有的方块就会按照自左到右自上而下排列在盒子中;但是通过浮动布局在中间某一个方块碰撞消失后,后面的方块会补充上来,这并不是我们想要的;

2、为了防止后面的方块向前移动,显然我们不能使用浮动,在这里我们对每一个方块使用绝对定位;

3、在给每一个方块进行绝对定位之前,我们先要获取它们当前所在位置的left与top值,并赋给它们,否则方块将全部挤在一个格子里;

4、最后再给每个方块进行绝对定位。

function createBrick(n){
  var oBrick = document.getElementById("brick")
  //在大盒子brick中插入n个div方块,并给予随机颜色
  for(var i = 0; i<n; i++){
  var node = document.createElement("div");
  node.style.backgroundColor= color();
  oBrick.appendChild(node);
  }
  //获取所有的方块
  var brickArr = obrick.getElementsByTagName("div")
  //根据每个方块当前所在位置,将left与top值赋给方块
  for(var i=0;i<brickArr.length;i++){
  brickArr[i].style.left = brickArr[i].offsetLeft+"px";
  brickArr[i].style.top = brickArr[i].offsetTop+"px";
  }
  //将所有方块设置成绝对定位,注意这一步与上一步顺序不能调换
  for(var i =0;i<brickArr.length;i++){
  brickArr[i].style.position="absolute";
  }
 }

碰撞检测函数

代码分析见上一篇

function knock(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;
  }
 }

完整代码(复制可用)

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>打砖块小游戏</title>
 <style>
 #box{
  width: 600px;height: 650px;border: 5px solid rgb(168, 139, 8);
  position: relative;left: 500px;
  background:linear-gradient(rgb(19, 192, 120),rgb(47, 32, 114));
 }
 #ball{
  width: 20px;height: 20px;border-radius: 10px;
  background-color: white;position: absolute;
  top: 560px;box-shadow: 0px 0px 3px 3px aqua;
 }
 #btn{
  
  width: 150px;height: 90px;position: fixed;left: 730px;top: 350px;
  border-radius: 10px;font-size: 24px;cursor: pointer;
 }
 #slider{
  width: 120px;height: 20px;background-color: rgb(168, 139, 8);position: absolute;
  top: 585px;border-radius: 10px;box-shadow: 0px 0px 2px 2px red;cursor: pointer;
 }
 #brick div{
  width: 98px;height: 20px;float: left;border: 1px solid black;
 }
 #tip{
  width: 280px;position:fixed;top: 100px;left: 150px;
  border: 1px solid black;text-indent: 2em;padding: 10px;border-radius: 20px;
 }
 #grade{
  width: 180px;position:fixed;top: 100px;left: 1150px;
  border: 1px solid black;text-indent: 2em;padding: 10px;border-radius: 20px;
 }
 #grade h3{
  font-weight: 500;
 }
 </style>
</head>
<body>
 <div id="box">
 <div id="ball"></div>
 <div id="slider"></div>
 <div id="brick"></div>
 </div>
 <div id="tip">
 <h1>提示</h1>
 <p>点击按钮开始游戏</p>
 <p>方法1:使用鼠标按住滑块,左右拖动,反弹小球</p>
 <p>方法2:使用键盘“左”“右”方向键控制滑块移动,按住快速移动</p>
 <p>小球触碰到底部为失败</p>
 <p>清空所有方块游戏胜利</p>
 </div>
 <div id="grade">
 <h3>游戏强度:</h3>
 <h2>XXX</h2>
 <h3>得分:</h3>
 <h1>00</h1>
 </div>
 <button id="btn">开始游戏</button>


 <script>
 var box = document.getElementById("box");
 var ball = document.getElementById("ball");
 var btn = document.getElementById("btn");
 var slider = document.getElementById("slider")
 var obrick = document.getElementById("brick")
 var brickArr = obrick.getElementsByTagName("div")
 var grade = document.getElementById("grade")
 var rank = grade.children[1]
 var score = grade.children[3]
 var sco = 0;
 var timer;
 var isRunning = false;
 var speedX = rand(3,12);
 var speedY = -rand(3,12);
 var num =speedX-speedY;
 console.log(num)
 switch(num){
  case 6:case 7:case 8:
  rank.innerHTML="简单";
  break;
  case 9:case 10:case 11:
  rank.innerHTML="一般";
  break;
  case 12:case 13:case 14:
  rank.innerHTML="中等";
  break;
  case 15:case 16:case 17:
  rank.innerHTML="难"
  break;
  case 18:case 19:case 20:
  rank.innerHTML="很难"
  slider.style.width = 100+"px";
  break;
  case 21:case 22:
  rank.innerHTML="特别难"
  slider.style.width = 80+"px";
  break;
  case 23:case 24:
  rank.innerHTML="哭了"
  slider.style.width = 60+"px";
  break;
 }

 //随机生成小球与滑块位置
 var beginGo = rand(100,500)
 ball.style.left = beginGo +40 +"px"
 slider.style.left = beginGo +"px"

 //开始按钮点击事件
 btn.onclick = function(){
  btn.style.display="none";
  isRunning = true;
  clearInterval(timer);
  timer = setInterval(function(){
  //获取小球初始位置
  var ballLeft = ball.offsetLeft;
  var ballTop = ball.offsetTop;

  //获取小球运动之后位置
  var nextleft = ballLeft + speedX;
  var nexttop = ballTop + speedY;

  //水平边界判断,当小球的left值小于容器左边界或者大于容器右边界时,将水平方向速度取反
  if(nextleft<=0||nextleft>=box.offsetWidth-ball.offsetWidth-10){
  speedX=-speedX;
  }
  //垂直边界判断,当小球的top值小于容器上边界时,将垂直方向速度取反
  if(nexttop<=0){
  speedY=-speedY;
  }
  //当小球触碰到下边界时,提示“游戏失败”,重新刷新页面
  if(nexttop>box.offsetHeight-ball.offsetHeight){
  location.reload();
  alert("You were dead!")
  }
  
  //将运动后的位置重新赋值给小球
  ball.style.left = nextleft+"px";
  ball.style.top= nexttop+"px";

  //小球与滑块的碰撞检测
  if(knock(ball,slider)){
  speedY=-speedY;
  }

  //小球与方块的碰撞检测
  for(var j=0; j<brickArr.length;j++){
  if(knock(brickArr[j],ball)){
   speedY=-speedY
   obrick.removeChild(brickArr[j]);
   sco++;
   score.innerHTML=sco;
   break;
  }
  }

  //当容器中方块数量为0时,宣布“游戏胜利”,刷新页面
  if(brickArr.length<=0){
  location.reload();
  alert("You win!")
  }
 },20)
 }

 //鼠标控制滑块
 slider.onmousedown = function(e){
  var e = e||window.event;
  //获取滑块初始位置
  var offsetX = e.clientX - slider.offsetLeft;
  if(isRunning){
  document.onmousemove = function(e){
  var e = e||window.event;
  var l =e.clientX-offsetX;
  if(l<=0){
   l=0;
  }
  if(l>=box.offsetWidth-slider.offsetWidth-10){
   l=box.offsetWidth-slider.offsetWidth-10 ;
  }
  slider.style.left = l + "px";
  }
  }
 }
 document.onmouseup = function(){
  document.onmousemove = null;
 }

 //按键控制滑块
 document.onkeydown = function(e){
  var e = e||window.event;
  var code = e.keyCode || e.which;
  var offsetX = slider.offsetLeft;
  if(isRunning){
  switch(code){
  case 37:
   if(offsetX<=0){
   slider.style.left=0
   break;
   }
   slider.style.left = offsetX*4/5 + "px";
   break;
  case 39:
  if(offsetX>=box.offsetWidth-slider.offsetWidth-10){
   slider.style.left=box.offsetWidth-slider.offsetWidth;
   break;
   }
  slider.style.left = (box.offsetWidth-slider.offsetWidth-offsetX)/5 +offsetX + "px";
  break;
  }
  }
  
 }

 
 createBrick(72)

 //容器内创建方块
 function createBrick(n){
  var oBrick = document.getElementById("brick")
  //在大盒子brick中插入n个div方块,并给予随机颜色
  for(var i = 0; i<n; i++){
  var node = document.createElement("div");
  node.style.backgroundColor= color();
  oBrick.appendChild(node);
  }
  //获取所有的方块
  var brickArr = obrick.getElementsByTagName("div")
  //根据每个方块当前所在位置,将left与top值赋给方块
  for(var i=0;i<brickArr.length;i++){
  brickArr[i].style.left = brickArr[i].offsetLeft+"px";
  brickArr[i].style.top = brickArr[i].offsetTop+"px";
  }
  //将所有方块设置成绝对定位,注意这一步与上一步顺序不能调换
  for(var i =0;i<brickArr.length;i++){
  brickArr[i].style.position="absolute";
  }
 }

 //随机生成颜色
 function color(){
  var result= "#";
  for(var i=0;i<6;i++){
  result += rand(0,15).toString(16)
  // 把十进制的数字变成十六进制的字符串:0 1 ...9 a b c d f
 }
 return result;
 }
 //随机数生成
 function rand(n,m){
  return n+parseInt(Math.random()*(m-n+1));
 }
 //碰撞检测函数
 function knock(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>
</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript Discuz代码中的msn聊天小功能
May 25 Javascript
onclick与listeners的执行先后问题详细解剖
Jan 07 Javascript
基于jquery编写的横向自适应幻灯片切换特效的实例代码
Aug 06 Javascript
javaScript实现浮点数转十六进制字符
Oct 29 Javascript
jQuery学习笔记之 Ajax操作篇(一) - 数据加载
Jun 23 Javascript
jQuery获取DOM节点实例分析(2种方式)
Dec 15 Javascript
Bootstrap基本样式学习笔记之表单(3)
Dec 07 Javascript
javascript防篡改对象实例详解
Apr 10 Javascript
JavaScript this绑定过程深入详解
Dec 07 Javascript
了解重排与重绘
May 29 Javascript
countUp.js实现数字动态变化效果
Oct 17 Javascript
解决vue props传Array/Object类型值,子组件报错的情况
Nov 07 Javascript
js实现拖拽与碰撞检测
Sep 18 #Javascript
详解JavaScript 的执行机制
Sep 18 #Javascript
鸿蒙系统中的 JS 开发框架
Sep 18 #Javascript
React倒计时功能实现代码——解耦通用
Sep 18 #Javascript
浅谈鸿蒙 JavaScript GUI 技术栈
Sep 17 #Javascript
vue项目中播放rtmp视频文件流的方法
Sep 17 #Javascript
逐行分析鸿蒙系统的 JavaScript 框架(推荐)
Sep 17 #Javascript
You might like
Smarty分页实现方法完整实例
2016/05/11 PHP
分享PHP-pcntl 实现多进程代码
2016/09/30 PHP
JSON 学习之完全手册 图文
2007/05/29 Javascript
js 获取中文拼音,Select自动匹配字母获取值的代码
2009/09/23 Javascript
当鼠标滑过文本框自动选中输入框内容的JS代码分享
2013/11/26 Javascript
jquery获取复选框被选中的值
2014/03/22 Javascript
JQuery调用WebServices的方法和4个实例
2014/05/06 Javascript
一个JavaScript去除字符串末尾的空白实例代码
2014/09/22 Javascript
jquery+css实现动感的图片切换效果
2015/11/25 Javascript
JavaScript基本语法学习教程
2016/01/14 Javascript
jquery判断对象是否为空并遍历对象的简单实例
2016/07/26 Javascript
关于Vue.js一些问题和思考学习笔记(2)
2016/12/02 Javascript
Node.js v8.0.0正式发布!看看带来了哪些主要新特性
2017/06/02 Javascript
JavaScript+CSS相册特效实例代码
2017/09/07 Javascript
对Vue.js之事件的绑定(v-on: 或者 @ )详解
2018/09/15 Javascript
node(koa2) web应用模块介绍详解
2019/03/29 Javascript
使用vuex存储用户信息到localStorage的实例
2019/11/11 Javascript
简单了解JS打开url的方法
2020/02/21 Javascript
javascript实现前端成语点击验证
2020/06/24 Javascript
JavaScript代码实现简单计算器
2020/12/27 Javascript
详解Python中的序列化与反序列化的使用
2015/06/30 Python
NumPy 如何生成多维数组的方法
2018/02/05 Python
python调用xlsxwriter创建xlsx的方法
2018/05/03 Python
Python subprocess模块功能与常见用法实例详解
2018/06/28 Python
Python3将ipa包中的文件按大小排序
2020/04/17 Python
解决python运行启动报错问题
2020/06/01 Python
Python 实现国产SM3加密算法的示例代码
2020/09/21 Python
有abstract方法的类一定要用abstract修饰吗
2016/03/14 面试题
小学二年级学生评语
2014/04/21 职场文书
2014年机关党委工作总结
2014/12/11 职场文书
人才市场接收函
2015/01/30 职场文书
2015年资料员工作总结
2015/04/25 职场文书
业务员管理制度范本
2015/08/06 职场文书
工程移交协议书
2016/03/24 职场文书
学生检讨书范文
2019/06/24 职场文书
教你win10系统中APPCRASH事件问题解决方法
2022/07/15 数码科技