JS实现打砖块游戏
本文实例为大家分享了JS实现打砖块游戏的具体代码，供大家参考，具体内容如下
面向对象思想
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#show{
width: 200px;
height: 600px;
position: absolute;
left:1122px ;
top:50px;
background-color: gray;
color: blue;
line-height: 100px;
font-size: larger;
align-self: center;
}
#lose{
position: absolute;
top: 300px;
left: 300px;
font-size: xx-large;
display: none;
}
li{
position: absolute;
list-style-type: none;
background-color: #000000;
width: 90px;
height: 30px;
border: 1px solid white;
}
#box{
position: absolute;
width: 920px;
height: 600px;
left: 200px;
top: 50px;
border: 2px solid red;
}
#board{
position: absolute;
top:590px;
left: 300px;
width: 200px;
height: 10px;
background-color: black;
}
#bubble{
position: absolute;
top: 565px;
left: 360px;
width: 25px;
height: 25px;
background-color: #FF0000;
border-radius: 50%;
}
</style>
<script type="text/javascript">
window.onload=function(){
function $(id){
return document.getElementById(id);
}
function rand(min,max){
return Math.floor(Math.random()*(max-min+1))+min
}
//打砖块构造函数
function BlockBreak(){
this.box=$('box');//容器
this.list=document.getElementsByTagName('li');//砖块
this.board=$('board');//挡板
this.ball=$('bubble');//小球
this.fx=3;//横向
this.fy=-3;//纵向
this.leftInit=0;//砖块left初始值
this.topInit=0;//砖块top初始值
}
//初始化功能 摆放每一个砖块的位置
BlockBreak.prototype.init=function(){
for(var i=0;i<this.list.length;i++){
this.list[i].style.backgroundColor="rgb("+rand(0,255)+","+rand(0,255)+","+rand(0,255)+")";
var x=this.leftInit*this.list[0].offsetWidth;
var y=this.topInit;
this.list[i].style.left=x+'px';
this.list[i].style.top=y+'px';
this.leftInit++
//换行
if((i+1)%10==0){
this.leftInit=0;
this.topInit+=this.list[0].offsetHeight;
}
}
}
//挡板运动
BlockBreak.prototype.keydown=function(){
var that=this;
var mleft=false;
var mright=false;
//因为按键之后第一次跟第之后的移动之间会有延迟，这是操作系统的问题防止连按两次
//所以就不把移动放在这里了，把治理放一个标志，移动放在定时器里
document.onkeydown=function(e){
var e=e||event;
if(e.keyCode==37){
mleft=true;
}
if(e.keyCode==39){
mright=true;
}
}
document.onkeyup=function(){
mleft=false;
mright=false;
}
setInterval(function(){
console.log(mleft);
if (mleft){
that.board.style.left=that.board.offsetLeft-15+'px';
if(that.board.offsetLeft<=0){
that.board.style.left=0;
}
}else if(mright){
that.board.style.left=that.board.offsetLeft+15+'px';
if(that.board.offsetLeft>=720){
that.board.style.left=720+'px';
}
}
},50)
}
var times=0;
var score=0;
//小球运动
BlockBreak.prototype.move=function(){
var timer=null;
var that=this;
timer=setInterval(function(){
that.ball.style.left=that.ball.offsetLeft+that.fx+'px';
that.ball.style.top=that.ball.offsetTop+that.fy+'px';
//小球四个方向反弹
if(that.ball.offsetTop<=0){
that.fy*=-1;
}
if(that.ball.offsetLeft<=0){
that.fx*=-1;
}
if(that.ball.offsetLeft>=(that.box.offsetWidth-that.ball.offsetWidth)){
that.fx*=-1;
}
if(that.ball.offsetTop>=(that.box.offsetHeight-that.ball.offsetHeight)){
//游戏结束
$('lose').style.display='block';
clearInterval(timer);
$('res').innerHTML='游戏结束'+"<br>";
}
//小球挡板碰撞反弹
if(that.ball.offsetTop+that.ball.offsetHeight>=that.board.offsetTop){
if(that.ball.offsetLeft+that.ball.offsetWidth>=that.board.offsetLeft){
if(that.ball.offsetLeft<=that.board.offsetLeft+that.board.offsetWidth){
that.fy*=-1;
times++;
$('times').innerHTML=times+'次'+'<br>';
}
}
}
//小球砖块反弹
//以一个小球为基准 遍历所有砖块，找到满足条件的砖块
for(var i=0;i<that.list.length;i++)
{
if(that.ball.offsetTop<=that.list[i].offsetTop+that.list[i].offsetHeight){
if(that.ball.offsetLeft>=that.list[i].offsetLeft){
if(that.ball.offsetLeft<=that.list[i].offsetLeft+that.list[i].offsetWidth){
that.fy*=-1;
that.list[i].style.display='none';
score++;
$('score').innerHTML=score+'分'+'<br>';
}
}
}
}
},10)
}
var bb=new BlockBreak();
bb.init();
$('start').onclick=function(){
$('times').innerHTML=0+'次'+'<br>';
$('score').innerHTML=0+'分'+"<br>";
$('res').innerHTML= "正在游戏"+"<br>";
bb.keydown();
bb.move();
}
}
</script>
</head>
<body>
<div id="container">
<div id="show">
<span id="info">游戏重要信息<br></span>
<span>当前时间:</span>
<span id="time">加载中...<br></span>
<span>游戏状态:</span>
<span id="res">加载中...<br></span>
<span>挡板打球次数:</span>
<span id="times">加载中...<br></span>
<span>游戏得分:</span>
<span id="score">加载中...</span>
</div>
<!----游戏区域--->
<div id="box">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<div id="bubble"></div>
<div id="board"></div>
<div id="lose"><h1>Game Over!</h1></div>
</div>
<button type="button" id="start">开始游戏</button>
</div>
</body>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
jQuery网页版打砖块小游戏源码分享
这是一款基于jQuery实现网页版打砖块小游戏源码,满满的童年回忆. 为大家分享的jQuery实现网页版打砖块小游戏源码如下 效果演示 源码下载 <!DOCTYPE html> <html lang="en" > <head> <meta charset="gb2312" /> <title>jQuery网页版打砖块小游戏源码</title> <link href="css/ma
-
用JS实现一个简单的打砖块游戏
话不多说,先看看效果: HTML架构部分 <!-- HTML结构 --> <div class="content"> <div class="game"></div> <div class="container"> <h2>打砖块小游戏</h2> <hr /> <center> <button id="start"
-
javascript HTML5 canvas实现打砖块游戏
本文实例编写的一个小游戏,基于HTML5中的canvas.游戏主要是小球反弹击打小方块.在代码中主要实现了小方块的生成,键盘键事件的监听,小球的移动和碰壁之后的反弹以及怎样消除小方块等方法.代码使用到了一个js脚本库 游戏开发流程: 1.创建画布: 将画布放在div标签里面,这样可以控制画布居中的位置,再对div标签加上一些样式比如border和border-radius,这样一来使其看上去像手机,利于观看. <div id="main"> <!--将画布嵌在div块
-
利用原生js实现html5小游戏之打砖块（附源码）
前言 PS:本次项目中使用了大量 es6 语法,故对于 es6 语法不太熟悉的小伙伴最好能先了解一些基本的原理再继续阅读. 首先,先说明一下做这个系列的目的:其实主要源于博主希望熟练使用 canvas 的相关 api ,同时对小游戏的实现逻辑比较感兴趣,所以希望通过这一系列的小游戏来提升自身编程能力:关于 es6 语法,个人认为以后 es6 语法会越来越普及,所以算是提前熟悉语法使用技巧.小游戏的实现逻辑上可能并不完善,也许会有一些 bug ,但是毕竟只是为了提升编程能力与技巧,希望大家不要太较
-
JS实现打砖块游戏
本文实例为大家分享了JS实现打砖块游戏的具体代码,供大家参考,具体内容如下 面向对象思想 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> #show{ width: 200px; height: 600px; position: absolute;
-
JavaScript实现打砖块游戏
本文实例为大家分享了JavaScript实现打砖块游戏的具体代码,供大家参考,具体内容如下 html+css部分 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>打砖块</title> <link rel="stylesheet" type="text/css" href="css/bre
-
C语言数组实现打砖块游戏
本文实例为大家分享了C语言数组实现打砖块游戏的具体代码,供大家参考,具体内容如下 这次我们使用数组来改进打砖块游戏. 反弹的球 首先我们实现一个可以在荧幕上反弹的小球.使用二维数组 int canvas[High][Width] ( 和js的canvas没有一毛钱关系)来储存画布上的所有元素,值为0时输出空格,值为1时输出小球. 设小球坐标为(ball_x, ball_y),则有canvas[ball_x][ball_y] = 1 ,且暂时将其他元素的值设为0. 每次更新小球位置时将原位置元素设
-
Angular.js中ng-include用法及多标签页面的实现方式详解
前言 大家在平时的项目开发中,应该会经常遇到上图所示的需求,就是在一个页面中有多个标签,被选中的标签颜色会高亮显示,切换不同标签显示相应的不同内容.如果内容代码过多则写在同一个html文件就会显得特别乱,所以这里我们最好把页面代码分开单独管理,controller也可以分开来管理,这样就会显得清楚的多. 这里就要使用到Angularjs中个ng-include指令.下面来看看详细的介绍: 一.多标签的编写 首先需要了解需求: 1.同时只能选中一个标签 2.被选中的标签背景色以及自体颜色都将改变.
-
React.Js添加与删除onScroll事件的方法详解
React简介 React是有Facebook开发出来用于构建前端界面的JS组件库,由于其背后的强大背景,使得这款库在技术开发上完全没有问题. React的优势 解决大规模项目开发中数据不断变化变得难以操作的问题: 组件化开发,使得开发更加快速: 单向数据流,有利于找到问题: 虚拟DOM,在React内部有一套diff算法可以快速的计算出整体需要改动的位置,从而做到快速局部刷新:举个栗子:删除一个列表再插入个新表,计算后会比较出不同然后插进去: 前言 大家都可能会遇到这样的问题,那就是滚动事件
-
js 客户端打印html 并且去掉页眉、页脚的实例
print() 方法用于打印当前窗口的内容,支持部分或者整个网页打印. 调用 print() 方法所引发的行为就像用户单击浏览器的打印按钮.通常,这会产生一个对话框,让用户可以取消或定制打印请求. win10下测试ie11.chrome.firefox.360.edge 都可以成功去掉页眉页脚: <!DOCTYPE html> <html> <head> <title>打印</title> <meta charset="utf-8
-
PHP+JS实现批量删除数据功能示例
本文实例讲述了PHP+JS实现批量删除数据功能.分享给大家供大家参考,具体如下: 表单 <form id="form2" name="form2" method="post" action="del_product.php" onsubmit="return checkF(this)"> <label> <input type="checkbox" name
-
JS实现分页浏览横向图片(类轮播)实例代码
昨天朋友问我怎么用js实现分页浏览横向图片功能,其实实现代码很简单的,下面小编给大家带来了具体实现代码,代码如下所示: common.js function $(id) { return document.getElementById(id); } function $_tag(tag) { return document.getElementsByTagName(tag); } index.html <!DOCTYPE html> <html lang="en"&g
-
js实现简单数字变动效果
本文实例为大家分享了js实现数字变动效果展示的具体代码,供大家参考,具体内容如下 $.fn.countTo = function (options) { options = options || {};//当options未被初始化,即typeof options = 'undefined'时,执行后面部分即var options = {}来初始化一个对象 return $(this).each(function () { // set options for current element v