俄罗斯方块之心（cocos2d-js+html5）

最新推荐文章于 2019-08-23 10:29:58 发布

By漫步

最新推荐文章于 2019-08-23 10:29:58 发布

阅读量760

点赞数

分类专栏：游戏文章标签：心俄罗斯方块 cocos2dx

本文链接：https://blog.csdn.net/qq_37373203/article/details/82791092

版权

本文介绍了使用cocos2d-js框架制作的HTML5版俄罗斯方块，展示了运行效果，并提供了项目的结构分析。重点解析了index.js文件中长方形模型的类，源码已上传至GitHub。

摘要由CSDN通过智能技术生成

对于俄罗斯方块相信小伙伴们都不陌生，下面来介绍一下最近练手的一款小作品。

先看一下运行效果图：

就截取了两张图，有兴趣的朋友可以去微博上查阅视频版。
微博地址：
http://video.weibo.com/show?fid=1034:4267117143380625

好了下面介绍一下代码。

首先介绍一下项目结构：

相信做过web开发的都不陌生这个结构。

index.html 此次要运行动画的主网页
index.js 动画运行的代码
cocos2d-js-v3.13.js 代码API文件

index.html 文件：
主要作用是启动画布，并且调用两个js文件。

<!DOCTYPE html>
<html>
<head>
    <title>心</title>
	<script type="text/javascript" src="cocos2d-js-v3.13.js" charset="UTF-8"></script>
</head>
<body bgcolor="#00000">
    <canvas id="gameCanvas" width="1500" height="720"></canvas>
	<script type="text/javascript" src="index.js" charset="UTF-8"></script>
</body>
</html>

cocos2d-js-v3.13.js文件是官网上下载的便不再多说，主要说明一下index.js文件。

index.js文件：

var line = 26;   	//每个方格的边长
var gap = 4;		//每个方格之间的距离
var xin = [];		//
var srcX = 0;
var srcY = 650;
var xinDx = 1500 - (1500/2)/2 - 199;
var xinDy = (720/2)/2 - 100;
					//  1   2   3   4   5   6   7   8   9   10  11  12  13  
var xinMode = new Array(0 , 2 , 0 , 0 , 0 , 0 , 0 , 2 , 1 , 2 , 1 , 0 , 0 , 
						// 14  15  16  17  18  19  20  21  22  23  24  25  26
							0 , 2 , 2 , 2 , 2 , 0 , 1 , 0 , 2 , 0 , 2 , 1 , 2 );
var xinType = new Array(1 , 1 , 3 , 3 , 1 , 3 , 2 , 0 , 2 , 1 , 3 , 0 , 0 , 
							3 , 0 , 2 , 1 , 1 , 1 , 1 , 0 , 0 , 0 , 0 , 1 , 1 );
							
var xinP = new Array(cc.p(xinDx					, xinDy + 4*line + 3*gap),//1
					cc.p(xinDx + line*2 + gap*2	, xinDy + 4*line + 3*gap),//2
					cc.p(xinDx - line - gap		, xinDy + 3*line + 2*gap),//3
					cc.p(xinDx - 3*line - 3*gap	, xinDy + 5*line + 4*gap),//4
					cc.p(xinDx - 2*line - 2*gap	, xinDy + 5*line + 4*gap),//5
					cc.p(xinDx					, xinDy + 6*line + 5*gap),//6
					cc.p(xinDx + 3*line + 3*gap	, xinDy + 5*line + 4*gap),//7
					cc.p(xinDx + 3*line + 3*gap	, xinDy + 6*line + 5*gap),//8
					cc.p(xinDx + 6*line + 6*gap	, xinDy + 7*line + 6*gap),//9
					cc.p(xinDx + line + gap		, xinDy + 6*line + 5*gap),//10
					cc.p(xinDx - 5*line - 5*gap	, xinDy + 6*line + 5*gap),//11
					cc.p(xinDx - 4*line - 4*gap	, xinDy + 7*line + 6*gap),//12
					cc.p(xinDx + 4*line + 4*gap	, xinDy + 9*line + 8*gap),//13			
					cc.p(xinDx - 4*line - 4*gap	, xinDy + 9*line + 8*gap),//14
					cc.p(xinDx - 3*line - 3*gap	, xinDy + 8*line + 7*gap),//15
					cc.p(xinDx					, xinDy + 9*line + 8*gap),//16
					cc.p(xinDx + 3*line + 3*gap	, xinDy + 9*line + 8*gap),//17
					cc.p(xinDx + line + gap		, xinDy + 9*line + 8*gap),//18
					cc.p(xinDx - 6*line - 6*gap	, xinDy + 10*line + 9*gap),//19
					cc.p(xinDx + 5*line + 5*gap	, xinDy + 11*line + 10*gap),//20
					cc.p(xinDx					, xinDy + 10*line + 9*gap),//21
					cc.p(xinDx - 3*line - 3*gap	, xinDy + 10*line + 9*gap),//22
					cc.p(xinDx + line*2 + gap*2	, xinDy + 11*line + 10*gap),//23
					cc.p(xinDx - 3*line - 3*gap	, xinDy + 12*line + 11*gap),//24
					cc.p(xinDx + 4*line + 4*gap	, xinDy + 12*line + 11*gap),//25
					cc.p(xinDx - 4*line - 4*gap	, xinDy + 12*line + 11*gap),//26
					);;

var step = 0;

function sleep(d){
   
  for(var t = Date.now();Date.now() - t <= d;);
}

//设置颜色列表
var colList = new Array(cc.color(138,43,226,255),
					cc.color(255,246,143,255),
					cc.color(0 ,255,255,255),
					cc.color(255 ,106 ,106,255),
					cc.color(255 ,0 ,255,255),
					cc.color(0 ,0 ,238,255),
					cc.color(238 ,130 ,98,255),
					cc.color(255 ,20 ,147,255),
					cc.color(0 ,238 ,118,255),
					cc.color(255 ,131 ,250,255),
					cc.color(155 ,48 ,255,255),
					cc.color(0 ,229 ,238,255),
					cc.color(232 ,232 ,232,255),
					cc.color(144, 238 ,144,255)
					);

//心的颜色
var redCpl = new Array(cc.color(255,0,0,255),
						cc.color(255,128,0,255 ),
						cc.color(255,255,0,255),
						cc.color(0,255,0,255),
						cc.color(0,255,255,255),
						cc.color(0,0,255,255),
						cc.color(128,0,255,255),);
//心的颜色的索引
var redIndex = 0;
//获取随机数
function GetRandomNum()
{
       
	var Rand = Math.random();   
	return Math.round(Rand * 14);   
}  

//方块类
var squ = function(x,y){
   
	this.a = cc.p(x,y);
	this.b = cc.p(x+line,y);
	this.c = cc.p(x,y-line);
	this.d = cc.

最低0.47元/天解锁文章

By漫步

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
俄罗斯方块之心（cocos2d-js+html5）

对于俄罗斯方块相信小伙伴们都不陌生，下面来介绍一下最近练手的一款小作品。先看一下运行效果图：就截取了两张图，有兴趣的朋友可以去微博上查阅视频版。微博地址：http://video.weibo.com/show?fid=1034:4267117143380625好了下面介绍一下代码。首先介绍一下项目结构：相信做过web开发的都不陌生这个结构。index.html ...
复制链接

扫一扫