HTML小游戏—打灰机
2016-12-06 17:43
399 查看
这里为大家带了一款小游戏~~打灰机========
话不多说，上代码：
HTML部分：
default.css里面的内容：
css里面没啥重要的东西，主要就是定个位之类的~~~
下面是核心代码了！！！JS
BlockBlaster.js内容：
哈哈，这就是打灰机小游戏，也可以叫打豆豆吧=-=，这游戏很魔性哦！！
话不多说，上代码：
HTML部分：
<meta charset="UTF-8">
<title>打灰机</title>
<link rel="stylesheet" type="text/css" href="css/default.css">
<style type="text/css">
#canvas{margin: 0 auto;}
</style>
</head>
<body>
<div class="htmleaf-container">
<header class="htmleaf-header">
<h1>打灰机~~~~~~~~~~</h1>
</header>
<canvas id="canvas" width="800" height="600"></canvas>
</div>
<script src="js/BlockBlaster.js"></script>default.css里面的内容：
body{
background: #f9f7f6;
color: #404d5b;
font-weight: 500;
font-size: 1.05em;
font-family: "Segoe UI", "Lucida Grande", Helvetica, Arial, "Microsoft YaHei", FreeSans, Arimo, "Droid Sans", "wenquanyi micro hei", "Hiragino Sans GB", "Hiragino Sans GB W3", "FontAwesome", sans-serif;
}
.htmleaf-container{
margin: 0 auto;
text-align: center;
overflow: hidden;
}css里面没啥重要的东西，主要就是定个位之类的~~~
下面是核心代码了！！！JS
BlockBlaster.js内容：
var fps = 30;
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext("2d");
var bgColor = "rgb(40,40,40)"
var ready;
var enemyScore;
var renderTimer = setInterval(render,1/fps*100);
var difficultyTimer;
var spawnTimer;
var spawntime;
var gameTime;
var difficulty;
var score;
var highScore=0;
var gameOver;
var entities = [];
var player;
var fader;
function reset(){
if (score > highScore) highScore = score;
ready = true;
enemyScore = 0;
gameTime = 0;
difficulty = 1;
score = 0;
spawntime = 1500;
gameOver = false;
fader = 0;
entities = [];
player = null;
clearTimers()
}
//清除所有的定时器
function clearTimers(){
clearInterval(difficultyTimer);
clearInterval(spawnTimer);
}
//初始化所有定时器
function initializeTimers(){
difficultyTimer = setInterval(increaseDifficulty,2000);
spawnTimer = setInterval(spawnEnemy,spawntime);
}
//初始化/开始游戏
function init(){
ready = false;
clearTimers();
initializeTimers();
//Spawn player
player = new Player();
player.position.set(canvas.width/2,canvas.height-player.size);
player.render();
entities.push(player);
}
//更新的实体
4000
function updateEntities(){
entities.forEach(function(e){
if (e.position.y > canvas.height + 20){
if (e.name == "Enemy"){
enemyScore += 1;
}
removeEntity(e);
}
e.update(1/fps);
})
}
//绘制背景
function drawBG(){
ctx.fillStyle = bgColor;
ctx.fillRect(0,0,canvas.width,canvas.height);
}
//绘制成绩显示器
function drawScore(){
ctx.fillStyle = "#CCFF99";
ctx.font = "24px sans-serif";
ctx.fillText("成绩: " + score,10,24);
ctx.font = "16px sans-serif";
ctx.fillText("最高成绩: " + highScore,10,48);
var enemyScoreString = "";
for (var i = 0; i < enemyScore; i++){
enemyScoreString += "X";
}
ctx.font = "24px sans-serif";
ctx.fillStyle = "#FF6666";
ctx.fillText(enemyScoreString,canvas.width - 75,24);
ctx.font = "16px sans-serif";
ctx.fillText("难度: " + difficulty,canvas.width/2 - 50,24);
}
//绘制一些静态
function drawStatic(alpha){
var s = 15 ;
for (var x = 0; x < canvas.width; x+=s){
for (var y = 0; y < canvas.width; y+=s){
var n = Math.floor(Math.random() * 60);
ctx.fillStyle = "rgba(" + n + "," + n + "," + n + "," + (Math.random() * alpha) + ")";
ctx.fillRect(x,y,s,s);
}
}
}
//“准备好了吗？”屏幕
function drawReadyScreen(){
drawBG();
//drawStatic(.25);
drawScore();
fader += .1 * 1/fps;
ctx.fillStyle = "rgba(255,255,255," + fader + ")";
ctx.font = "72px sans-serif";
ctx.fillText("准备好了?",canvas.width/2 - 140,canvas.height/2);
drawScore();
}
//所有实体的绘制
function drawEntities(){
entities.forEach(function(e){e.render();});
}
//游戏结束界面
function drawGameOver(){
ctx.fillStyle = "rgba(0,0,0,"+fader +")";
ctx.fillRect(0,0,canvas.width,canvas.height);
drawStatic(fader/2);
drawScore();
fader += .1 * 1/fps
ctx.fillStyle = "rgba(255,255,255," + fader + ")";
ctx.font = "72px sans-serif";
ctx.fillText("游戏结束",canvas.width/2 - 220,canvas.height/2);
}
//Render 事件
function render(){
drawBG();
drawEntities();
drawScore();
if (gameOver){drawGameOver(); return;}
else if (ready){drawReadyScreen(); return;}
updateEntities();
gameTime += 1/fps;
if (enemyScore >= 3) {
clearTimers();
gameOver = true;
fader = 0;
}
}
//返回相对于画布的鼠标位置
function getMousePos(canvas, evt) {
var rect = canvas.getBoundingClientRect();
return new Vector2(evt.clientX - rect.left,
evt.clientY - rect.top)
}
//鼠标点击
function canvasClick(){
if (gameOver){ if (fader > .5) reset();return;}
if (ready) {init(); return;}
var bullet = new Bullet();
bullet.position.set(player.position.x + player.size / 2 - bullet.size/2,player.position.y - player.size/2 - bullet.size /2);
bullet.velocity.y = -30;
entities.push(bullet);
if (score > 0) score -= 1;
}
//增加难度
function increaseDifficulty(){
difficulty += 1;
if (spawntime > 20) spawntime -= 20;
clearInterval(spawnTimer);
spawnTimer = setInterval(spawnEnemy,spawntime);
}
//改变方块颜色
function setAlpha(color,alpha){
if (color.indexOf('a') == -1){
return color.replace(")",","+alpha+")").replace("rgb","rgba");
}
}
//方块的消灭
function death(entity){
if (entity.name == "Enemy") {
var particleCount = Math.floor((Math.random() * 6) + 3);
for (var i = 0; i < particleCount; i++){
var p = new Particle();
p.color = entity.color;
p.size = Math.floor((Math.random() * entity.size/2) + 5);
p.position.set(entity.position.x+entity.size/2,entity.position.y+entity.size/2);
entities.push(p);
}
score += 25;
}
removeEntity(entity);
}
//消除方块
function removeEntity(entity){
var idx = entities.indexOf(entity);
if (idx > -1) entities.splice(idx,1);
}
//检查两个实体是否重叠
function overlaps(entityA,entityB){
var sa = entityA.size;
var x1a = entityA.position.x;
var x2a = entityA.position.x + sa;
var y1a = entityA.position.y;
var y2a = entityA.position.y + sa;
var sb = entityB.size;
var x1b = entityB.position.x;
var x2b = entityB.position.x + sb;
var y1b = entityB.position.y;
var y2b = entityB.position.y + sb;
return (x1a < x2b && x2a > x1b && y1a < y2b && y2a > y1b);
}
//滋生新的方块
function spawnEnemy(){
var e = new Enemy();
var px = Math.floor((Math.random() * canvas.width));
var py = -e.size;
var v = difficulty;
var a = Math.floor((Math.random() * (v + 15)) + v);
var f = Math.floor((Math.random() * (v + 15)) + v);
e.position.set(px,py);
var r = Math.random();
if (r > .5){
straightDownMotion(e,v);
}
else if (r > .3){
sineMotion(e,a,f,v);
}
else if (r > .1){
triangularMotion(e,a,f,v);
}
else{
sawtoothMotion(e,a,f,v);
}
entities.push(e);
}
//直向下运动
function straightDownMotion(entity,speed){
entity.update = function(deltatime){
this.velocity.x = 0;
this.velocity.y = speed;
Entity.prototype.update.call(this,deltatime);
}
}
//定义正弦波运动
function sineMotion(entity,amplitude,freq,speed){
entity.update = function(deltatime){
this.velocity.x = amplitude * Math.cos(this.position.y/freq);
this.velocity.y = speed;
Entity.prototype.update.call(this,deltatime);
}
}
//定义锯波运动
function sawtoothMotion(entity, amplitude,freq,speed){
var modifier = 1;
if (Math.random() > .5) modifier = -1;
entity.update = function(deltatime){
this.velocity.x = modifier * ((-2*amplitude)/Math.PI)*Math.atan(1/Math.tan(this.position.y / freq));
this.velocity.y = speed;
Entity.prototype.update.call(this,deltatime);
}
}
//定义三角运动（）
function triangularMotion(entity, amplitude,freq,speed){
entity.update = function(deltatime){
this.velocity.x = ((2*amplitude)/Math.PI)*Math.asin(Math.sin(this.position.y / freq));
this.velocity.y = speed;
Entity.prototype.update.call(this,deltatime);
}
}
//定义颜色
function randomColor(min,max){
var r = Math.floor((Math.random() * max) + min);
var g = Math.floor((Math.random() * max) + min);
var b = Math.floor((Math.random() * max) + min);
var col = "rgb(" + r + "," + g + "," + b + ")";
return col;
}
//向量
var Vector2 = function(x1,y1){
this.x = x1;
this.y = y1;
}
Vector2.prototype.set = function(a,b){
this.x = a;
this.y = b;
}
//实体（基类）
var Entity = function(){
this.name = "Entity";
this.size = 25;
this.position = new Vector2(0,0);
this.velocity = new Vector2(0,0);
this.color = "#FFFFFF";
}
Entity.prototype.sayName = function(){
console.log(this.name);
}
Entity.prototype.update = function(deltaTime){
this.position.x += this.velocity.x * deltaTime;
this.position.y += this.velocity.y * deltaTime;
//Keep in bounds
if (this.position.x - this.size < 0) {this.position.x = this.size;}
if (this.position.x + this.size > canvas.width) {this.position.x = canvas.width - this.size;}
}
Entity.prototype.render = function(){
ctx.fillStyle = this.color;
ctx.fillRect(this.position.x,this.position.y,this.size,this.size);
}
//敌人的单位
var Enemy = function(){
Entity.call(this);
this.name = "Enemy";
this.size = Math.floor((Math.random() * 50)+20);
this.color = randomColor(90,150);
}
Enemy.prototype = Object.create(Entity.prototype);
Enemy.prototype.constructor = Entity;
//玩家单位
var Player = function(){
Entity.call(this);
this.name = "Player";
this.color = "#4747FF"
}
Player.prototype = Object.create(Entity.prototype);
Player.prototype.constructor = Entity;
//方块的实体
var Particle = function(){
Entity.call(this);
this.name = "Particle";
this.size = 10;
this.time = 0;
this.maxTime = Math.floor((Math.random() * 10) + 3);
this.velocity.x = Math.floor((Math.random() * 20) - 10);
this.velocity.y = Math.floor((Math.random() * 20) - 10);
}
Particle.prototype = Object.create(Entity.prototype);
Particle.prototype.constructor = Entity;
Particle.prototype.update = function(deltatime){
Entity.prototype.update.call(this,deltatime);
this.time += deltatime;
if (this.time >= this.maxTime) removeEntity(this);
}
//子弹的实体
var Bullet = function(){
Entity.call(this);
this.name = "Bullet";
this.size = 10;
this.time = 0;
this.color = "rgba(200,200,200,1)";
this.particlesDelay = .5;
}
Bullet.prototype = Object.create(Entity.prototype);
Bullet.prototype.constructor = Entity;
Bullet.prototype.update = function(deltatime){
Entity.prototype.update.call(this,deltatime);
//检查碰撞
var me = this;
entities.forEach(function(e){
if (e !== me && e.name != "Particle"){
if (overlaps(me,e)){
death(e);
removeEntity(me);
}
}
})
//从游戏中删除如果外部界限
if (this.position.y < 0) removeEntity(this);
//创建粒子
this.time += deltatime;
if (this.time >= this.particlesDelay){
this.time = 0;
var p = new Particle();
p.size = Math.floor((Math.random() * 5)+2);
p.color = setAlpha("rgb(125,125,125)",Math.random());
//p.color = setAlpha(randomColor(100,255),Math.random()); //彩色颗粒
p.velocity.x /=2;
p.position.x = this.position.x + this.size /2 - p.size/2;
p.position.y = this.position.y - p.size/2;
entities.push(p);
}
}
//HTML加载事件
document.addEventListener('DOMContentLoaded', reset());
canvas.addEventListener("click",canvasClick);
//鼠标移动事件
canvas.addEventListener('mousemove', function(evt) {
var mousePos = getMousePos(canvas, evt);
if (player && !gameOver) player.position.x = mousePos.x;
}, false);哈哈，这就是打灰机小游戏，也可以叫打豆豆吧=-=，这游戏很魔性哦！！
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 我是运营，我没有假期
- 在Windows 8.1的IE 11中屏蔽双击放大功能
- HTML5调用摄像头实例
- 每个 Linux 游戏玩家都绝不想要的恼人体验
- Powershell 创建炫丽美观的Html报表
- 设计模式---状态模式在web前端中的应用
- Apple官网研究之使用Justify布局导航
- 关于前端的思考与感悟
- 又被事件冒泡坑了一把，这次要彻底弄懂浏览器的事件流
- 移动端点击事件全攻略，这里的坑你知多少？
- $q 实例分析 Angular 中的 Promise
- Angular directive 实例详解
- 关于浮动与清除浮动，你应该知道的
- 编写你的第一行 HTML 代码，来帮助蝙蝠侠写一封情书
- 在 Fedora 上使用 Steam play 和 Proton 来玩 Windows 游戏
- div 2 列 50%宽度布局
- div 2 列 50%宽度布局
- Steam 让我们在 Linux 上玩 Windows 的游戏更加容易