看你有多色游戏

只愿长相守 提交于 2020-03-25 20:49:16

3 月,跳不动了?>>>

开发工具:pycharm

游戏介绍这是一款小游戏,虽然名字有点猥琐,但是游戏确实是很纯洁的,纯洁到不能再纯洁了 。 这款游戏的玩法就是找出所有风格中颜色比较淡的,主要是考你的眼力和注意力最开始是最简单的,轻易可以辨认出,越到后面就越难方块越来越多,颜色的对比度也越来越小到最后要非常专注才能看出总之,这游戏就是在规定时间内尽可能的过更多关,对练眼还是有一定好处的,小伙伴快来玩吧

main.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src="js/easeljs.min.js"></script>
        <script src="js/Rect.js"></script>
    </head>
    <body>
        <canvas id ="gameView" width="400px" height="400px"></canvas>
        
        <script src="js/a.js"></script>
    </body>
</html>

app.js

// JavaScript Document

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);//var r = new Rect(n,color,RectColor);
            gameView.addChild(r);
            r.x = indexX;
            r.y = indexY;
            if(r.y == y&&r.x == x){
                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

// JavaScript Document
function Rect(n,color){                    //function Rect(n,color,RectColor);n小方块横向或纵向个数,color当前默认颜色,RectColor点击颜色
    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);//左居左为0,上居上为0,右居左为宽400px/n-5(计算列数,-5是为了设置列间距),下居上为400/n-5(正好为正方形)
        this.graphics.endFill();                    //结束绘制
    }
    //设置类型
    this.getRectType = function(){
        return this._RectType;
    }
    this.setRectType(1);
}
//初始化
Rect.prototype = new createjs.Shape();
 

运行结果:

简单:

容易:

难:

较难:

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!