html5 canvas颜色爆炸射击类小游戏

一款html5 canvas颜色爆炸射击类小游戏特效代码，通过键盘来控制方向的移动，通过空格键发射子弹和游戏结束时重新开始，整个效果还是不错的，想拿高分也是不容易的哦。

分类：游戏 > 益智难易：初级

查看演示下载资源下载积分： 20 积分

关注公众号，免费赠送安装视频教程、环境和学习视频，后面会不断更新。

页面的head部分，需要设置好各元素的样式，代码如下：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  height: 100%;
}

body {
  min-height: 100%;
  max-width: 100%;
  background: #111;
  font-family: 'Microsoft YaHei','Lantinghei SC','Open Sans',Arial,'Hiragino Sans GB','STHeiti','WenQuanYi Micro Hei','SimSun',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;
}

页面的body部分，将canvas和其实操作说明放在一个div容器里，代码如下：

<div class="container">
	<div class="game-wrap">
		<canvas width="960px" height="540" id="game"></canvas>
		<article class="content">
			<h1 class="title"><span>颜</span><span>色</span><span>爆</span><span>炸</span><span>射</span><span></span><span>击</span><span>类</span><span>小</span><span>游</span><span>戏</span></h1>

			<p>使用 小键盘"左" 和 "右" 箭头或 "a" 和 "d" 键移动, "空格键" 发射子弹。</p>
		</article>
	</div>
</div>

页面的底部，需要写好所有的事件响应，代码比较多，这里贴出部分代码：

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.maxLives = 3;
		this.life = 0;
		this.binding();
		this.player = new Player();
		this.score = 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){
				Game.init();
			} else {
				Game.unPause();
				Game.loop();
				Game.invincibleMode(1000);
			}
		}
	},

	keyPressed: function(e){
		if(e.keyCode === 32){
			if(!Game.player.invincible  && !Game.oneShot){
				Game.player.shoot();
				Game.oneShot = true;
			}
			if(Game.isGameOver){
				Game.init();
			}
      e.preventDefault();
		}
	},

	buttonUp: function(e){
		if(e.keyCode === 32){
			Game.shooting = false;
			Game.oneShot = false;
        e.preventDefault();
		}
		if(e.keyCode === 37 || e.keyCode === 65){
			Game.player.movingLeft = false;
		}
		if(e.keyCode === 39 || e.keyCode === 68){
			Game.player.movingRight = false;
		}
	},

	buttonDown: function(e){
		if(e.keyCode === 32){
			Game.shooting = true;
		}
		if(e.keyCode === 37 || e.keyCode === 65){
			Game.player.movingLeft = true;
		}
		if(e.keyCode === 39 || e.keyCode === 68){
			Game.player.movingRight = true;
		}
	},

	random: function(min, max){
    return Math.floor(Math.random() * (max - min) + min);
  },

  invincibleMode: function(s){
  	this.player.invincible = true;
  	setTimeout(function(){
  		Game.player.invincible = false;
  	}, s);
  },