效果：

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();

游戏2：HTML5制作网页游戏看看你有多色--createjs的更多相关文章

  1. 游戏1：HTML5制作网页游戏围住神经猫--createjs

    游戏简介:点击小圆圈,是蓝色的小圆圈不跑出圆圈外,跑出则结束游戏 准备工作: 下载easejs  :下载地址:http://www.createjs.cc/easeljs    中文网站 效果: in ...

  2. [Mugeda HTML5技术教程之14]案例分析：制作网页游戏

    本文档要分析的案例是一个爱消除的网页小游戏,从中可以体会一些Mugeda API的用法和使用Mugeda动画制作网页游戏的方法. (一)游戏规则: 1.开始游戏时,手机出现在最上面一行的任意一格: 2 ...

  3. HTML5制作网页（2）

     <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title> ...

  4. 推荐21款最佳 HTML5 网页游戏

    尽管 HTML5 的完全实现还有很长的路要走,但 HTML5 正在改变 Web,未来 HTML5 将把 Web 带入一个更加成熟和开放的应用平台.现在,越来越多的人尝试用 HTML5 来制作网页游戏等 ...

  5. 40个容易上瘾的HTML5网页游戏,总有一款适合你

    我记得姐姐家的孩子在刚刚才学会走路,说话还不能完整的时候就已经能自己用小手点出小游戏的网站来一个人自娱自乐.我一直在想这一代跟着计算机一起茁壮成长的孩子会不会也和美国那一代人一样,出现9岁的黑客和计算 ...

  6. 基于HTML5坦克大战游戏简化版

    之前我们有分享过不少经典的HTML5游戏,有些还是很有意思的,比如HTML5版切水果游戏和HTML5中国象棋游戏.今天要分享的是一款简化版的HTML5坦克大战游戏,方向键控制坦克的行进方向,空格键发射 ...

  7. 基于html5实现的愤怒的小鸟网页游戏

    之前给大家分享一款基于html5 canvas和js实现的水果忍者网页版,今天给大家分享一款基于html5实现的愤怒的小鸟网页游戏.这款游戏适用浏览器:360.FireFox.Chrome.Safar ...

  8. 网页游戏开发秘笈 PDF扫描版

    精选10种常见的游戏类型,透过典型实例,深入剖析游戏引擎及工具的选用技巧,详细讲解每款游戏的制作过程,为快速掌握网页游戏开发提供系统而实用的指南. 网页游戏开发秘笈 目录: 译者序  前 言  导 言 ...

  9. 经典 HTML5 & Javascript 俄罗斯方块游戏

    Blockrain.js 是一个使用 HTML5 & JavaScript 开发的经典俄罗斯方块游戏.只需要复制和粘贴一段代码就可以玩起来了.最重要的是,它是响应式的,无论你的显示屏多么宽都能 ...

随机推荐

  1. php实现二分查找法

    二分查找法需要数组是一个有序的数组 假设我们的数组是一个递增的数组,首先我们需要找到数组的中间位置. 一.要知道中间位置就需要知道起始位置和结束位置,然后取出中间位置的值来和我们的值做对比. 二.如果 ...

  2. 2015年2月编程语言排行榜：JavaScript排名达到历史最高

    JavaScript在赢得2014年最后一个月的TIOBE编程语言奖后,并且还在不断走强.在二月份JavaScript就超过了PHP,并 且达到它有史以来最高的位置,排行到TOP 6.另一方面,Obj ...

  3. Greeplum 系列（二） 安装部署

    Greeplum 系列(二) 安装部署 本章将介绍如何快速安装部署 Greenplum,以及 Greenplum 的一些常用命令及工具.本章不会涉及硬件选型.操作系统参数讲解.机器性能测试等高级内容, ...

  4. JAVA中简单的MD5加密类（MD5Utils）

    MD5加密分析:   JDK API:   获取对象的API:   加密的API:   package cn.utils; import java.security.MessageDigest; im ...

  5. zrender源码分析3--初始化Painter绘图模块

    接上次分析到初始化ZRender的源码,这次关注绘图模块Painter的初始化 入口1:new Painter(dom, this.storage); // zrender.js /** * ZRen ...

  6. iBeacon的第一篇（基于Swift实现）

    低功耗蓝牙技术现在几乎是只能手机的标配.随着这一技术的发展,苹果在2013年WWDC大会上,苹果推出iBeacon技术.该技术允许开发人员开发能够使用iBeacon硬件传感器的iOS应用程序,来为相应 ...

  7. 通过面试题学习零散知识：Java面试题整理

     一.如何看待面试题 对于喜欢学习的开发者来说,我们抛开工作和生活的时间,剩余的时间并不多,如果都用于学习的话,也不可能学的下所有感兴趣的技术点,精力也跟不上,我是深感如是.而面试题一般都是零碎的知识 ...

  8. (转)DataTable与结构不同实体类之间的转换

    原文地址:http://www.cnblogs.com/kinger906/p/3428855.html 在实际开发过程中,或者是第三方公司提供的数据表结构,与我们系统中的实体类字段不对应,遇到这样我 ...

  9. recv函数的用法详解

    recv函数 int recv( SOCKET s,     char FAR *buf,      int len,     int flags     ); 不论是客户还是服务器应用程序都用rec ...

  10. 【Linux】程序、进程和线程的区别

    程序.进程和线程的区别 程序是一组指令及参数的集合,指令按照既定的逻辑控制计算机运行.进程则是运行着的程序,是操作系统执行的基本单位.线程则是为了节省资源而可以在同一个进程中共享资源的一个执行单位. ...