您的位置：首页 > Web前端 > HTML5

Html5开发小游戏看你有多色

2014-08-09 21:43 627 查看

极客学院

看你有多色HTML游戏开发视频播放网址:点击打开链接

以下代码为看视频后敲得。可供参考。

1.index.html

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

2.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);
gameView.addChild(r);
r.x=indexX;
r.y=indexY
if(r.x==x&& r.y==y){
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();

3.Rect.js
/**
* Created by Administrator on 2014/8/9.
*/
function Rect(n,color) {
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);
this.graphics.endFill();
}
this.getRectType= function () {
return this._RectType;
}
this.setRectType(1);
}
Rect.prototype = new createjs.Shape();

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： html5 游戏开发极客 createjs

相关文章推荐

新的分享

章节导航