html5 制作颜色判断游戏,html5 canvas颜色爆炸射击类小游戏

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

分类：游戏

> 益智

难易：初级

查看演示

下载资源：

8

次 下载资源

下载积分：

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容器里，代码如下：

颜色爆炸射击类小游戏

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

页面的底部，需要写好所有的事件响应，代码比较多，这里贴出部分代码： 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

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);

},