找回密码
 立即注册

QQ登录

只需一步,快速开始

微信葡京娱乐网址号开发资源

关注:848

所属分类: 微信开发 微信葡京娱乐网址号开发资源

本版块为微信葡京娱乐网址号开发教程与葡京娱乐网址号开发相关技术分享板块,技术提问请到其他对应的问答板块发帖:)

[html5开发博客] 大方块小游戏源码,免费下载

[复制链接]
查看: 4594|回复: 21
最佳答案
2 

66

主题

277

帖子

7687

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
7687
这个HTML5游戏是一款高性能的html5 canvas打方块小游戏,仅使用12KB的javascript葡京赌场网站来完成。它可以连续发射子 弹,敌方方块被打碎后会分裂为多个小方块。整个游戏非常流畅,性能非常好。
36.png

5553.png

使用方法

HTML结构 该HTML5小游戏的使用方法非常简单。在页面中编写一个<canvas>元素,给它一个IDcanvas。并设置它的宽度和高度。
  1. <canvas id="canvas" width="800" height="600"></canvas>
复制葡京赌场网站


调用插件

要调用这个打方块游戏,只需要在页面底部<body>标签之前引入BlockBlaster.js文件即可。
  1. <script src="js/BlockBlaster.js"></script>
复制葡京赌场网站

具体方法

1.定义所有全局变量
  1. var fps = 30;
  2.         var canvas = document.getElementById('canvas');
  3.         var ctx = canvas.getContext("2d");                        
  4.         var bgColor = "rgb(40,40,40)"
  5.         var ready;
  6.         var enemyScore;
  7.         var renderTimer = setInterval(render,1/fps*100);
  8.         var difficultyTimer;
  9.         var spawnTimer;
  10.         var spawntime;
  11.         var gameTime;
  12.         var difficulty;
  13.         var score;
  14.         var highScore=0;
  15.         var gameOver;
  16.         var entities = [];
  17.         var player;
  18.         var fader;
复制葡京赌场网站

2.绘制游戏背景
  1. function drawBG(){
  2.                 ctx.fillStyle = bgColor;
  3.                 ctx.fillRect(0,0,canvas.width,canvas.height);
  4.         }
复制葡京赌场网站


3.游戏开始设置
  1. function drawReadyScreen(){
  2.                 drawBG();
  3.                 //drawStatic(.25);
  4.                 drawScore();
  5.                 fader += .1 * 1/fps;
  6.                 ctx.fillStyle = "rgba(255,255,255," + fader + ")";
  7.                 ctx.font = "72px sans-serif";
  8.                 ctx.fillText("READY?",canvas.width/2 - 140,canvas.height/2);
  9.                 drawScore();
  10.         }
复制葡京赌场网站


4.返回相对于画布的鼠标位置
  1. function getMousePos(canvas, evt) {
  2.                 var rect = canvas.getBoundingClientRect();
  3.                 return new Vector2(evt.clientX - rect.left,
  4.                                                         evt.clientY - rect.top)
  5.         }
复制葡京赌场网站


5.获取鼠标的移动事件
  1. canvas.addEventListener('mousemove', function(evt) {
  2.                         var mousePos = getMousePos(canvas, evt);
  3.                         if (player && !gameOver) player.position.x = mousePos.x;
  4.         }, false);
复制葡京赌场网站


5.获取鼠标的单击事件
  1. function canvasClick(){
  2.                 if (gameOver){ if (fader > .5) reset();return;}
  3.                 if (ready)                {init(); return;}
  4.                 var bullet = new Bullet();
  5.                 bullet.position.set(player.position.x + player.size / 2 - bullet.size/2,player.position.y - player.size/2 - bullet.size /2);
  6.                 bullet.velocity.y = -30;
  7.                 entities.push(bullet);
  8.                 if (score > 0) score -= 1;
  9.         }
复制葡京赌场网站


6.设置每一个小方块的随机颜色值
  1. function setAlpha(color,alpha){
  2.                 if (color.indexOf('a') == -1){
  3.                         return color.replace(")",","+alpha+")").replace("rgb","rgba");
  4.                 }
  5.         }
复制葡京赌场网站


7.最后HTML加载事件
  1. document.addEventListener('DOMContentLoaded', reset());
  2.         
  3.         canvas.addEventListener("click",canvasClick);
复制葡京赌场网站


打方块.zip (11.43 KB, 下载次数: 615)
回复

使用道具 举报

最佳答案
1 

4

主题

239

帖子

8325

积分

S1

积分
8325
发表于 2016-10-24 20:17:36 | 显示全部楼层
激动人心,无法言表!
回复 支持 反对

使用道具 举报

最佳答案
0 

0

主题

219

帖子

2308

积分

专家路上

积分
2308
发表于 2016-10-24 23:16:18 | 显示全部楼层
强烈支持楼主ing……
回复 支持 反对

使用道具 举报

最佳答案
0 

2

主题

7

帖子

150

积分

禁止发言

积分
150
发表于 2016-10-27 18:42:20 | 显示全部楼层
提示: 作者被禁止或删除 内容自动屏蔽
回复

使用道具 举报

最佳答案
0 

0

主题

3

帖子

71

积分

新人求带

积分
71
发表于 2016-10-31 14:11:57 | 显示全部楼层
看来Java的功能真的很强大啊
回复 支持 反对

使用道具 举报

最佳答案
0 

0

主题

175

帖子

1427

积分

专家路上

积分
1427
发表于 2016-11-7 10:30:51 | 显示全部楼层
感恩无私的分享与奉献
回复 支持 反对

使用道具 举报

最佳答案
0 

0

主题

175

帖子

1427

积分

专家路上

积分
1427
发表于 2016-11-7 10:31:02 | 显示全部楼层
回复

使用道具 举报

最佳答案
0 

0

主题

175

帖子

1427

积分

专家路上

积分
1427
发表于 2016-11-7 10:31:09 | 显示全部楼层
回复 支持 反对

使用道具 举报

最佳答案
0 

1

主题

10

帖子

108

积分

新人求带

积分
108
发表于 2016-12-22 18:47:13 | 显示全部楼层
不错,学习了 强烈支持楼主ing……
就差一币,怎么就这么难呢?
回复 支持 反对

使用道具 举报

最佳答案
0 

0

主题

8

帖子

298

积分

新人求带

积分
298
发表于 2017-1-2 22:37:07 | 显示全部楼层
牛逼,学习了
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则



www.mainetimberworks.com—微信开发者的分享交流平台,专注微信开发生态。

天津市滨海新区
中新生态城中成大道生态建设公寓9号楼3层301

微信葡京娱乐网址号

市场合作
[email protected]