javascript实现打砖块小游戏（附完整源码）

2024-09-28 21:32:57

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

在？给个赞？

实现如图

需求分析

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实现打砖块游戏的具体代码,供大家参考,具体内容如下 html+css部分 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>打砖块</title> <link rel="stylesheet" type="text/css" href="css/bre
利用原生js实现html5小游戏之打砖块（附源码）

前言 PS:本次项目中使用了大量 es6 语法,故对于 es6 语法不太熟悉的小伙伴最好能先了解一些基本的原理再继续阅读. 首先,先说明一下做这个系列的目的:其实主要源于博主希望熟练使用 canvas 的相关 api ,同时对小游戏的实现逻辑比较感兴趣,所以希望通过这一系列的小游戏来提升自身编程能力:关于 es6 语法,个人认为以后 es6 语法会越来越普及,所以算是提前熟悉语法使用技巧.小游戏的实现逻辑上可能并不完善,也许会有一些 bug ,但是毕竟只是为了提升编程能力与技巧,希望大家不要太较
用JS实现一个简单的打砖块游戏

话不多说,先看看效果: HTML架构部分  <div class="content"> <div class="game"></div> <div class="container"> <h2>打砖块小游戏</h2> <hr /> <center> <button id="start"
JS实现打砖块游戏

本文实例为大家分享了JS实现打砖块游戏的具体代码,供大家参考,具体内容如下面向对象思想 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> #show{ width: 200px; height: 600px; position: absolute;
javascript HTML5 canvas实现打砖块游戏

本文实例编写的一个小游戏,基于HTML5中的canvas.游戏主要是小球反弹击打小方块.在代码中主要实现了小方块的生成,键盘键事件的监听,小球的移动和碰壁之后的反弹以及怎样消除小方块等方法.代码使用到了一个js脚本库游戏开发流程: 1.创建画布: 将画布放在div标签里面,这样可以控制画布居中的位置,再对div标签加上一些样式比如border和border-radius,这样一来使其看上去像手机,利于观看. <div id="main"> <!--将画布嵌在div块
Java实现飞机大战游戏附完整源码

目录飞机大战详细文档实现效果: 结构设计详细分析 Main界面类使用边框布局,给面板分三个区,如图所示绘制背景地图飞行道具类UML图绘制线程: 如何让我们的游戏动起来背景的绘制我的飞机的绘制移动线程如何控制我的飞机移动? 敌方飞机线程 : 如何生成敌方飞机呢? 敌方子弹线程 : 使每一个敌方飞机开火检测碰撞线程 : 在子弹与敌机碰撞时,移除敌机其他功能:显示玩家hp,掉落道具,得分,升级,更换地图飞机大战详细文档文末有源代码,以及本游戏使用的所有素材,将plane2文
使用python+pygame开发消消乐游戏附完整源码

效果是这样的 ↓ ↓ ↓ 一.环境要求 windows系统,python3.6+ pip21+ 开发环境搭建地址一起来学pygame吧游戏开发30例(开篇词)--环境搭建+游戏效果展示安装游戏依赖模块 pip install pygame 二.游戏简介消消乐应该大家都玩过,或者看过.这个花里胡哨的小游戏用python的pygame来实现,很简单. 今天带大家,用Python来实现一下这个花里胡哨的小游戏. 三.完整开发流程 1.项目主结构首先,先整理一下项目的主结构,其实看一下主结构
javascript实现打砖块小游戏（附完整源码）

小时候玩一天的打砖块小游戏,附完整源码在?给个赞? 实现如图需求分析 1.小球在触碰到大盒子上.左.右边框,以及滑块后沿另一方向反弹,在碰到底边框后游戏结束: 2.小球在触碰到方块之后,方块消失: 3.消除所有方块获得游戏胜利: 4.可通过鼠标与键盘两种方式移动滑块: 5.游戏难度可调整,实时显示得分. 代码分析 1.html结构:左右两个提示框盒子分别用一个div,在其中添加需要的内容:中间主体部分用一个div,里面包含一个滑块(slider),一个小球(ball),以及一个装有所有方块的
微信小程序之侧边栏滑动实现过程解析（附完整源码）

