标签：style http color io os ar java for 文件
主要基于 -------easeljs-0.7.1.min.js----- 去制作这个游戏
思路：主要思路是以行为单位 绑定可点击行 选中则讲 移动最外层容器继续绑定可点击行的下一行 否则结束游戏
HTML页面布局
<script src="js/easeljs-0.7.1.min.js"></script> <script src="easeljs/drawZfx.js"></script> <body> <div class="abs" id="time">0</div> <section class="section-box"> <canvas id="canvasId" width="320" height="440">不支持canvas元素</canvas> <a href=" " class="remove">重新开始</a> </section> </body>
CSS
*｛margin:0;padding:0｝
body{
font-family: "微软雅黑";
}
.section-box{
width: 320px;
height: 480px;
margin: 0 auto;
text-align: center;
}
.abs{
position: absolute;
width: 100%;
text-align: center;
font-size: 2rem;
font-weight: bold;
color: #f00;
}
.remove{
display: inline-block;
width: 100px;
height: 26px;
text-align: center;
line-height: 26px;
background: #f00;
color: #fff;
}
drawZfx.js文件------ 这个文件主要来创建矩形方块 白色和黑色---
/**********************绘制黑白矩形**************************************/
function drawZfx(w,h){
createjs.Shape.call(this);
var typeValue = 1;
this.setType = function(type){
typeValue = type;
switch (type){
case 1:
this.getDraw1();
break;
case 2:
this.getDraw2();
break;
}
}
this.getDraw1 = function(){
this.graphics.s("#000").beginFill("#fff").drawRect(0,0,w/4,h/4).endFill();
}
this.getDraw2 = function(){
this.graphics.s("#000").beginFill("#000").drawRect(0,0,w/4,h/4).endFill();
}
this.getType = function(){
return typeValue;
}
this.setType(typeValue);
}
drawZfx.prototype = new createjs.Shape();
核心javascript
var stage = new createjs.Stage("canvasId"); //获取canvas
createjs.Ticker.setFPS(30); //设置帧数频率
createjs.Ticker.addEventListener("tick",stage); //事件
var drawView = new createjs.Container(); //创建最外层容器
stage.addChild(drawView); //容器添加到canvas中
var timeFn; //计时器
var text = 0; //时间初始化值0
/*****初始化布局*******/
function init(w,h,size){ //初始化界面 （宽，高，行容器层数）
var view = [];
var current = 1; //能点击的位置默认为倒数第一行
for(var n = size;n>=0;n--){
view[n] = new createjs.Container(); //定义容器为一个行容器
view[n].y = (3-n)*h/4; //给行容器定位
var black = parseInt(Math.random()*4); //随机黑色块
for(var l = 0;l <4;l++){
var zfx = new drawZfx(w,h); //创建色块（默认为白色色块）
zfx.x = l*w/4; //给色块定位
if(black == l){
zfx.setType(2); //填充为黑色色块
}
view[n].addChild(zfx); //将色块放入一个行容器中
}
if(n == current){ //判断可点击行
addCurrent(current,view,h);
}
drawView.addChild(view[n]); //将行容器放人最外层容器
}
}
/*****一个过度方法 由这个事件过度到点击事件******/
function addCurrent(current,view,h){
for(var i = 0; i < 4; i++){
clickFn(i,current,view,h);
}
}
/****绑定点击事件****/
function clickFn(i,current,view,h){
view[current].getChildAt(i).addEventListener("click",function(){
/****************** 值1：点中了白色块 游戏结束 ******************************/
if(view[current].getChildAt(i).getType() == 1){
alert("游戏结束,您的成绩是："+text.toFixed(1)+"秒点击了"+(current-1)+"次黑块");
clearInterval(timeFn);
/****************** 值2：点中了黑色块 继续游戏******************************/
}else if(view[current].getChildAt(i).getType() == 2){
/**********(current == 1)是启动始化计*****************/
if(current == 1){
text = 0;
timeFn = setInterval(function(){
text += 0.1;
document.getElementById("time").innerHTML = text.toFixed(1);
},100);
}
drawView.y +=h/4; //最外层容器向下移动
current++; //设置可绑定点击的行
addCurrent(current,view,h); //回调过度事件
}
});
}
init(320,440,1000); //初始化启动游戏
游戏效果如下
标签：style http color io os ar java for 文件
原文地址：http://my.oschina.net/menkeyDyvh/blog/323019
