看你有多色游戏源码

最新推荐文章于 2023-11-15 19:49:48 发布

ljf8838

最新推荐文章于 2023-11-15 19:49:48 发布

阅读量3.3k

点赞数

分类专栏： web

本文链接：https://blog.csdn.net/ljf12138/article/details/80981769

版权

web 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

Rect.js

function Rect(n,color){					//function Rect(n,color,RectColor);n小方块横向或纵向个数，color当前默认颜色，RectColor点击颜色
	createjs.Shape.call(this);
	this.setRectType = function (type){
		this._RectType = type;
		switch(type){
			case 1:
				this.setColor(color);
				break;
			case 2:
				this.setColor("#ff0000");
				break;
		}
	}
	this.setColor = function(colorString){
		this.graphics.beginFill(colorString);		//开始绘制
		this.graphics.drawRect(0,0,400/n-5,400/n-5);//左居左为0，上居上为0，右居左为宽400px/n-5(计算列数，-5是为了设置列间距)，下居上为400/n-5（正好为正方形）
		this.graphics.endFill();					//结束绘制
	}
	//设置类型
	this.getRectType = function(){
		return this._RectType;
	}
	this.setRectType(1);
}
//初始化
Rect.prototype = new createjs.Shape();

app.js

var stage = new createjs.Stage("gameView");
createjs.Ticker.setFPS(30);
createjs.Ticker.addEventListener("tick",stage);
var gameView = new createjs.Container();
stage.addChild(gameView);
var n=2;
function addRect(){
	var cl = parseInt(Math.random()*1000000);
	var color="#"+cl;
	var x= parseInt(Math.random()*n);
	var y= parseInt(Math.random()*n);
	
	for(var indexX = 0;indexX<n;indexX ++){
		for (var indexY=0;indexY<n;indexY++){
			var r = new Rect(n,color);//var r = new Rect(n,color,RectColor);
			gameView.addChild(r);
			r.x = indexX;
			r.y = indexY;
			if(r.y == y&&r.x == x){
				r.setRectType(2);
			}
			r.x = indexX*(400/n);
			r.y = indexY*(400/n);
			if(r.getRectType()==2){
				r.addEventListener("click",function(){
					if(n<7){
						++n;
					}
					gameView.removeAllChildren();//移除所有图形
					addRect();//重新创建
				})
			}
		}
	}
}
addRect();

index.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>看你有多色</title>
		<script src="js/easeljs-0.7.1.min.js"></script>
		<script src="js/Rect.js"></script>
	</head>
	<body>
		<canvas id ="gameView" width="400px" height="400px"></canvas>
		
		<script src="js/app.js"></script>
	</body>
</html>

ljf8838

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
看你有多色游戏源码

Rect.jsfunction Rect(n,color){ //function Rect(n,color,RectColor);n小方块横向或纵向个数，color当前默认颜色，RectColor点击颜色 createjs.Shape.call(this); this.setRectType = function (type){ this._RectType = type;...
复制链接

扫一扫