html打砖块游戏制作,JavaScript实现打砖块游戏
本文实例为大家分享了JavaScript实现打砖块游戏的具体代码,供大家参考,具体内容如下
html+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;*/
}
开始
重置
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经典游戏 玩不停》
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
html打砖块游戏制作,JavaScript实现打砖块游戏相关推荐
- JavaScript实现打砖块游戏_艾孜尔江撰
<!DOCTYPE html> <html> <!-- 使用原生的JavaScript复现打砖块游戏:代码在复现时有所改动.--><head><m ...
- Winform打砖块游戏制作step by step第5节---重构代码,利用继承多态
一 引子 为了让更多的编程初学者,轻松愉快地掌握面向对象的思考方法,对象继承和多态的妙用,故推出此系列随笔,还望大家多多支持. 二 本节内容---重构代码,利用继承多态 1. 主界面截图如下: 2. ...
- DW静态网页设计与制作 JavaScript大作业 HTML静态网页作业——海贼王主题网页设计制作6个页面(HTML+CSS)
HTML静态网页作业--海贼王主题网页设计制作6个页面(HTML+CSS) 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从下手?网页要求的总数量太多?没有合 ...
- 小米官网项目制作——javascript知识分享上
目录 前言 一.整体架构 二.弹出的盒子 1.定位盒子 2.弹出效果 3.其他细节 三.下拉,展开的切换菜单 1.放置盒子 2.切换盒子 3.添加索引 4.侧边展开的盒子 四.轮播图 1.本体的部件 ...
- 小米官网项目制作——javascript知识分享下
目录 前言 一.观察页面内容 二.切换界面 三.登录表单界面 1.选中的效果 2.错误提示 3.不选中的效果 4.密码框 四.注册界面 五.链接跳转 总结 前言 之前我分享了关于小米官网主页的java ...
- 前程无忧招聘网站特效制作(JavaScript特效)
招聘网站特效制作,实现如下功能: 1.网站首页 2.新用户注册 3.用户登录 4.简历管理:信息填写 5.职位搜索 6.招聘公司页面查看 模板制作:网站底部做成模板,网站其他页面调用模板,模板用DIV ...
- 图表控件AnyChart教程:如何制作JavaScript极坐标图(一)
目录 JS 极坐标图预览 1.用HTML创建一个基本的网页 2. 引用所需的 JavaScript 文件 3. 添加数据 4.编写一些JS代码来绘制极坐标图 初始极地图结果 自定义 JS 极坐标图 A ...
- 图表控件AnyChart教程:如何制作 JavaScript 极坐标图(二)
目录 JS 极坐标图预览 1.用HTML创建一个基本的网页 2. 引用所需的 JavaScript 文件 3. 添加数据 4.编写一些JS代码来绘制极坐标图 初始极地图结果 自定义 JS 极坐标图 A ...
- 打砖块游戏c语言设计,打砖块游戏的源代码(请多指教)
该楼层疑似违规已被系统折叠 隐藏此楼查看此楼 #include#include#include#include#includevoid draw(int x1){int m=0,n=0,x=40,y= ...
- 在JavaScript中使用inline函数的问题
前段时间被IE和JavaScript脚本引擎的Memory Leak问题弄得郁闷坏了,不过幸好现在总算是柳暗花明了,并且找到了一些IE中使用脚本避免ML问题的方法.继续研究JavaScript的编写, ...
最新文章
- jvm调优:何为垃圾及与c++的对比
- 鼠标 . 软驱 . 打印机 . 硬盘. 风扇 . 常见事故处理 -
- 第九章 利用化学知识制药
- 计算机 子分数 游戏图形,Windows7下如何开启和关闭系统分级功能.doc
- 软件_linux命令cp目录路径和通配符
- ubuntu18.04+nvidia显卡安装+cuda9.0+cudnn7+pycharm2018.2专业版激活+anaconda3+tensorflow-gpu1.6.0+keras+opencv3
- The requested URL /xxxx.html was not found on this server
- 实验项目三 基于A*搜索算法迷宫游戏开发
- 几年基础架构的经验之谈[42 things I learned from building a production database]
- Android/Linux Thermal Governor之IPA分析与使用
- 浏览器edge插件的安全与个人隐私
- python idle是什么_idle是什么意思
- STL初步——集合Set
- android ios mp4格式转换,ios格式转换器|iphone视频格式转换器免费版 7.1 - 系统天堂...
- 开发工作流程_您应该了解的9个开发工作流程升级
- 4年!我对OpenStack运维架构的总结
- 〖Python 数据库开发实战 - Redis篇⑫〗- Redis的事务特性
- Linux桌面虚拟化技术--KVM
- 程序员必备5个编程自学网站,你都用到过吗?
- Android 自动亮度
热门文章
- 基于python语言设计的词云定制器
- 饿了么分布式服务治理及优化经验(含PPT)
- java中items是什么意思,Ansible - 如何使用with_items中的寄存器名称
- alias rewrite 后出现404,应设置RewriteBase参数
- ETC工作原理及技术浅析
- 基于Java-web的树洞网站的设计与实现
- 王佩丰excel教程笔记(认识excel)
- 定义一个方法用于判断一个字符串是否是对称的字符串(StringBuilder),例如:abcba、上海自来水来自海上均为对称字符串。
- PLog——一个简洁快速,小而美的C++异步日志库
- dnf第七章waiguaⅢ∨dnf第七章好感度【=dnf第七章免费外挂