基本信息
源码名称:打砖块射击游戏代码
源码大小:3.32KB
文件格式:.rar
开发语言:CSS
更新时间:2020-08-20
友情提示:(无需注册或充值,赞助后即可获取资源下载链接)
嘿,亲!知识可是无价之宝呢,但咱这精心整理的资料也耗费了不少心血呀。小小地破费一下,绝对物超所值哦!如有下载和支付问题,请联系我们QQ(微信同号):813200300
本次赞助数额为: 2 元×
微信扫码支付:2 元
×
请留下您的邮箱,我们将在2小时内将文件发到您的邮箱
源码介绍
打砖块游戏
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>打砖块射击</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html, body {
height: 100%;
}
body {
min-height: 100%;
max-width: 100%;
background: #111;
font-family: Lato, sans-serif;
}
.container {
min-height: 100%;
max-width: 960px;
margin: 0 auto;
}
.game-wrap {
position: relative;
padding: 20px 0 0;
}
canvas {
position: relative;
max-width: 100%;
border: 2px solid black;
max-height: 100%;
display: block;
margin: 0 auto;
}
.content {
color: #ccc;
text-align: center;
padding: 0 20px;
}
p {
margin: 10px 0;
font-size: 18px;
line-height: 1.5em;
}
code {
background: #222;
background: -webkit-linear-gradient(#222, #000);
background: linear-gradient(#222, #000);
line-height: 1.3em;
display: inline-block;
border-radius: 3px;
font-family: monospace;
padding: 1px 5px;
margin: 0 2px;
}
a {
color: skyblue;
text-decoration: none;
-webkit-transition: .2s;
transition: .2s;
}
a:hover {
color: #b3e0f2;
text-decoration: underline;
}
.title {
font-size: 40px;
font-weight: 900;
margin: 20px 0;
}
.title span:nth-child(1) {
color: #bf8040;
}
.title span:nth-child(2) {
color: #bfbf40;
}
.title span:nth-child(3) {
color: #80bf40;
}
.title span:nth-child(4) {
color: #40bf40;
}
.title span:nth-child(5) {
color: #40bf80;
}
.title span:nth-child(6) {
color: #40bfbf;
}
.title span:nth-child(7) {
color: #4080bf;
}
.title span:nth-child(8) {
color: #4040bf;
}
.title span:nth-child(9) {
color: #8040bf;
}
.title span:nth-child(10) {
color: #bf40bf;
}
.title span:nth-child(11) {
color: #bf4080;
}
</style>
</head>
<body>
<div class="container">
<div class="game-wrap">
<canvas width="960px" height="540" id="game"></canvas>
<article class="content">
<h1 class="title"><span>C</span><span>o</span><span>l</span><span>o</span><span>r</span><span> </span><span>B</span><span>l</span><span>a</span><span>s</span><span>t</span></h1>
<p>使用 小键盘"左" 和 "右" 箭头或 "a" 和 "d" 键移动, "空格键" 发射子弹。</p>
</article>
</div>
</div><script>
// Color Blast!
// License MIT
// ? 2014 Nate Wiley
(function(window){
var Game = {
init: function(){
this.c = document.getElementById("game");
this.c.width = this.c.width;
this.c.height = this.c.height;
this.ctx = this.c.getContext("2d");
this.color = "rgba(20,20,20,.7)";
this.bullets = [];
this.enemyBullets = [];
this.enemies = [];
this.particles = [];
this.bulletIndex = 0;
this.enemyBulletIndex = 0;
this.enemyIndex = 0;
this.particleIndex = 0;
this.maxParticles = 10;
this.maxEnemies = 6;
this.enemiesAlive = 0;
this.currentFrame = 0;
this.max剩余复活次数 = 3;
this.life = 0;
this.binding();
this.player = new Player();
this.本局游戏分值 = 0;
this.paused = false;
this.shooting = false;
this.oneShot = false;
this.isGameOver = false;
this.requestAnimationFrame = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame;
for(var i = 0; i<this.maxEnemies; i ){
new Enemy();
this.enemiesAlive ;
}
this.invincibleMode(2000);
this.loop();
},
binding: function(){
window.addEventListener("keydown", this.buttonDown);
window.addEventListener("keyup", this.buttonUp);
window.addEventListener("keypress", this.keyPressed);
this.c.addEventListener("click", this.clicked);
},
clicked: function(){
if(!Game.paused) {
Game.pause();
} else {
if(Game.isGameOver){
打砖块游戏
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>打砖块射击</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html, body {
height: 100%;
}
body {
min-height: 100%;
max-width: 100%;
background: #111;
font-family: Lato, sans-serif;
}
.container {
min-height: 100%;
max-width: 960px;
margin: 0 auto;
}
.game-wrap {
position: relative;
padding: 20px 0 0;
}
canvas {
position: relative;
max-width: 100%;
border: 2px solid black;
max-height: 100%;
display: block;
margin: 0 auto;
}
.content {
color: #ccc;
text-align: center;
padding: 0 20px;
}
p {
margin: 10px 0;
font-size: 18px;
line-height: 1.5em;
}
code {
background: #222;
background: -webkit-linear-gradient(#222, #000);
background: linear-gradient(#222, #000);
line-height: 1.3em;
display: inline-block;
border-radius: 3px;
font-family: monospace;
padding: 1px 5px;
margin: 0 2px;
}
a {
color: skyblue;
text-decoration: none;
-webkit-transition: .2s;
transition: .2s;
}
a:hover {
color: #b3e0f2;
text-decoration: underline;
}
.title {
font-size: 40px;
font-weight: 900;
margin: 20px 0;
}
.title span:nth-child(1) {
color: #bf8040;
}
.title span:nth-child(2) {
color: #bfbf40;
}
.title span:nth-child(3) {
color: #80bf40;
}
.title span:nth-child(4) {
color: #40bf40;
}
.title span:nth-child(5) {
color: #40bf80;
}
.title span:nth-child(6) {
color: #40bfbf;
}
.title span:nth-child(7) {
color: #4080bf;
}
.title span:nth-child(8) {
color: #4040bf;
}
.title span:nth-child(9) {
color: #8040bf;
}
.title span:nth-child(10) {
color: #bf40bf;
}
.title span:nth-child(11) {
color: #bf4080;
}
</style>
</head>
<body>
<div class="container">
<div class="game-wrap">
<canvas width="960px" height="540" id="game"></canvas>
<article class="content">
<h1 class="title"><span>C</span><span>o</span><span>l</span><span>o</span><span>r</span><span> </span><span>B</span><span>l</span><span>a</span><span>s</span><span>t</span></h1>
<p>使用 小键盘"左" 和 "右" 箭头或 "a" 和 "d" 键移动, "空格键" 发射子弹。</p>
</article>
</div>
</div><script>
// Color Blast!
// License MIT
// ? 2014 Nate Wiley
(function(window){
var Game = {
init: function(){
this.c = document.getElementById("game");
this.c.width = this.c.width;
this.c.height = this.c.height;
this.ctx = this.c.getContext("2d");
this.color = "rgba(20,20,20,.7)";
this.bullets = [];
this.enemyBullets = [];
this.enemies = [];
this.particles = [];
this.bulletIndex = 0;
this.enemyBulletIndex = 0;
this.enemyIndex = 0;
this.particleIndex = 0;
this.maxParticles = 10;
this.maxEnemies = 6;
this.enemiesAlive = 0;
this.currentFrame = 0;
this.max剩余复活次数 = 3;
this.life = 0;
this.binding();
this.player = new Player();
this.本局游戏分值 = 0;
this.paused = false;
this.shooting = false;
this.oneShot = false;
this.isGameOver = false;
this.requestAnimationFrame = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame;
for(var i = 0; i<this.maxEnemies; i ){
new Enemy();
this.enemiesAlive ;
}
this.invincibleMode(2000);
this.loop();
},
binding: function(){
window.addEventListener("keydown", this.buttonDown);
window.addEventListener("keyup", this.buttonUp);
window.addEventListener("keypress", this.keyPressed);
this.c.addEventListener("click", this.clicked);
},
clicked: function(){
if(!Game.paused) {
Game.pause();
} else {
if(Game.isGameOver){