JavaScript实现打砖块游戏


Posted in Javascript onFebruary 25, 2020

本文实例为大家分享了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经典游戏 玩不停》

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

Javascript 相关文章推荐
js 鼠标拖动对象 可让任何div实现拖动效果
Nov 09 Javascript
php 中序列化和json使用介绍
Jul 08 Javascript
jquery实现兼容IE8的异步上传文件
Jun 15 Javascript
JavaScript匿名函数之模仿块级作用域
Dec 12 Javascript
学习掌握JavaScript中this的使用技巧
Aug 29 Javascript
聊一聊Vue.js过渡效果
Sep 07 Javascript
关于微信jssdk实现多图片上传的一点心得分享
Dec 13 Javascript
vue学习之mintui picker选择器实现省市二级联动示例
Oct 12 Javascript
在react-router4中进行代码拆分的方法(基于webpack)
Mar 08 Javascript
JavaScript创建对象的常用方式总结
Aug 10 Javascript
D3.js(v3)+react 实现带坐标与比例尺的散点图 (V3版本)
May 09 Javascript
JS如何定义用字符串拼接的变量
Jul 11 Javascript
深入理解Antd-Select组件的用法
Feb 25 #Javascript
京东优选小程序的实现代码示例
Feb 25 #Javascript
手把手带你入门微信小程序新框架Kbone的使用
Feb 25 #Javascript
vue 路由守卫(导航守卫)及其具体使用
Feb 25 #Javascript
Javascript地址引用代码实例解析
Feb 25 #Javascript
Javascript如何实现双指控制图片功能
Feb 25 #Javascript
vue-video-player 解决微信自动全屏播放问题(横竖屏导致样式错乱问题)
Feb 25 #Javascript
You might like
php中Redis的应用--消息传递
2017/03/28 PHP
PHP调用其他文件中的类
2018/04/02 PHP
javascript 用原型继承来实现对象系统
2010/03/22 Javascript
前端开发必须知道的JS之原型和继承
2010/07/06 Javascript
基于Jquery的动态创建DOM元素的代码
2010/12/28 Javascript
JS 操作符整理[推荐收藏]
2011/11/15 Javascript
浅析ajax请求json数据并用js解析(示例分析)
2013/07/13 Javascript
jquery链式操作的正确使用方法
2014/01/06 Javascript
jquery实现当滑动到一定位置时固定效果
2014/06/17 Javascript
Javascript实现获取窗口的大小和位置代码分享
2014/12/04 Javascript
深入解读JavaScript中的Hoisting机制
2015/08/12 Javascript
实例解析jQuery中proxy()函数的用法
2016/05/24 Javascript
Javascript中indexOf()和lastIndexOf应用方法实例
2016/08/24 Javascript
jQuery阻止移动端遮罩层后页面滚动
2017/03/15 Javascript
Node.js系列之连接DB的方法(3)
2019/08/30 Javascript
详解jQuery中的prop()使用方法
2020/01/05 jQuery
解决antd datepicker 获取时间默认少8个小时的问题
2020/10/29 Javascript
Python实现简单的可逆加密程序实例
2015/03/05 Python
Python使用正则表达式实现文本替换的方法
2017/04/18 Python
Golang与python线程详解及简单实例
2017/04/27 Python
python 字典有序并写入json文件过程解析
2019/09/30 Python
解决python 上传图片限制格式问题
2019/10/30 Python
python+Django+pycharm+mysql 搭建首个web项目详解
2019/11/29 Python
Python 文件数据读写的具体实现
2020/01/24 Python
Python reversed反转序列并生成可迭代对象
2020/10/22 Python
HTML5 画布canvas使用方法
2016/03/18 HTML / CSS
菲律宾票务网站:StubHub菲律宾
2018/04/21 全球购物
优秀毕业生事迹材料
2014/02/12 职场文书
专题民主生活会对照检查材料思想汇报
2014/09/29 职场文书
高三英语复习计划
2015/01/19 职场文书
保管员岗位职责
2015/02/14 职场文书
2015年国庆节慰问信
2015/03/23 职场文书
会计主管岗位职责
2015/04/02 职场文书
公司催款律师函
2015/05/27 职场文书
《自己去吧》教学反思
2016/02/16 职场文书
2019最新版火锅店的创业计划书 !
2019/07/12 职场文书