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 相关文章推荐
javascript 跨浏览器开发经验总结(五) js 事件
May 19 Javascript
再说AutoComplete自动补全之实现原理
Nov 05 Javascript
Bootstrap入门书籍之(三)栅格系统
Feb 17 Javascript
Bootstrap Table使用方法解析
Oct 19 Javascript
使用Vue.js创建一个时间跟踪的单页应用
Nov 28 Javascript
详解微信小程序 页面跳转 传递参数
Dec 08 Javascript
微信小程序 数组(增,删,改,查)等操作实例详解
Jan 05 Javascript
基于jQuery实现滚动刷新效果
Jan 09 Javascript
JS实现新建文件夹功能
Jun 17 Javascript
vue的一个分页组件的示例代码
Dec 25 Javascript
帮你彻底搞懂JS中的prototype、__proto__与constructor(图解)
Aug 23 Javascript
seajs和requirejs模块化简单案例分析
Aug 26 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中使用Oracle数据库(2)
2006/10/09 PHP
PHP两种快速排序算法实例
2015/02/15 PHP
Javascript实例教程(19) 使用HoTMetal(5)
2006/12/23 Javascript
jquery中html、val与text三者属性取值的联系与区别介绍
2013/12/29 Javascript
jquery 页面滚动到底部自动加载插件集合
2014/01/31 Javascript
Jquery 获取指定标签的对象及属性的设置与移除
2014/05/29 Javascript
推荐25个超炫的jQuery网格插件
2014/11/28 Javascript
javascript巧用eval函数组装表单输入项为json对象的方法
2015/11/25 Javascript
bootstrap精简教程_动力节点Java学院整理
2017/07/14 Javascript
javaScript中&quot;==&quot;和&quot;===&quot;的区别详解
2018/03/16 Javascript
Vue.js 中的 v-show 指令及用法详解
2018/11/19 Javascript
详解微信小程序之scroll-view的flex布局问题
2019/01/16 Javascript
Vue.js桌面端自定义滚动条组件之美化滚动条VScroll
2020/12/01 Vue.js
Python continue语句用法实例
2014/03/11 Python
Python中for循环控制语句用法实例
2015/06/02 Python
Python中数组,列表:冒号的灵活用法介绍(np数组,列表倒序)
2018/04/18 Python
Python实现统计给定字符串中重复模式最高子串功能示例
2018/05/16 Python
Python Django 命名空间模式的实现
2019/08/09 Python
python自动分箱,计算woe,iv的实例代码
2019/11/22 Python
python判断变量是否为int、字符串、列表、元组、字典的方法详解
2020/02/13 Python
python读取hdfs上的parquet文件方式
2020/06/06 Python
CSS实现雨滴动画效果的实例代码
2019/10/08 HTML / CSS
HTML5 input placeholder 颜色修改示例
2014/05/30 HTML / CSS
加拿大领先家居家具网上购物:Aosom.ca
2020/05/27 全球购物
什么是方法的重载
2013/06/24 面试题
生产车间主任的个人自我鉴定
2013/10/25 职场文书
工程专业应届生求职信
2014/02/19 职场文书
21岁生日感言
2014/02/27 职场文书
党员活动日总结
2014/05/05 职场文书
企业负责人任命书
2014/06/05 职场文书
企业爱岗敬业演讲稿
2014/09/04 职场文书
民事诉讼代理委托书
2014/10/08 职场文书
2015年八一建军节活动总结
2015/03/20 职场文书
入党申请书格式
2019/06/20 职场文书
Vue通过懒加载提升页面响应速度
2021/05/10 Vue.js
Win11电脑显示本地时间与服务器时间不一致怎么解决?
2022/04/05 数码科技