一.效果图讲什么都不如直接上效果图好,所以我们先来看下实现效果如何. 通过滑动屏幕,或者点击左上角的图标按钮,都能实现侧边栏的划出效果. 二.原理解析 1.先实现侧边栏的内容,让侧边栏的内容居左,然后将侧边栏的内容置于屏幕的最底部. 2.接着实现主页的内容,并且让主页的内容默认是覆盖在侧边栏的内容上面. 3.然后,实现手指滑动屏幕的时候,主页的内容,向左滑动一定的宽度,让侧边栏的内容显示出来,而滑动的效果是通过 css 的 transition 来实现的. 三.源码由于实现过程的时,我对代码
基于spring-boot和docker-java实现对docker容器的动态管理和监控功能[附完整源码下载]

docker简介 Docker 是一个开源的应用容器引擎,和传统的虚拟机技术相比,Docker 容器性能开销极低,因此也广受开发者喜爱.随着基于docker的开发者越来越多,docker的镜像也原来越丰富,未来各种企业级的完整解决方案都可以直接通过下载镜像拿来即用.因此docker变得越来越重要. 本文目的本文通过一个项目实例来介绍如果通过docker对外接口来实现对docker容器的管理和监控. 应用场景: 对服务器资源池通过docker进行统一管理,按需分配资源和创建容器,达到资源最大化利
python抢购软件/插件/脚本附完整源码

距上篇关于淘宝抢购源码的文章已经过去五个月了,五个月来我通过不停的学习,掌握了更深层的抢购技术及原理,而上篇文章中我仅分享了关于加入购物车的商品的抢购源码,且有部分不足. 博主不提供任何服务器端程序,也不提供任何收费抢购软件.该文章仅作为学习selenium框架及GUI开发的一个示例代码.该思路可运用到其他任何网站,京东,天猫,淘宝均可使用,且不属于外挂或者软件之类,只属于一个自动化点击工具,如有侵犯到任何公司的合法权益,请私信联系,会第一时间将相关代码给予删除. 本篇文章我将附上完整源码,及其
半小时实现Java手撸网络爬虫框架(附完整源码)

最近在做一个搜索相关的项目,需要爬取网络上的一些链接存储到索引库中,虽然有很多开源的强大的爬虫框架,但本着学习的态度,自己写了一个简单的网络爬虫,以便了解其中的原理.今天,就为小伙伴们分享下这个简单的爬虫程序!! 首先介绍每个类的功能: DownloadPage.java的功能是下载此超链接的页面源代码. FunctionUtils.java 的功能是提供不同的静态方法,包括:页面链接正则表达式匹配,获取URL链接的元素,判断是否创建文件,获取页面的Url并将其转换为规范的Url,截取网页网页源
超详细OpenMV与STM32单片机通信附完整源码

目录 1.前言(闲话) 2.硬件连接 3.软件代码---OpenMV端 4.软件代码---STM32端 5.利用PC端测试数据数据是否发送接收正常 6.学习补充 (代码看不懂的时候可以来看一下) 8.博客更新 9.参考链接 10.完整版代码链接 1.前言(闲话) 最近在做电磁炮,发现题目需要用到颜色跟踪,于是花了一点时间学了一下OpenMV,只学习OpenMV是远远不够的,还需要实现与单片机的通信,本以为很简单,在CSDN上找了一些代码,直接拿来修改粘贴,把代码看明白了,这些只花了几个小时,本以
Java实现打飞机小游戏（附完整源码）

写在前面技术源于分享,所以今天抽空把自己之前用java做过的小游戏整理贴出来给大家参考学习.java确实不适合写桌面应用,这里只是通过这个游戏让大家理解oop面向对象编程的过程,纯属娱乐.代码写的很简单,也很容易理解,并且注释写的很清楚了,还有问题,自己私下去补课学习. 效果如下完整代码敌飞机 import java.util.Random; 敌飞机: 是飞行物,也是敌人 public class Airplane extends FlyingObject implements Enemy
微信小程序授权登录详解（附完整源码）

一.前言由于微信官方修改了 getUserInfo 接口,所以现在无法实现一进入微信小程序就弹出授权窗口,只能通过 button 去触发. 官方连接:https://developers.weixin.qq.com/community/develop/doc/0000a26e1aca6012e896a517556c01 二.实现思路自己写一个微信授权登录页面让用户实现点击的功能,也就是实现了通过 button 组件去触发 getUserInof 接口.在用户进入微信小程序的时候,判断用户是否

javascript实现打砖块小游戏（附完整源码）

相关推荐

随机推荐