HTML5游戏-看你有多色

需引入easeljs-0.7.1.min.js

html:

<div align="center"><canvas width="400px" height="400px" id="gameView"></canvas><div>倒计时:<a id="aid2">60</a>s 分数:<a id="aid">0</a></div>
</div><script src="js.js"></script>

Rect.js,在html中需要引入:

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("white");this.setColor("#"+parseInt(Math.random()*1000000));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();

主要的js代码(js.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 aid = document.getElementById("aid");
var score = 0;var n = 2;//初始2行
function addRect() {var color = "#" + parseInt(Math.random() * 1000000);//随机颜色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 < 9) {++n;}gameView.removeAllChildren();score++;aid.innerHTML = score + "";addRect();});} else if (r.getRectType() == 1) {r.addEventListener("click", function () {alert("你有" + score + "分色");window.location.reload();});}}}
}
addRect();window.onload = function () {time();//不放这第一次undefineds
};
var t = 60;
function time() {var aid2 = document.getElementById("aid2");aid2.innerHTML = t + "";t--;setTimeout(time,1000);if(t == -1 ){alert("你有" + score + "分色");window.location.reload();}
}

HTML5游戏-看你有多色相关推荐

html5黄游戏,HTML5游戏-看你有多色
需引入easeljs-0.7.1.min.js html: 倒计时:60s 分数:0Rect.js,在html中需要引入: function Rect(n,color){//个数 createjs.S ...
html5 游戏前景怎么样,独家 HTML5游戏目前究竟怎么样？看完这篇文章，你或许会清晰很多...
原标题:独家 HTML5游戏目前究竟怎么样?看完这篇文章,你或许会清晰很多文/DataEye CEO 汪祥斌从5月份白鹭的10亿估值,到最近悟空间.山水地.火缘步甲的千万级以上的融资,我们可以感受 ...
风靡朋友圈的HTML5游戏去哪了
<围住神经猫>等基于HTML5技术的小游戏在微信朋友圈里都引起了不小的轰动,然而很多开发者都尝试复制其奇迹,并希望通过接入广告获取收入. 因此,前端时间不少用户的朋友圈不断被H5游戏刷屏, ...
HTML5游戏开发案例教程
学习本套HTML5游戏案例开发教程需要您有一定的HTML5.JS基础,如果您还没有学过HTML5和JS请您查看本店相关教程.如果您已经具备一定的开发基础,这些教程将有助于您快速入门HTML5游戏开发. ...
“神经猫”等HTML5游戏未来将何去何从？
距"围住神经猫"蹿红已经过去了将近三周的时间,微信朋友圈上的HTML5游戏依旧热度不减:在神经猫之后,<打企鹅><看你有多色>等小游戏陆陆续续在朋友圈上火热 ...
HTML5游戏从轻度转向中重度-9秒学院
两年前HTML5热传到中国,行业随即掀起了Web App和Native App的生死论战,然而HTML5游戏真正走红其实是在2014年<围住神经猫>.<看你有多色>等刷爆朋友圈 ...
【CSON原创】HTML5游戏框架cnGameJS开发实录（外部输入模块篇）
返回目录 1.为什么我们需要外部输入模块? 在游戏中我们常常用到类似这样的操作:鼠标点击某位置,玩家对象移动到该位置,或者按鼠标方向键,玩家向不同方向移动,等等.这些操作无一不用与外部输入设备打交道. ...
html5游戏生态,白鹭引擎发起共建HTML5游戏生态访谈!
5月22日,由白鹭时代主办的第二届HTML5游戏生态大会将在北京国际会议中心启幕.大会召开前夕,白鹭将联合游戏葡萄.新浪游戏.游久网.魔方网.游戏陀螺等多家媒体共同推出"共建H5游戏生态&q ...
Html5游戏框架createJS组件--EaselJS
CreateJS库是一款HTML5游戏开发的引擎,是一套可以构建丰富交互体验的HTML5游戏的开源工具包,旨在降低HTML5项目的开发难度和成本,让开发者以熟悉的方式打造更具现代感的网络交互体验. 掌 ...

HTML5游戏-看你有多色

HTML5游戏-看你有多色相关推荐

最新文章

热门文章