JS打砖块,童年的回忆
时间:2022-07-25
本文章向大家介绍JS打砖块,童年的回忆,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
打砖块 —— 敲碎屏幕奖励一百块
睿智的程序员,你有想过自己写一个H5小游戏吗? 打砖块大家都不陌生吧,写一个给孩子玩吧!
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
.box{
width:800px;
height: 600px;
margin:0 auto;
background-color:#999;
overflow: hidden;
}
#game{
width:550px;
height: 500px;
margin:20px auto;
background-color:#f1f1f1;
position: relative;
}
.btn{
width:500px;
margin: 0 auto;
}
.btn button{
width:150px;
height: 40px;
font-size:18px;
}
.brick{
width:50px;
height: 20px;
/*background-color:#f00;*/
position: absolute;
}
#ball{
width:20px;
height: 20px;
background-color:#0f0;
border-radius: 50%;
position: absolute;
bottom:10px;
left: 0;
box-shadow: 2px 2px 9px #ccc;
}
#guard{
width:100px;
height: 10px;
background-color:palevioletred;
position: absolute;
left: 0;
bottom: 0;
border-radius: 6px;
}
</style>
</head>
<body>
<div class="box">
<div id="game"> <!--游戏区域-->
<!--<div class="brick"></div> <!-- 砖块 -->
<!--<div id="ball"></div> <!--小球-->
<!--<div id="guard"></div> <!--挡板-->
</div>
<div class="btn">
<button id="start">开始游戏</button>
<button id="reset">重置游戏</button>
</div>
</div>
</body>
<script>
var gm = document.getElementById("game");//获取游戏区域
var cols = 11;//排11列砖块
var rows = 5;//排5行砖块
var brick,bl,gd;//砖块,小球 挡板
var b_width = 50;//砖块的宽度
var b_height = 20;//砖块的高度
var st = document.getElementById("start");
var rt = document.getElementById("reset");
var timer;
var bricks = [];//盛放砖块的数组
var speedX = 5;//小球的水平速度
var speedY = -5;//小球的垂直速度
// (function(){
//
// })();
//游戏的初始化
var init = function(){
for(var i = 0;i < rows;i++){ //行
for(var j = 0;j < cols;j++){ //列
brick = document.createElement("div");
brick.className = "brick";
brick.style.left = j * b_width + "px";//设置每一个砖块的left值
brick.style.top = i * b_height + "px";//设置每一个砖块的top值
brick.style.backgroundColor = bgColor();
bricks.push(brick);//把创建的砖块添加到一个数组里
gm.appendChild(brick);
}
}
bl = document.createElement("div");//创建小球
bl.id = "ball";
gm.appendChild(bl);
gd = document.createElement("div");//创建挡板
gd.id = "guard";
gm.appendChild(gd);
}
init();
//随机颜色
function bgColor(){
var r = Math.floor(Math.random() * 256);//0-255
var g = Math.floor(Math.random() * 256);//0-255
var b = Math.floor(Math.random() * 256);//0-255
return "rgb(" + r + "," + g + "," + b + ")";
}
//点击开始游戏
st.onclick = function(){
keyFlow();//键盘移动
ballMove();
st.onclick = null;
}
//小球运动
var ballMove = function(){
timer = setInterval(function(){
var lf = bl.offsetLeft + speedX;
var tp = bl.offsetTop + speedY;
//球碰撞 砖块消失 球回来
for(var k = 0;k < bricks.length;k++){
var bs = bricks[k];
if(
bs.offsetLeft <= (bl.offsetLeft + bl.offsetWidth/2)
&& (bs.offsetLeft + bs.offsetWidth) >= (bl.offsetLeft + bl.offsetWidth/2)
&& (bs.offsetTop + bs.offsetHeight) >= bl.offsetTop
){
bs.style.display = "none";
speedY = 5;
}
}
if(lf < 0){ //左边界
speedX = 5;
}else if(lf > gm.offsetWidth - bl.offsetWidth){ //右边界
speedX = -5;
}
if(tp < 0){ //上边界
speedY = 5;
}else if(
(bl.offsetLeft + bl.offsetWidth/2) >= gd.offsetLeft
&& (bl.offsetLeft + bl.offsetWidth/2) <= (gd.offsetLeft + gd.offsetWidth)
&& (bl.offsetTop + bl.offsetHeight) >= gd.offsetTop
){
speedY = -5;
}else if(tp >= gm.offsetHeight - bl.offsetHeight){
gameOver();
}
bl.style.left = lf + "px";
bl.style.top = tp + "px";
},20);
}
//游戏结束
function gameOver(){
clearInterval(timer);
// alert("游戏结束");
}
//左右键 挡板运动
function keyFlow(){
document.onkeydown = function(ev){
var e = ev || window.event;
// keyCode //键码
// alert(ev.keyCode)
if(e.keyCode == 37){ //按左键
var lf = gd.offsetLeft - 30;
if(lf < 0){ //挡板左边界判断
lf = 0;
}
gd.style.left = lf + "px";
}else if(e.keyCode == 39){ //按右键
var lf = gd.offsetLeft + 30;//挡板右边界判断
if(lf > gm.offsetWidth - gd.offsetWidth){
lf = gm.offsetWidth - gd.offsetWidth;
}
gd.style.left = lf + "px";
}
}
}
//重置游戏
rt.onclick = function(){
window.location.reload();
}
</script>
</html>
本文主题部分都已添加了注释,可自行修改游戏 |
---|
修改前记得备份 |
在这里悄悄放一个破解版,送给有缘人。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
.box{
width:800px;
height: 700px;
margin:0 auto;
background-color:#999;
overflow: hidden;
}
#game{
width:550px;
height: 600px;
margin:20px auto;
background-color:#f1f1f1;
position: relative;
}
.btn{
width:500px;
margin: 0 auto;
}
.btn button{
width:150px;
height: 40px;
font-size:18px;
}
.brick{
width:50px;
height: 20px;
/*background-color:#f00;*/
position: absolute;
}
#ball{
width:200px;
height: 200px;
background-color:#0f0;
border-radius: 50%;
position: absolute;
bottom:10px;
left: 0;
box-shadow: 2px 2px 9px #ccc;
}
#guard{
width:450px;
height: 10px;
background-color:palevioletred;
position: absolute;
left: 0;
bottom: 0;
border-radius: 6px;
}
</style>
</head>
<body>
<div class="box">
<div id="game"> <!--游戏区域-->
<!--<div class="brick"></div> <!-- 砖块 -->
<!--<div id="ball"></div> <!--小球-->
<!--<div id="guard"></div> <!--挡板-->
</div>
<div class="btn">
<button id="start">开始游戏</button>
<button id="reset">重置游戏</button>
</div>
</div>
</body>
<script>
var gm = document.getElementById("game");//获取游戏区域
var cols = 11;//排11列砖块
var rows = 9;//排5行砖块
var brick,bl,gd;//砖块,小球 挡板
var b_width = 50;//砖块的宽度
var b_height = 20;//砖块的高度
var st = document.getElementById("start");
var rt = document.getElementById("reset");
var timer;
var bricks = [];//盛放砖块的数组
var speedX = 5;//小球的水平速度
var speedY = -5;//小球的垂直速度
// (function(){
//
// })();
//游戏的初始化
var init = function(){
for(var i = 0;i < rows;i++){ //行
for(var j = 0;j < cols;j++){ //列
brick = document.createElement("div");
brick.className = "brick";
brick.style.left = j * b_width + "px";//设置每一个砖块的left值
brick.style.top = i * b_height + "px";//设置每一个砖块的top值
brick.style.backgroundColor = bgColor();
bricks.push(brick);//把创建的砖块添加到一个数组里
gm.appendChild(brick);
}
}
bl = document.createElement("div");//创建小球
bl.id = "ball";
gm.appendChild(bl);
gd = document.createElement("div");//创建挡板
gd.id = "guard";
gm.appendChild(gd);
}
init();
//随机颜色
function bgColor(){
var r = Math.floor(Math.random() * 256);//0-255
var g = Math.floor(Math.random() * 256);//0-255
var b = Math.floor(Math.random() * 256);//0-255
return "rgb(" + r + "," + g + "," + b + ")";
}
//点击开始游戏
st.onclick = function(){
keyFlow();//键盘移动
ballMove();
st.onclick = null;
}
//小球运动
var ballMove = function(){
timer = setInterval(function(){
var lf = bl.offsetLeft + speedX;
var tp = bl.offsetTop + speedY;
//球碰撞 砖块消失 球回来
for(var k = 0;k < bricks.length;k++){
var bs = bricks[k];
if(
bs.offsetLeft <= (bl.offsetLeft + bl.offsetWidth/2)
&& (bs.offsetLeft + bs.offsetWidth) >= (bl.offsetLeft + bl.offsetWidth/2)
&& (bs.offsetTop + bs.offsetHeight) >= bl.offsetTop
){
bs.style.display = "none";
speedY = 5;
}
}
if(lf < 0){ //左边界
speedX = 5;
}else if(lf > gm.offsetWidth - bl.offsetWidth){ //右边界
speedX = -5;
}
if(tp < 0){ //上边界
speedY = 5;
}else if(
(bl.offsetLeft + bl.offsetWidth/2) >= gd.offsetLeft
&& (bl.offsetLeft + bl.offsetWidth/2) <= (gd.offsetLeft + gd.offsetWidth)
&& (bl.offsetTop + bl.offsetHeight) >= gd.offsetTop
){
speedY = -5;
}else if(tp >= gm.offsetHeight - bl.offsetHeight){
gameOver();
}
bl.style.left = lf + "px";
bl.style.top = tp + "px";
},0);
}
//游戏结束
function gameOver(){
clearInterval(timer);
// alert("游戏结束");
}
//左右键 挡板运动
function keyFlow(){
document.onkeydown = function(ev){
var e = ev || window.event;
// keyCode //键码
// alert(ev.keyCode)
if(e.keyCode == 37){ //按左键
var lf = gd.offsetLeft - 30;
if(lf < 0){ //挡板左边界判断
lf = 0;
}
gd.style.left = lf + "px";
}else if(e.keyCode == 39){ //按右键
var lf = gd.offsetLeft + 30;//挡板右边界判断
if(lf > gm.offsetWidth - gd.offsetWidth){
lf = gm.offsetWidth - gd.offsetWidth;
}
gd.style.left = lf + "px";
}
}
}
//重置游戏
rt.onclick = function(){
window.location.reload();
}
</script>
</html>
如果游戏难度让你略微不爽,那就复制上面这串代码,体验一把无敌是多么寂寞!
博主不求大家关注,只求能够稍稍浏览一下别的贴子,相信不会让你失望的,你的每一个赞,每一句鼓励,都将成为我源源不断的活力,都是我快乐的点滴。
- JavaScriptSerializer 序列化json 时间格式
- Nginx反向代理+负载均衡简单实现(https方式)
- 在网页中给Flash加上超级链接
- ASP.NET MVC HandleErrorAttribute 和 远程链接
- javascript实现数字转大写金额的函数
- 如何在GridView的Footer内显示总计?
- 自定义WCF的配置文件
- Centos中动态扩容lvm逻辑卷的操作记录
- Visual Round Trip Analyzer
- ASP.NET可以在Windows Server 2008 R2 Server Core上运行
- SOA十大设计原则
- 中国人民大学文继荣:大数据的经验主义解释
- 检查Python对象
- 分布式监控系统Zabbix-3.0.3-完整安装记录(6)-微信报警部署
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- org.springframework.web.client.ResourceAccessException: I/O error on POST request....
- 升级MySQL InnoDB Cluster的元数据
- 数据分析项目-数据分析岗位近况分析
- Eureka 的服务发现 Discovery 简单配置
- python自动化之JS处理滚动条
- Docker 中启动 ZooKeeper
- 将MySQL复制限制为基于行的事件
- 在tinycorelinux上安装lxc,lxd (1)
- Ubuntu16.04下安装python3.6
- Mybatis 注解
- Python如何使用Matplotlib的作图
- 在tinycolinux上组建子目录引导和混合32位64位的rootfs系统
- 微服务中的负载均衡简单实现
- 3分钟短文:素未谋面,Laravel数据库模型初阶入门
- 在tinycolinux上编译seafile