JavaScript实现打砖块游戏

更新时间：2020年02月25日 11:13:43 作者：蒲小若

这篇文章主要为大家详细介绍了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经典游戏玩不停》

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

您可能感兴趣的文章:

js
打砖块

OpenLayer3自定义测量控件MeasureTool
这篇文章主要为大家详细介绍了OpenLayer3自定义测量控件MeasureTool，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-09-09
JavaScript实现简易放大镜最全代码解析(ES5)
这篇文章主要为大家详细介绍了JavaScript实现简易放大镜最全代码，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-09-09
javascript实现别踩白块儿小游戏程序
我们先看到的未开始的页面黑色和白色方块是随机生成的，完了这么多把没有发现时固定不变的。点击一次方块，程序需要判断是黑色还是白色的。如果是黑色的，当然程序也是实现了一次自减，在动画中是实现一次下移的，下移的时候点击的方块到黄颜色的区域会变成灰色
2015-11-11
基于jquery实现导航菜单高亮显示（两种方法）
本篇文章是基于jquery实现导航菜单高亮显示，当点击不同导航菜单实现当前点击的菜单是高亮的，有需要的朋友可以关注下本文
2015-08-08
js 动态校验开始结束时间的实现代码
这篇文章主要介绍了js 动态校验开始结束时间的实现代码，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2020-05-05
ajax在js中和jQuery中的用法实例详解
Ajax被认为是(Asynchronous(异步) JavaScript And Xml的缩写）,现在允许浏览器与服务器通信而无须刷新当前页面的技术都被叫做Ajax,下面这篇文章主要给大家介绍了关于ajax在js中和jQuery中的用法,需要的朋友可以参考下
2021-08-08
Chrome下ifame父窗口调用子窗口的问题示例探讨
这篇文章主要介绍了Chrome下ifame父窗口调用子窗口的问题,需要的朋友可以参考下
2014-03-03
Web前端开发工具——bower依赖包管理工具
Bower 是 twitter 推出的一款包管理工具，基于nodejs的模块化思想，把功能分散到各个模块中，让模块和模块之间存在联系，通过 Bower 来管理模块间的这种联系,本文给大家介绍bower依赖包管理工具，感兴趣的朋友一起学习
2016-03-03
JavaScript判断变量是对象还是数组的方法
这篇文章主要介绍了JavaScript判断变量是对象还是数组的方法,本文分别使用instanceof和typeof实现,需要的朋友可以参考下
2014-08-08
JavaScript转换农历类实现及调用方法
农历是日常生活中不可或缺的一部分，它与人类的生活息息相关，从某种程度上说，它一直伴随着我们，今天的任务是JavaScript转换农历类的实现，感兴趣的你可以千万不要错过，希望本文对你有所帮助
2013-01-01