html5弹球打砖块代码,利用JS实现抖音弹球打砖块游戏代码
特效描述:利用JS实现 抖音弹球 打砖块 游戏代码。利用JS实现抖音弹球打砖块游戏代码
代码结构
1. HTML代码
总分:74
确定
/* javascript中严格区分大小写 a!==A;
1.需要哪些元素
小球 挡板 砖块区域 初始x位置 初始y位置
2.要有那些行为
初始化init
init用来存放初始化方法
如果实例化对象调用所有方法很麻烦,所以一次性解决
创建砖块creatBrick
for循环生成砖块
计算每一个砖块初始化top和left
计算金字塔中线位置
初始化小球
初始化小球x方向移动向量
初始化小球y方向移动向量
初始化小球宽度和高度
初始化小球开始运动事件
初始化小球位置 x,y
初始化挡板
初始化挡板位置 x,y
初始化鼠标监听事件
挡板的移动
挡板中央跟随鼠标x方向移动
挡板运动边界 左 右
小球的移动
小球移动方法 requestAnimationFrame
小球x y 向量自增
碰撞检测{
1:小球和浏览器边框的碰撞
反弹 x||y
2:小球和挡板的碰撞
反弹 y
3.小球和砖块的碰撞
反弹 y && 移除砖块
}
*/
var oBall = document.querySelector("#ball"); //球
var oWard = document.querySelector("#ward"); //挡板
var oScore = document.querySelector('#score');//计分板
var oWrap = document.querySelector('#wrap'); //砖块区域
var over = document.querySelector('#gameover'); //结束
function Breakout(ball, ward, score, wrap, over) { //打砖块小游戏对象 构造函数
this.ball = ball;
this.ward = ward;
this.scores = score;
this.wrap = wrap;
this.over = over;
this.x = 0;
this.y = 0;
this.score = 0;
}
Breakout.prototype = { //原型方法
init: function () { //初始化系统
this.ballstar(); //初始化小球
this.creatBrick(); //创建砖块
this.wardMove(); //挡板移动
},
creatBrick: function () { //砖块初始化
var x = document.documentElement.offsetWidth / 2 - document.documentElement.offsetWidth * .05, //设置居中位置
w = 45 * 2, //设置横向间距基准值
h = 15 * 2; //设置纵向间距基准值
for (var i = 1; i <= 8; i++) { //循环生成div 8层
for (var j = 0; j < i * 2 - 1; j++) { //每一层的砖块个数为 层数*2-1
var brick = document.createElement("div");
brick.style.top = (i - 1) * h + 'px';
brick.style.left = x - (i * w) + (j * w) + 'px';
this.wrap.appendChild(brick);
}
}
},
wardMove: function () { //挡板初始化
this.ward.style.top = window.innerHeight - 180 + 'px'; //初始化挡板的top位置
this.ward.style.left = this.x - 60 + 'px'; //初始化挡板的left位置居中
this.addEvent(document, 'mousemove', this.mouseMove.bind(this)); //监听鼠标移动
},
ballstar: function () { //小球初始化
var This = this;
this.y = window.innerHeight - 200; //初始化坐标X的位置 窗口底部上移200px
this.x = window.innerWidth / 2; //初始化坐标Y的位置 窗口中间部位
this.ball.style.top = this.y + 'px'; //初始化小球的top值为y
this.ball.style.left = this.x + 'px'; //初始化小球的left值为x
this.ball.speed = 10; //初始化小球的速度
this.ball.width = 15; //初始化小球的宽度
this.ball.height = 15; //初始化小球的高度
document.onclick = function () { //点击开始游戏,小球运动
This.ballMove(); //小球移动
}
},
//挡板移动
mouseMove: function (e) { //鼠标移动,挡板跟随鼠标运动
e = e || window.event; //事件对象兼容性处理
var _left = e.pageX - this.ward.offsetWidth / 2; //保证鼠标移动,挡板中间位置同步鼠标位置
_left = Math.min(window.innerWidth - this.ward.offsetWidth, _left); //挡板向右移动不能超过屏幕右边界
_left = Math.max(0, _left); //挡板向左移动不能超过屏幕左边界
this.ward.style.left = _left + 'px'; //通过设置挡板left值实现挡板移动
},
ballMove: function () { //小球开始运动
document.onclick = null; //先清除document的点击事件防止一直重置运动
this.ball.xspeed = this.ball.speed; //初始化小球x运动速度和方向 +为往左 -为往右
this.ball.yspeed = -this.ball.speed;//初始化小球y运动速度和方向 +为往上 -为往下
function auto() { //运动函数 auto 通过requestAnimationFrame递归调用实现循环
this.x += this.ball.xspeed; //x代表当前横向位置 += 横向移动速度 10 每一次都在自己原先的位置基础上+10
this.y += this.ball.yspeed; //y代表当前横向位置 += 横向移动速度 10 每一次都在自己原先的位置基础上+10
this.crash(); //碰撞检测
this.ball.style.left = this.x + 'px'; //小球运动赋值 x轴运动
this.ball.style.top = this.y + 'px'; //小球运动赋值 y轴运动
requestAnimationFrame(auto.bind(this)); //原生js动画 根据cpu运算速度来实现更新
}
auto.call(this);
},
crash: function () {
var maxWidth = window.innerWidth - this.ball.offsetWidth; //浏览器左边界=浏览器宽度-球的宽度
var maxHeight = window.innerHeight - this.ball.offsetHeight; //浏览器右边界=浏览器高度-球的高度
if (this.y >= maxHeight) { //小球掉下去之后,游戏结束
this.gameOver();
}
if (this.x >= maxWidth) {
this.ball.xspeed *= -1; //小球碰到右边墙壁后 横向移动速度取反 往返方向移动
this.x = maxWidth; //重置小球位置
}
if (this.x < 0) { //碰到左边墙 重置横向移动速度 并且重置横向位置 为0
this.ball.xspeed = this.ball.speed;
this.x = 0;
}
if (this.y < 0) { //碰到上边墙壁之后 重置纵向移动速度 以及纵向位置 为0
this.ball.yspeed = this.ball.speed;
this.y = 0;
}
//挡板碰撞检测 xweizhi
if (Math.abs(this.x - (this.ward.offsetLeft + (this.ward.clientWidth / 2))) < 60 && Math.abs(this.y - this.ward.offsetTop - 30) < 45) {
var color = this.ranColor();
this.ward.style.background = color;
this.ball.yspeed *= -1;
this.y = this.ward.offsetTop - 40;
}
for (var i = this.wrap.children.length - 1; i >= 0; i--) {
var ballMx = this.ball.offsetLeft + (this.ball.width / 2);
var ballMy = this.ball.offsetTop + (this.ball.height / 2);
var brickMx = (this.wrap.children[i].offsetLeft + this.wrap.offsetLeft) + (45 / 2);
var brickMy = (this.wrap.children[i].offsetTop + this.wrap.offsetTop) + (15 / 2);
if (Math.abs(ballMx - brickMx) <= 45 && Math.abs(ballMy - brickMy) <= 15) {
this.ball.yspeed *= -1;
this.y = brickMy;
this.wrap.removeChild(this.wrap.children[i]);
if (this.wrap.children.length == 0) {
this.gameOver();
}
this.scoreChange();
}
}
},
scoreChange: function () {
this.score++;
this.scores.innerHTML = this.score + '分';
},
gameOver: function () {
this.over.style.display = 'block';
this.over.children[0].innerHTML = '总分:' + this.score;
var all = document.querySelectorAll('*');
for (var i = 0; i < all.length; i++) {
all[i].style.cursor = 'auto'
}
this.ward.style.display = 'none';
this.ball.style.display = 'none';
this.over.children[1].onclick = function () {
window.location.reload();
}
},
/* getStyle: function (ele, curr) { //获取属性值
return ele.currentStyle ? parseInt(ele.currentStyle[curr]) : parseInt(getComputedStyle(ele, null)[curr]);
},*/
addEvent: function (element, e, fn) {//事件监听
return element.attachEvent ? element.attachEvent('on' + e, fn) : element.addEventListener(e, fn, false);
},
ranColor: function () { //随机颜色
var color = '#';
for (var i = 0; i < 6; i++) {
color += '0123456789abcdef'[Math.floor(Math.random() * 16)]
}
return color;
},
}
var breakout = new Breakout(oBall, oWard, oScore, oWrap, over);
breakout.init();
//凑个200行玩玩....
//凑个200行玩玩...
html5弹球打砖块代码,利用JS实现抖音弹球打砖块游戏代码相关推荐
- 利用JS制作抖音同款3D照片墙(three.js)
利用JS制作抖音同款3D照片墙(three.js) 520快到了,跟我一起学习threeJS 用threeJS制作抖音同款3D照片墙 源码下载:3D照片墙源码下载地址
- html excel 在线编辑,利用js实现在线编辑excel表格代码
特效描述:利用js实现 在线编辑 excel 表格代码.利用js实现在线编辑excel表格代码 代码结构 1. 引入CSS 2. 引入JS 3. HTML代码 function load(){ x ...
- 抖音里面html相册代码大全,分享一下抖音上火的程序员女朋友相册代码
抖音上火爆的3D旋转相册代码,纯H5写出来效果是这样的: 鼠标移动上去裂变. 直接上代码 css部分:html{ background:linear-gradient(#FF6666 0%,#3366 ...
- HTML+CSS+JS 实现抖音3D炫酷相册? 创意网页小礼物了解一下呗?(纪念日的小浪漫)
为心爱的人做一个超具创意的网页生日祝福吧❤(飘动爱心3D相册)HTML+CSS+JavaScript 是不是还没有给心爱的人准备小礼物呀,但是别担心,精心创作了一个"飘动爱心3D相册&quo ...
- android js shell,使用adb shell+node.js实现抖音自动抢红包
这次给大家带来使用adb shell+node.js实现抖音自动抢红包,使用adb shell+node.js实现抖音自动抢红包的注意事项有哪些,下面就是实战案例,一起来看一下. 逻辑很简单,在抖音视 ...
- 动态给a标签赋值_怎样利用Excel制作抖音上的心形动态函数图像?
最近在抖音上看到有用Excel制作心形动态函数图像,感觉很新奇,闲来无事,准备自己动手做做,遂网上搜了教程,按照教程一步步做,前面都很顺利,但到最后一部确卡壳,问了公司Excel大牛也未找到原因,知道 ...
- 2021-10-08 vue.js实现抖音很火八卦时间数字罗盘屏保壁纸
vue.js实现抖音很火八卦时间数字罗盘屏保壁纸 代码如下. <!DOCTYPE html> <html><head> <meta charset=" ...
- 520情人节送女朋友的3D相册礼物~html+css+js实现抖音炫酷樱花3D相册(含音乐)
520情人节送女朋友的3D相册礼物~html+css+js实现抖音炫酷樱花3D相册(含音乐) 一年一度的/520情人节/七夕情人节/生日礼物/告白师妹/程序员表白,是不是要给女朋友或者正在追求的妹子一 ...
- ❤520情人节送女朋友的生日礼物~html+css+js实现抖音炫酷樱花3D相册(含音乐)
❉ 520情人节送女朋友的3D相册礼物~html+css+js实现抖音炫酷樱花3D相册(含音乐) 一年一度的/520情人节/七夕情人节/生日礼物/告白师妹/程序员表白,是不是要给女朋友或者正在追求的妹 ...
最新文章
- 开放神经网络交换(ONNX)工具
- python dataframe取某行某列_pandas dataframe.apply() 实现对某一行/列进行处理获得一个新行/新列...
- 统一用户及权限管理系统
- 利用Jmeter测试CSRF令牌验证的Web API
- LeetCode 681. 最近时刻
- Linux学习笔记009---Centos7安装vim ifconfig wget tree等基础命令
- Java反编译工具推荐 -- DJ Java Decompiler
- 网管日志-06.08.16
- 当前目录未找到系统,请尝试选择更深层的目录再次搜索解决方法
- 文本生成系列之transformer结构扩展(三)
- IDEA 谷歌翻译报错 TKK
- 工业项目实施-URS(用户需求说明)
- 用Java实现修改头像
- python制作网页挂机_Python实现自动挂机脚本(GUI 打包)
- Kill Demodogs——c++——pow_na的博客
- End event threw exception
- 奇幻文学的鼻祖、善与恶的经典战争 《魔戒三部曲》[英]J.R.R.托尔金
- 蓝桥杯Python组的规矩
- C#合并多个richtextbox内容时始终存在换行符的解决方法
- 【web前端期末大作业】基于html+css+javascript+jquery技术设计的音乐网站(44页)
热门文章
- alipay.trade.page.pay 解决vue项目下 支付宝支付不能在新窗口打开收银台的问题
- 怎么学好ZBrush?初学者自学攻略,看完距离ZBrush建模大师又近一步
- 《区块链2.0》谭磊:区块链的核心在于数据
- 【我的保研经验】从中科院--计算所--到--自动化所--再到--空天院(电子所)二部--保研一路走来的欢乐与辛酸~《公开版》
- linux下的dns代理
- kafka笔记4--安装kafka ui
- 四国军棋游戏V0.3.5(未完成)
- axure 8 表格合并_CAD插件表格批量提取1.4安装教程
- Linux Ubuntu查看主要硬件配置,GPU压力测试
- 《JAVA生态圈技术总结》之 微服务架构蓝图总览