Html5 打砖块游戏，加入道具和速通模式（含源码）
2022/2/10 1:20:16
本文主要是介绍Html5 打砖块游戏，加入道具和速通模式（含源码），对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！
打砖块游戏
制作了个打砖块的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 打砖块游戏，加入道具和速通模式（含源码）的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
- 2024-11-15AntDesign项目实战：新手入门与初级应用教程
- 2024-11-15AntDesign-Form-rules项目实战：新手指南
- 2024-11-14ESLint课程：初学者指南
- 2024-11-14Form.List 动态表单课程：新手入门教程
- 2024-11-14Redux课程：新手入门完全指南
- 2024-11-13MobX 使用入门教程：轻松掌握前端状态管理
- 2024-11-12前端编程资料：新手入门指南与初级教程
- 2024-11-12前端开发资料入门指南
- 2024-11-12前端培训资料：适合新手与初级用户的简单教程
- 2024-11-12前端入门资料：新手必读指南
