游戏2：HTML5制作网页游戏看看你有多色--createjs

效果：

index.html

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

app.js

/*** Created by xxc on 2018/11/24.*/
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();

Rect.js

/*** Created by xxc on 2018/11/24.*/
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();

转载于:https://www.cnblogs.com/alex-xxc/p/10013349.html

游戏2：HTML5制作网页游戏看看你有多色--createjs相关推荐

游戏1：HTML5制作网页游戏围住神经猫--createjs
游戏简介:点击小圆圈,是蓝色的小圆圈不跑出圆圈外,跑出则结束游戏准备工作: 下载easejs :下载地址:http://www.createjs.cc/easeljs 中文网站效果: in ...
[Mugeda HTML5技术教程之14]案例分析：制作网页游戏
本文档要分析的案例是一个爱消除的网页小游戏,从中可以体会一些Mugeda API的用法和使用Mugeda动画制作网页游戏的方法. (一)游戏规则: 1.开始游戏时,手机出现在最上面一行的任意一格: 2 ...
HTML5跑酷网页游戏源码
介绍: HTML5跑酷网页游戏,按空格键上下左右控制跳跃网盘下载地址: http://kekewangLuo.net/tzGmMF9q6Fg0 图片:
html5倒车游戏,html5制作转盘游戏
html5制作转盘游戏 h1{ width: 100%; height: 3rem; line-height: 3rem; font-size: 1.8rem; color:#c60; text-al ...
使用html5的游戏,使用HTML5制作游戏
使用HTML5制作简单游戏记录一下自己制作游戏的基本模式和思路. 游戏架构我的游戏制作架构图: l 浏览器接入层: 提供浏览器检测能力(主要看是否支持HTML5),提供多种客户端接入的兼容处理. ...
html5 在线 ppt 制作软件,使用HTML5制作网页.ppt
使用HTML5制作网页技术文档不做精美排版 http://ylmf.eu正在策划中根据你们询问的人,HTML 5不是迈向创造更语义化的网络的下一个重要步伐,就是用一系列不完整的标签和标记大杂烩让 ...
使用HTML5制作物理游戏
原文:http://www.enjoyhtml5.com/2011/11/html5-game-with-box2djs/ 简介 HTML5技术为现今Web应用程序在浏览器中提供了非常广阔的发挥空间, ...
C#使用 WebBrowser制作网页游戏辅助工具关键技术分析
使用WebBrowser控件,实现起来确实很方便,但灵活性差,比不上直接组包发包.对三国风云这款网页游戏来说,WebBrowser用的好的话理论上可以实现想要的功能(我只实现了整点自动"举 ...
H5网页游戏(js)，游戏小程序，网页游戏引擎
采用了Three.js作为3D引擎库,结合tween.js作为配套的动画库,以及基于webpack的脚手架nowa链接作为技术支持.市面上比较成熟的3D库有Three.js和Babylon.js. B ...
flash游戏移植html5,分享将游戏从Flash移植到Unity的5个体会
作者:Alex Nichiporchik <No Time to Explain>最初是一款网页Flash游戏,之后转向Kickstarter平台筹资,成为Steam上的一款商业游戏.这款 ...

游戏2：HTML5制作网页游戏看看你有多色--createjs

游戏2：HTML5制作网页游戏看看你有多色--createjs相关推荐

最新文章

热门文章