JavaScript实现打砖块游戏

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

html+css部分

<!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部分

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

}

更多关于Js游戏的精彩文章，请查看专题： 《JavaScript经典游戏 玩不停》

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • javascript HTML5 canvas实现打砖块游戏

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

  • JS实现打砖块游戏

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

  • 利用原生js实现html5小游戏之打砖块（附源码）

    利用原生js实现html5小游戏之打砖块（附源码）

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

  • 用JS实现一个简单的打砖块游戏

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

  • JavaScript实现打砖块游戏

    本文实例为大家分享了JavaScript实现打砖块游戏的具体代码,供大家参考,具体内容如下 html+css部分 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>打砖块</title> <link rel="stylesheet" type="text/css" href="css/bre

  • 触屏中的JavaScript事件分析

    本文实例讲述了触屏中的JavaScript事件.分享给大家供大家参考.具体分析如下: 一.触摸事件 ontouchstart ontouchmove ontouchend ontouchcancel目前移动端浏览器均支持这4个触摸事件,包括IE.由于触屏也支持MouseEvent,因此他们的顺序是需要注意的:touchstart → mouseover → mousemove → mousedown → mouseup → click1 实例如下: /** * onTouchEvent */ v

  • 详解JavaScript的AngularJS框架中的作用域与数据绑定

    详解JavaScript的AngularJS框架中的作用域与数据绑定

    AngularJS 简介 AngularJS 是由 Google 发起的一款开源的前端 MVC 脚本框架,既适合做普通 WEB 应用也可以做 SPA(单页面应用,所有的用户操作都在一个页面中完成).与同为 MVC 框架的 Dojo 的定位不同,AngularJS 在功能上更加轻量,而相比于 jQuery,AngularJS 又帮您省去了许多机械的绑定工作.在一些对开发速度要求高,功能模块不需要太丰富的非企业级 WEB 应用上,AngularJS 是一个非常好的选择.AngularJS 最为复杂同

  • JavaScript中立即执行函数实例详解

    前言 js立即执行函数可以让你的函数在创建后立即执行,js立即执行函数模式是一种语法,可以让你的函数在定义后立即被执行,这种模式本质上就是函数表达式(命名的或者匿名的),在创建后立即执行. ( function(){-} )()和( function (){-} () )是两种javascript立即执行函数的常见写法,最初我以为是一个括号包裹匿名函数,再在后面加个括号调用函数,最后达到函数定义后立即执行的目的,后来发现加括号的原因并非如此. 下面话不多说了,来一起看看详细的介绍吧. 通常我们声

  • javascript+jQuery实现360开机时间显示效果

    javascript+jQuery实现360开机时间显示效果

    实现效果: 实现原理: 给关闭按钮绑定点击事件,点击以后触发动画效果.利用jQuery的animate方法,先让显示天气的盒子高度变为0,接着让整个包含天气和事件的盒子宽度变为0,最后通过将display属性值设为none,使得close按钮消失. 实现代码: <!DOCTYPE html> <html> <head> <title>仿360开机效果</title> <meta charset="utf-8"> &

  • JavaScript中正则表达式的概念与应用

    JavaScript中正则表达式的概念与应用

    今天和大家分享一些关于正则表达式的知识和在javascript中的应用.正则表达式简单却又不简单,比如以前我的老师给我们讲的时候就说这个东西入门的话二三十分钟就精通了,一旦没有入门那就可几天都补不回来.于是当初就很认真的学习并研究了它.没想到正则表达式不仅代码简洁,而且在实际的操作中为前端工程师们省事了不少.总所周知,用户在浏览页面的时候,唯一和数据打交道的就是表单了,关于表单的验证,其实有很多中方法,接下来,我就会给大家分享两种,一种是普通繁琐的方法,一种是正则表达式,看看它到底能够给表单带来

  • Javascript中正则表达式的使用及基本语法

    前面的话 正则表达式在人们的印象中可能是一堆无法理解的字符,但就是这些符号却实现了字符串的高效操作.通常的情况是,问题本身并不复杂,但没有正则表达式就成了大问题.javascript中的正则表达式作为相当重要的知识,本文将介绍正则表达式的基础语法 定义 正则表达式(Regular Expression)是一门简单语言的语法规范,是强大.便捷.高效的文本处理工具,它应用在一些方法中,对字符串中的信息实现查找.替换和提取操作 javascript中的正则表达式用RegExp对象表示,有两种写法:一种

随机推荐