打砖块游戏

制作了个打砖块的Html5版本，加入了道具和通关计时系统。可以直接在手机上运行。效果图如下

源码下载地址

https://download.csdn.net/download/fujian87232/79892428

游戏代码

index.html文件

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><style>html,body{height:100%;margin: 0;}</style><script src="pixi.min.js"></script> </head><body></body><script src="game.js"></script></html>

引入的game.js文件，主要逻辑都在这里

var app = new PIXI.Application(494,800);
document.body.appendChild(app.view);app.view.style.height = "100%";var score = 0;
var level = 0;
var time = 0;
var lastBallNum = 10;
var gameType = 0;var isBullet = false;var blockLevelArr =
[
[7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,0,0,7,7,7,7,7,0,0,7,7,7,7,0,0,2,2,2,2,2,0,0,7,7,7,7,0,0,8,8,8,8,8,0,0,7,7,7,3,3,3,3,3,3,3,3,3,3,3,7,7,7,7,7,7,7,7,7,7,7,7,7,7,0,7,7,7,0,0,0,0,0,7,7,7,0,6,6,6,7,0,0,0,0,0,7,6,6,6,6,6,6,6,8,8,8,8,8,6,6,6,6,
],
[7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,2,2,2,2,2,2,2,7,7,7,7,7,7,7,1,1,1,1,1,7,7,7,7,7,7,7,7,1,1,1,1,1,7,7,7,7,7,7,7,8,8,8,8,8,8,7,7,7,7,7,7,7,7,1,1,1,1,1,7,7,7,7,
],
[7,7,7,7,0,7,7,7,0,7,7,7,7,7,7,7,7,0,7,7,7,0,7,7,7,7,7,7,7,2,0,2,2,2,0,2,7,7,7,7,7,7,7,0,1,1,1,0,7,7,7,7,7,3,3,3,0,3,3,3,0,3,3,3,7,7,7,7,8,8,8,8,8,8,7,7,7,7,0,7,7,7,0,5,5,5,0,7,7,7,0,0,0,0,7,0,7,7,7,0,7,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
],
[7,7,7,7,7,7,7,7,7,7,7,7,7,0,0,0,7,7,7,7,7,7,7,0,0,0,0,0,0,7,7,7,7,7,7,7,0,0,0,7,7,7,7,1,1,1,1,1,7,7,7,7,0,0,0,7,7,7,7,7,7,7,0,0,0,0,0,0,7,7,7,7,7,7,7,0,0,0,0,7,7,7,5,5,5,5,5,7,7,7,0,0,0,0,7,7,7,7,7,7,7,0,0,0,0,0,0,0,8,8,8,8,8,0,0,0,0,
],
[7,3,3,3,3,3,3,3,3,3,3,3,7,0,7,7,7,5,5,5,5,5,7,7,7,0,0,0,0,7,7,7,7,7,7,7,0,0,0,0,0,0,0,8,8,8,8,8,0,0,0,0,0,7,7,7,5,5,5,5,5,7,7,7,0,0,0,0,7,7,7,7,7,7,7,0,0,0,0,0,0,0,8,8,8,8,8,0,0,0,0,0,0,0,7,7,7,7,7,7,7,0,0,0,7,3,3,3,3,3,3,3,3,3,3,3,7,
],
[7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,2,2,2,2,2,2,2,7,7,7,0,7,7,7,5,5,5,5,5,7,7,7,0,0,0,0,7,7,7,7,7,7,7,0,0,0,0,0,0,0,7,7,7,7,7,0,0,0,0,7,7,0,0,7,7,7,7,7,0,0,7,7,7,7,0,0,2,2,2,2,2,0,0,7,7,7,7,0,0,1,1,1,1,1,0,0,7,7,
]];var bg = new PIXI.Sprite.fromImage("res/dazk/bg2.png");
app.stage.addChild(bg);var gan = new PIXI.Sprite.fromImage("res/dazk/img_36.png");
app.stage.addChild(gan);
gan.anchor.x = 0.5;
gan.anchor.y = 0.5;
gan.x = 200;
gan.y = 700;// ui
var uiBg = new PIXI.Sprite.fromImage("res/dazk/ui-2_02.png");
app.stage.addChild(uiBg);
uiBg.x = 20;//剩余砖块
var lastBlockNum = new PIXI.Text();
lastBlockNum.text = 100 + "";
app.stage.addChild(lastBlockNum);
lastBlockNum.x = 310;
lastBlockNum.y = 28;//得分
var scoreTxt = new PIXI.Text();
scoreTxt.text = 0 + "";
app.stage.addChild(scoreTxt);
scoreTxt.x = 200;
scoreTxt.y = 28;//倒计时
var timeTxt = new PIXI.Text();
timeTxt.text = 0 + "";
app.stage.addChild(timeTxt);
timeTxt.x = 60;
timeTxt.y = 740;//剩余球数量
var lastBall = new PIXI.Sprite.fromImage("res/dazk/qiu_32.png");
app.stage.addChild(lastBall);
lastBall.x = 320;
lastBall.y = 745;//剩余球
var lastBallTxt = new PIXI.Text();
lastBallTxt.text = " x " + lastBallNum;
app.stage.addChild(lastBallTxt);
lastBallTxt.x = 350;
lastBallTxt.y = 740;//当前关卡
var currLevelTxt = new PIXI.Text();
currLevelTxt.text = level + " / " + blockLevelArr.length;
app.stage.addChild(currLevelTxt);
currLevelTxt.x = 85;
currLevelTxt.y = 28;//提示：点击屏幕发射弹珠
var tip01Txt = new PIXI.Text("点击屏幕发射小球\n请以最快的速度通关");
app.stage.addChild(tip01Txt);
tip01Txt.x = 140;
tip01Txt.y = 560;
tip01Txt.visible = false;//------------ ui -------------
var startUI = new PIXI.Sprite.fromImage("res/dazk/start/kaishi-img.png");
app.stage.addChild(startUI);var startBtn = new PIXI.Sprite.fromImage("res/dazk/start/kaishi_79.png");
startUI.addChild(startBtn);
startBtn.x = 100;
startBtn.y = 440;
startBtn.interactive = true;
startBtn.on("click", startGame);
startBtn.on("touchstart", startGame);bg.interactive = true;
bg.on("mousemove", move);
bg.on("touchmove", move);function move(event){if(gameType == 0) {return;}var pos = event.data.getLocalPosition(app.stage);gan.x = pos.x;if(gan.x > 420) {gan.x = 420;}if(gan.x < 70) {gan.x = 70;}
}var blockNum = 13;
var blockArr = [];function startGame() {gameType = 1;nextLevel();startUI.visible = false;tip01Txt.visible = true;
}//开始下一关
function nextLevel() {isBullet = false;lastBallNum += ballArr.length;lastBallTxt.text = " x " + lastBallNum;//清除所有球for(var i = ballArr.length - 1; i >= 0; i --) {var ball = ballArr[i];ball.remove();ballArr.splice(i, 1);}//清除所有子弹for(var i = bulletArr.length - 1; i >= 0; i --) {var bullet = bulletArr[i];bullet.remove();bulletArr.splice(i, 1);}var blockLevel = blockLevelArr[level];for(var i = 0; i < blockLevel.length; i++) {if(blockLevel[i] == 0) {continue;}var y = parseInt(i / blockNum) * 33 + 125;var x = i % blockNum * 33 + 50;var block = new Block();block.init(blockLevel[i], x, y);blockArr.push(block);}lastBlockNum.text = blockArr.length;level ++;currLevelTxt.text = level + " / " + blockLevelArr.length;
}var ballArr = [];
function addBallClick() {if(lastBallNum <= 0) {return;}addBall();lastBallNum --;lastBallTxt.text = " x " + lastBallNum;
}function addBall() {var ball = new Ball();ball.init();ballArr.push(ball);
}var itemArr = [];
function addItem(x, y) {var item = new Item();var type = parseInt(Math.random() * 4) + 1;item.init(type, x, y);itemArr.push(item);
}function animate() {if(gameType == 0) {return;}for(var i = ballArr.length - 1; i >= 0; i --) {var ball = ballArr[i];ball.animate();if(ball.img.y > 800) {ball.remove();ballArr.splice(i, 1);if(ballArr.length == 0 && lastBallNum == 0) {over();}}}for(var i = itemArr.length - 1; i >= 0; i --) {var item = itemArr[i];item.animate(i);if(item.img.y > 800) {item.remove();itemArr.splice(i, 1);}}crash();time ++;timeTxt.text = "用时 ： " + (time / 60).toFixed(2) + " s";addBullet();for(var i = bulletArr.length - 1; i >= 0; i --) {var bullet = bulletArr[i];bullet.animate();if(bullet.img.y < 110) {bullet.remove();bulletArr.splice(i, 1);}}if(ballArr.length == 0) {tip01Txt.visible = true;} else {tip01Txt.visible = false;}}
app.ticker.add(animate);//背景点击事件
bg.interactive = true;
bg.on("click", addBallClick);
bg.on("touchstart", addBallClick);var bulletArr = [];
var bulletSubTime = 45;
//发射子弹
function addBullet() {if(isBullet == false) {return;}if(bulletSubTime == 0) {var bullet = new Bullet();bullet.init(gan.x + 30, gan.y - 20);bulletArr.push(bullet);var bullet = new Bullet();bullet.init(gan.x - 30, gan.y - 20);bulletArr.push(bullet);bulletSubTime = 45;}bulletSubTime --;
}function addAllBullet() {for(var i = 0; i < 13; i ++) {var bullet = new Bullet();bullet.init(i * 32 + 50, 700);bulletArr.push(bullet);}}function crash() {//球与方块碰撞for(var i = 0; i < ballArr.length; i ++) {var ball = ballArr[i];for(var j = blockArr.length - 1; j >= 0; j --) {var block = blockArr[j];var isCrash = checkCrash(ball, block);if(isCrash == true) {//添加道具if(Math.random() * 100 > 90) {addItem(block.img.x, block.img.y);}if(block.crash() == true) {block.remove();blockArr.splice(j, 1);lastBlockNum.text = blockArr.length;//更新得分等score += 100;scoreTxt.text = score;}ball.direction(block);//验证是否结束，切换关卡if(isOver() == true) {return;}}}}//子弹与方块碰撞for(var i = 0; i < bulletArr.length; i ++) {var bullet = bulletArr[i];for(var j = blockArr.length - 1; j >= 0; j --) {var block = blockArr[j];var isCrash = checkCrash(bullet, block);if(isCrash == true) {//添加道具if(Math.random() * 100 > 90) {addItem(block.img.x, block.img.y);}if(block.crash() == true) {block.remove();blockArr.splice(j, 1);lastBlockNum.text = blockArr.length;//更新得分等score += 100;scoreTxt.text = score;}bullet.remove();bulletArr.splice(i, 1);//验证是否结束，切换关卡if(isOver() == true) {return;}break;}}}}function isOver() {if(blockArr.length == 0) {//检测是否存在下一关if(level <= blockLevelArr.length - 1) {nextLevel();return true;} else {over();}}return false;
}function over() {gameType = 0;var overUI = new PIXI.Sprite.fromImage("res/dazk/end/jieshu-bg_21.png");app.stage.addChild(overUI);overUI.x = 70;overUI.y = 200;//关卡var currLevelTxt = new PIXI.Text();currLevelTxt.text = level + " / " + blockLevelArr.length;overUI.addChild(currLevelTxt);currLevelTxt.x = 180;currLevelTxt.y = 140;//得分var scoreTxt = new PIXI.Text();scoreTxt.text = score + "";overUI.addChild(scoreTxt);scoreTxt.x = 200;scoreTxt.y = 203;//时间var timeTxt = new PIXI.Text();timeTxt.text = time + " s";overUI.addChild(timeTxt);timeTxt.x = 200;timeTxt.y = 266;//最佳时间var bestTimeTxt = new PIXI.Text();bestTimeTxt.text = "120.00 s";overUI.addChild(bestTimeTxt);bestTimeTxt.x = 190;bestTimeTxt.y = 328;var restartBtn = new PIXI.Sprite.fromImage("res/dazk/end/cxks_95.png");overUI.addChild(restartBtn);restartBtn.x = 140;restartBtn.y = 400;restartBtn.interactive = true;restartBtn.on("click", restart);restartBtn.on("touchstart", restart);}function restart() {window.location.reload();
}function checkCrash(a1, a2) {var img1 = a1.img;var img2 = a2.img;var a = (img1.x - img2.x) * (img1.x - img2.x) + (img1.y - img2.y) * (img1.y - img2.y);if(a < (a1.r + a2.r) * (a1.r + a2.r)) {return true;}return false;
}//道具效果 - 火球
function fireBall() {for(var i = ballArr.length - 1; i >= 0; i --) {var ball = ballArr[i];ball.fire();}
}// ------------ 对象分界线 -------------
//小球
function Ball() {this.img = null;this.r = 10;this.speed = 5;this.angle = Math.random() * 100 + 220;this.speedX = 0;this.speedY = 0;this.isFire = false;this.init = function(type) {var url = "res/dazk/qiu_32.png";this.img = new PIXI.Sprite.fromImage(url);this.img.anchor.x = 0.5;this.img.anchor.y = 0.5;app.stage.addChild(this.img);this.img.x = gan.x;this.img.y = gan.y - 20;this.changeAngle();}this.fire = function() {this.isFire = true;this.img.texture = new PIXI.Texture.fromImage("res/dazk/qiu-2_77.png");}this.animate = function() {this.move();}this.changeAngle = function() {var a = this.angle / 180 * 3.14;this.speedX = Math.cos(a) * this.speed;this.speedY = Math.sin(a) * this.speed;this.speed += 0.01;}this.move = function() {this.img.x += this.speedX;this.img.y += this.speedY;if(this.img.y < 120) {this.angleV();}if(this.img.x > 465) {this.angleH();}if(this.img.x < 30) {this.angleH();}if(this.img.y > 680 && this.img.y < 700 && this.img.x > (gan.x - 55) && this.img.x < (gan.x + 55) && this.speedY > 0) {//计算角度this.angle = 360 - ((gan.x + 50) - this.img.x) * 1.8;if(this.angle > 320) {this.angle = 320;}if(this.angle < 220) {this.angle = 220;}this.changeAngle();}}this.angleV = function() {this.angle -= this.angle * 2;this.changeAngle();}this.angleH = function() {this.angle = 180 - this.angle; this.changeAngle();}this.direction = function(a1) {if(this.isFire == true) {return;}var img1 = a1.img;//处理小球反弹方向if(this.img.y > img1.y && this.img.x < img1.x + a1.r && this.img.x > img1.x - a1.r) {this.angleV();} else if(this.img.x > img1.x && this.img.y < img1.y + a1.r && this.img.y > img1.y - a1.r) {this.angleH();} else if(this.img.x < img1.x && this.img.y < img1.y + a1.r && this.img.y > img1.y - a1.r) {this.angleH();} else if(this.img.y < img1.y && this.img.x < img1.x + a1.r && this.img.x > img1.x - a1.r) {this.angleV();}}this.remove = function() {app.stage.removeChild(this.img);}}//方块
function Block() {this.img = null;this.r = 16;this.hp = 1;this.type = 0;this.init = function(type, x, y) {this.type = type;var url = "res/dazk/zhuankuai-1_06.png";if(type == 1) {url = "res/dazk/zhuankuai-1_06.png";} else if(type == 2) {url = "res/dazk/zhuankuai-2_08.png";} else if(type == 3) {url = "res/dazk/zhuankuai-3_10.png";} else if(type == 4) {url = "res/dazk/zhuankuai-4_12.png";} else if(type == 5) {url = "res/dazk/zhuankuai-5_14.png";} else if(type == 6) {url = "res/dazk/zhuankuai-6_16.png";} else if(type == 7) {url = "res/dazk/zhuankuai-7_18.png";} else if(type == 8) {url = "res/dazk/zhuankuai-8-1_41.png";this.hp = 2;}this.img = new PIXI.Sprite.fromImage(url);this.img.anchor.x = 0.5;this.img.anchor.y = 0.5;app.stage.addChild(this.img);this.img.x = x;this.img.y = y;}this.crash = function() {this.hp --;if(this.type == 8) {this.img.texture = new PIXI.Texture.fromImage("res/dazk/zhuankuai-8-2_43.png");}if(this.hp == 0) {return true;}return false;}this.remove = function() {app.stage.removeChild(this.img);}}function Item() {this.img = null;this.type = 0;this.r = 15;this.init = function(type, x, y) {this.type = type;var url = "res/dazk/daoju-qiu1_32.png";if(type == 1) {url = "res/dazk/daoju-qiu1_32.png";} else if(type == 2) {url = "res/dazk/daoju-qiu2_60.png";} else if(type == 3) {url = "res/dazk/daoju-zidan1_66.png";} else if(type == 4) {url = "res/dazk/daoju-zidan2_69.png";} this.img = new PIXI.Sprite.fromImage(url);this.img.anchor.x = 0.5;this.img.anchor.y = 0.5;this.img.x = x;this.img.y = y;app.stage.addChild(this.img);}this.animate = function(i) {this.move(i);}this.move = function(i) {this.img.y += 2;if(this.img.y > 680 && this.img.y < 700 && this.img.x > (gan.x - 55) && this.img.x < (gan.x + 55)) {this.effect();itemArr.splice(i, 1);this.remove();}}this.effect = function() {if(this.type == 1) {addBall();addBall();addBall();lastBallNum ++;lastBallTxt.text = " x " + lastBallNum;} else if(this.type == 2) {fireBall();} else if(this.type == 3) {isBullet = true;} else if(this.type == 4) {addAllBullet();}}this.remove = function() {app.stage.removeChild(this.img);}
}function Bullet() {this.img = null;this.r = 6;this.init = function(x, y) {var url = "res/dazk/zidan_74.png";this.img = new PIXI.Sprite.fromImage(url);this.img.anchor.x = 0.5;this.img.anchor.y = 0.5;this.img.x = x;this.img.y = y;app.stage.addChild(this.img);}this.animate = function() {this.move();}this.move = function() {this.img.y -= 6;}this.remove = function() {this.img.parent.removeChild(this.img);}}

Html5 打砖块游戏，加入道具和速通模式（含源码）相关推荐

8.图片组件和动画效果--从零起步实现基于Html5的WEB设计器Jquery插件（含源码）...
前面示例我建立了三种形状的组件,圆.矩形.椭圆,本节我将再扩展两种类型:图片和动画,并通过这个过程来论证前面OOP的编程是如何简化扩展工作的: 首先要在工具条里增加这两个组件,以便可以拖动: < ...
7.组件连线(贝塞尔曲线)--从零起步实现基于Html5的WEB设计器Jquery插件（含源码）...
上节讲到如何创建组件,清除设计器视图,以及设计视图的持久化和恢复,本节将重点讲如何实现组件间的连线,前面章节有提到为了方便从持久化文件中恢复,组件和连线是分别存放的:nodes和lines对象,两个组 ...
高通android开源代码下载,高通平台Android源码bootloader分析之sbl1(三)
前两篇博文分析了启动流程.代码流程.cdt,接下来就分析另外几个需要格外关注的部分. ##log系统 sbl1中的log系统也是sbl1部分调试会经常接触得部分高通平台在sbl中做的log系统并不是很 ...
源码通透-mybatis源码分析以及整合spring过程
源码通透-mybatis源码分析以及整合spring过程 mybatis源码分析版本:mybaits3 (3.5.0-SNAPSHOT) mybatis源码下载地址:https://github.co ...
基于51单片机的PWM控制马达电机调速正反转(仿真+源码+全套资料)
资料编号:117 仿真图proteus 7.8 程序编译器:keil 5 编程语言:C语言采用51单片机,用PWM控制电机脉冲频率应控制在25HZ-35HZ之间定时1ms,1个周期30ms,脉冲频 ...
博通Broadcom SDK源码学习与开发2——Bootloader功能和编译过程
声明:原创作品,严禁用于商业目的. 本系列文章将全面剖析以Bcm33xxx芯片开发Cablemodem产品的SDK源码为例,从编译系统到各个功能模块进行分析与探讨. 文章目录 0.写在前篇 0.写在前 ...
博通Broadcom SDK源码学习与开发5——ECOS系统层剖析
声明:原创作品,严禁用于商业目的. 本系列文章将全面剖析以Bcm33xxx芯片开发Cablemodem产品的SDK源码为例,从编译系统到各个功能模块进行分析与探讨. 文章目录 0.写在前篇 1. Op ...
[附源码]计算机毕业设计Python+uniapp基于Android的移动端校友通 zv2j0(程序+源码+LW+远程部署)
[附源码]计算机毕业设计Python+uniapp基于Android的移动端校友通 zv2j0(程序+源码+LW+远程部署) 该项目含有源码.文档.程序.数据库.配套开发软件.软件安装教程项目运行环 ...
基于STM32单片机闭环步进电机驱动调速仿真（仿真+源码+全套资料）
资料编号:081 (1) 基本功能:本任务通过输出脉冲控制步进电机的停止.运动.方向.使用两个按键分别控制步进电机的正转和反转,再次按下这两个按键,步进电机停止, 同时 LCD 显示电机状态信息. ...
【深入设计模式】责任链模式—责任链模式及责任链模式在源码中的应用
文章目录 1. 责任链模式 1.1 责任链模式简介 1.2 责任链模式结构 1.3 责任链模式示例 2. 责任链模式在源码中的应用 2.1 Servlet 中的责任链模式 2.2 Spring 中的责 ...

Html5 打砖块游戏，加入道具和速通模式（含源码）

打砖块游戏

源码下载地址

游戏代码

index.html文件

引入的game.js文件，主要逻辑都在这里

Html5 打砖块游戏，加入道具和速通模式（含源码）相关推荐

最新文章

热门文章