详细开发过程见下文
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>qqqun.21.777.12</title>
<style>
#mainDiv div{
width:28px;height:13px;background-color:blue;position:absolute;
}
</style>
<script>
/**
*Author:撞墙的哈维；
*：2177712
*转载请注明出处及详细开发过程 blog.csdn.net/uucai
*/
var $ = function (id) {//方便按id提取
return document.getElementById(id);
};
var zdivs = new Array();//用于存储所有的砖块div
window.onload=function(){
var x =150;var y = 15;
var m = $("mainDiv");
for(var i=1;i<=9;i++){
for(var j=0;j<i;j++){
var di = document.createElement("div");
di.style.top = y+(i-1)*15;
di.style.left= x-i*15+j*30;
m.appendChild(di);
var di1 = document.createElement("div");
di1.style.top = y+(i-1)*15;
di1.style.left= x+300-i*15+j*30;
m.appendChild(di1);
zdivs[zdivs.length]=di;
zdivs[zdivs.length]=di1;
}
}
for(var i=1;i<=10;i++){
var di = document.createElement("div");
di.style.top = y+150+(i-1)*15;
di.style.left= x-15;
m.appendChild(di);
var di1 = document.createElement("div");
di1.style.top = y+150+(i-1)*15;
di1.style.left= x-15+300;
m.appendChild(di1);
zdivs[zdivs.length]=di;
zdivs[zdivs.length]=di1;
}
for(var i=1;i<=9;i++){
for(var j=0;j<i*2;j++){
var di = document.createElement("div");
di.style.top = y+450-(i-1)*15;
di.style.left= x+150-i*30+j*30;
m.appendChild(di);
zdivs[zdivs.length]=di;
}
}
}
var qx = 295;//飞球初始坐标left
var qy = 580;//飞球初始坐标top
var jiao = 89;//初始飞行角度
var zx = 1;//控制left位移的正负
var zy = -1;//控制top位移的正负
var rp = null;//控制游戏进程
var qx1=0;
var qy1=0;
function go(){
var qiu = $("qiuDiv");
qx = qx +zx*Math.cos((2*Math.PI/360)*jiao);
qy = qy +zy*Math.sin((2*Math.PI/360)*jiao);
if(qy>=580){
if(qx<bangleft||qx>bangleft+150){//判断是否接住
clearTimeout(rp);
}else{
zy=-1;
if((qx-bangleft)>(75)){
jiao = 90-(qx-bangleft+10-75)/75*90;
zx = 1;
}else{
jiao = 90 - (75-(qx-bangleft+10))/75*90;
zx=-1;
}
rp = setTimeout("go()",1);
}
}else{if(qy<=480)
for(var i=0,m = zdivs.length ;i<m;i++){
var io = checkIsP(qx,qy,zdivs[i].offsetLeft,zdivs[i].offsetTop);
if(io!=0){
zdivs[i].style.display = "none";
zdivs.splice(i,1);
if(io==1){
zx=1;
}
if(io==2){
zx=-1;
}
if(io==3){
zy=1;
}
if(io==4){
zy=-1;
}
break;
}
}
if(qx>=600)zx=-1;
if(qx<=0)zx=1;
if(qy<=0)zy=1;
qiu.style.left = qx+"px";
qiu.style.top = qy+"px";
if(zdivs.length!=0)//如果砖块未打完
rp = setTimeout("go()",1);
}
}
function checkIsP(qx,qy,zx,zy){
var f = {
x:qx,
y:qy,
x1:qx+10,
y1:qy+10
}
var z = {
x:zx,
y:zy,
x1:zx+30,
y1:zy+15
}
var sx;var sy;
sx = f.x>=z.x?f.x:z.x;
sy = f.y>=z.y?f.y:z.y;
if(sx >= f.x && sx <= f.x1 && sy >= f.y && sy <= f.y1 && sx >= z.x && sx <= z.x1 && sy >= z.y && sy <= z.y1){
return seSmall(Math.abs(f.x-z.x1),Math.abs(f.x1-z.x),Math.abs(f.y-z.y1),Math.abs(f.y1-z.y));
}else{
return 0;
}
}
function seSmall(a,b,c,d){
if(a<b&&a<c&&a<d){
return 1;
}
if(b<a&&b<c&&b<d){
return 2;
}
if(c<a&&c<b&&c<d){
return 3;
}
if(d<b&&d<c&&d<a){
return 4;
}
}
var bangleft = 225;
var qiuleft = 295;
var bs = 10;//棒的移动频率
var kflag = false;
//键盘处理事件
function keydownEvent(event){
if(event.keyCode==32){//如果是空格
if(!kflag)
go()
kflag = true;
}
var qiu = $("qiuDiv");
var bang = $("bangDiv");
if(event.keyCode==37){//如果是左箭头
for(var i = 0;i<bs;i++){
if(bangleft-1!=0){
bangleft-=1;
bang.style.left = bangleft+"px";
if(!kflag){
qiuleft-=1;
qx-=1;
qiu.style.left = qiuleft+"px";
}
}
}
}
if(event.keyCode==39){//如果是右箭头
for(var i = 0;i<bs;i++){
if(bangleft+1!=450){
bangleft+=1;
bang.style.left = bangleft+"px";
if(!kflag){
qiuleft+=1;
qx+=1;
qiu.style.left = qiuleft+"px";
}
}
}
}
}
</script>
</head>
<body style="background-color:grey;" onkeydown="keydownEvent(event)">
<div align="center">
<div style="width:600px;height:600px;background-color:#BFEFFF;border:5px groove #87CEFA;position:relative;" id="mainDiv">
<div id="qiuDiv" style="width:10px;height:10px;top:580;left:295;background-color:red;"></div>
<div id="bangDiv" style="width:150px;height:10px;bottom:1;left:225;background-color:black;"></div>
</div>
</div>
<body>
</html>
Java学习交流群： 2177712
相关推荐
项目：使用 JavaScript 编写的打砖块游戏（附源代码） Arkanoid 游戏是一个使用 JavaScript、CSS 和 Html 开发的简单项目。这款游戏非常有趣，令人上瘾。玩家必须用移动的小球摧毁砖块层。小球从屏幕顶部和两侧弹起...
使用 JavaScript 编写的打砖块游戏（附源代码） 项目：JavaScript 打砖块游戏（附源代码） 打砖块游戏是使用 HTML5、CSS 和 JavaScript 开发的简单项目。这款游戏是关于借助弹跳球和滑动平面来打破障碍。您可以玩...
总的来说，这款“打砖块游戏源码”充分利用了JavaScript的面向对象编程特性、事件驱动和DOM操作，实现了一个无需额外图形库的纯JavaScript游戏。通过研究源码，开发者可以学习到JavaScript游戏开发的基本技巧和思维...
【标题】"JS抖音弹球打砖块游戏代码"是一个基于JavaScript编程语言开发的互动游戏项目，灵感来源于抖音上的热门游戏。它展示了如何利用JavaScript来实现动态效果和用户交互，特别是游戏逻辑。在这个游戏中，玩家将...
【JS网页版弹球打砖块小游戏代码.zip】是一个包含了一款基于JavaScript实现的网页游戏——弹球打砖块的源代码。这个压缩包里主要包含两个关键文件：`index.html`和`images`文件夹。`index.html`是游戏的主页面，它...
HTML5弹球打砖块小游戏是一款基于Web技术开发的互动娱乐应用，主要利用HTML5的Canvas元素和JavaScript编程实现。这款游戏的设计灵感源自经典的打砖块游戏，玩家通过控制挡板来反弹小球，打破屏幕上排列的砖块。下面...
《jQuery网页版打砖块游戏实现详解》 在网页游戏中，jQuery打砖块游戏是一种深受开发者和玩家喜爱的简单但有趣的编程实践项目。利用jQuery这一强大的JavaScript库，开发者可以轻松地构建出一款互动性强、用户体验...
打砖块射击，保卫星球射击，吃豆人，开心消消乐，俄罗斯方块，2048方块版，看图猜词，弹球打砖块，小方块回家，双人五子棋，射箭小游戏，飞机大战2.0，简单闯关游戏，重力球滚动，头像迷阵消除，变色弹球跳台阶，...
游戏在打砖块的主要玩法基础上加入了更多玩法，包括：道具和通关计时系统等。 可以在手机上直接运行 程序使用js语言进行编写的html5版本游戏，使用了PIXI框架进行开发。
本篇将详细解析一款名为"AlsdGo打砖块"的JavaScript游戏，通过这款游戏，初学者可以深入理解JavaScript的基本语法和事件处理机制，同时对游戏开发有初步的认识。 "AlsdGo打砖块"是一款简单的打砖块游戏，它完全使用...
HTML5 Canvas技术是Web开发中的一个关键组成部分，它允许开发者在网页上绘制图形，创建动态交互式的2D游戏和应用程序...通过学习这个游戏的源代码，开发者可以深入理解如何使用这些技术来构建自己的Web游戏或动画项目。
HTML5弹珠砖块游戏源代码是基于HTML5技术开发的一款简单而有趣的小游戏，它融合了经典弹珠台的玩法和打砖块的游戏元素。这款游戏设计简洁，玩家通过控制弹珠台的挡板来反射弹珠，目标是消除屏幕上的砖块。以下是关于...
《jQuery实现的网页版打砖块小游戏源码》是一款基于jQuery框架开发的互动游戏，它为用户提供了在网页上享受打砖块经典游戏的体验。本文将深入解析这款游戏的实现原理，带你了解jQuery如何用于创建动态游戏场景。 ...
在这个"html5实现的打砖块拆墙小游戏源码.zip"压缩包中，我们拥有的是一款基于HTML5构建的经典打砖块游戏的源代码。打砖块游戏是一款广受欢迎的休闲游戏，玩家通过移动一个平台来反射弹球，目标是消除屏幕上所有的...
项目：使用 JavaScript 编写的经典游戏及其源代码 Classic Games 是一个使用 HTML、CSS 和 JavaScript 开发的简单项目。该项目是一系列老式的令人上瘾的游戏，其中包括贪吃蛇游戏、偷蛋糕游戏、打砖块游戏和猪游戏。...
"132696213310959806"可能是游戏源代码的主文件或者说明文档，通常会包含更详细的实现细节，如变量定义、函数逻辑和具体的碰撞检测算法。"使用须知.txt"则可能包含了游戏的使用指南、注意事项或者版权信息，帮助用户...
在本文中，我们将深入探讨如何使用Java EE技术开发一个简单的打砖块小游戏。作为一个初学者的项目，这个小游戏虽然可能存在不足，但它提供了一个实践Java编程基础和理解Web应用程序架构的良好机会。 首先，Java EE...
1. Java源代码：包含了游戏逻辑、网络接口、数据结构等。 2. 微信小程序代码：包括WXML（结构）、WXSS（样式）、JS（逻辑）三部分，用于构建用户界面和处理用户交互。 3. 资源文件：如图片、音频等，用于增强游戏的...
令人上瘾的闯关（打砖块）类型的游戏结合终极禅宗体验！ 在免费提供 特征 2种令人上瘾的游戏模式 7个漂亮的颜色主题 本地和全球高分跟踪 街机模式 证明自己并尝试在球的速度上升到无法控制的水平之前尽可能多地获得...
主要的游戏源代码应该在"HTML5 canvas打砖块射击小游戏"这个文件中，它是用HTML和JavaScript编写的，并且可能包含CSS来控制界面样式。 学习这个小游戏的代码，开发者可以深入了解Canvas的基本绘图原理，以及如何...