游戏简介：点击小圆圈，是蓝色的小圆圈不跑出圆圈外，跑出则结束游戏

准备工作：

　　下载easejs  ：下载地址：http://www.createjs.cc/easeljs    中文网站

效果：

　　

index.html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>围住神经猫游戏</title>

    <script src="js/easeljs.min.js"></script>

    <script src="js/Circle.js"></script>

</head>

<body>

<canvas width="800px" height="800px" id="gameView"></canvas>

<script src="js/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;

gameView.x = 30;

gameView.y = 30;

stage.addChild(gameView);

var circleArr = [[],[],[],[],[],[],[],[],[]];

var currentCat;

var MOVE_NONE=-1,MOVE_LEFT= 0,MOVE_UP_LEFT= 1,MOVE_UP_RIGHT= 2,MOVE_RIGHT= 3,MOVE_DOWN_RIGHT= 4,MOVE_DOWN_LEFT=5;

function getMoveDir(cat){

    var distanceMap=[];

    //left

    var can = true;

    for(var x = cat.indexX;x>=0;x--){

        if(circleArr[x][cat.indexY].getCircleType()==Circle.TYPE_SELECTED){

            can = false;

            distanceMap[MOVE_LEFT] = cat.indexX-x;

            break;

        }

    }

    if(can){

        return MOVE_LEFT;

    }

    //LEFT UP

    can = true;

    var x = cat.indexX,y = cat.indexY;

    while(true){

        if(circleArr[x][y].getCircleType()==Circle.TYPE_SELECTED){

            can = false;

            distanceMap[MOVE_UP_LEFT] = cat.indexY-y;

            break;

        }

        if(y%2==0){

            x--;

        }

        y--;

        if(y<0||x<0){

            break;

        }

    }

    if(can){

        return MOVE_UP_LEFT;

    }

    //right up

    can = true;

    x = cat.indexX,y = cat.indexY;

    while(true){

        if(circleArr[x][y].getCircleType()==Circle.TYPE_SELECTED){

            can = false;

            distanceMap[MOVE_UP_RIGHT] = cat.indexY-y;

            break;

        }

        if(y%2==1){

            x++;

        }

        y--;

        if(y<0||x>8){

            break;

        }

    }

    if(can){

        return MOVE_UP_RIGHT;

    }

    //right

    can = true;

    for(var x = cat.indexX;x<9;x++){

        if(circleArr[x][cat.indexY].getCircleType()==Circle.TYPE_SELECTED){

            can = false;

            distanceMap[MOVE_RIGHT] = x-cat.indexX;

            break;

        }

    }

    if(can){

        return MOVE_RIGHT;

    }

    //right down

    can = true;

    x = cat.indexX,y = cat.indexY;

    while(true){

        if(circleArr[x][y].getCircleType()==Circle.TYPE_SELECTED){

            can = false;

            distanceMap[MOVE_DOWN_RIGHT] = y-cat.indexY;

            break;

        }

        if(y%2 == 1){

            x++;

        }

        y++;

        if(y>8||x>8){

            break;

        }

    }

    if(can){

        return MOVE_DOWN_RIGHT;

    }

    //left down

    can = true;

    x = cat.indexX,y = cat.indexY;

    while(true){

        if(circleArr[x][y].getCircleType()==Circle.TYPE_SELECTED){

            can = false;

            distanceMap[MOVE_DOWN_LEFT] = y-cat.indexY;

            break;

        }

        if(y%2 == 0){

            x--;

        }

        y++;

        if(y>8||x<0){

            break;

        }

    }

    if(can){

        return MOVE_DOWN_LEFT;

    }

    var maxDir = -1,maxValue = -1;

    for(var dir = 0;dir<distanceMap.length;dir++){

        if(distanceMap[dir]>maxValue){

            maxValue = distanceMap[dir];

            maxDir = dir;

        }

    }

    if(maxValue>1){

        return maxDir;

    }else{

        return MOVE_NONE;

    }

}

function circleClicked(event) {

    if(event.target.getCircleType()!=Circle.TYPE_CAT){

        event.target.setCircleType(Circle.TYPE_SELECTED);

    }else{

        return ;

    }

    if(currentCat.indexX == 0 || currentCat.indexX == 8 || currentCat.indexY == 0 || currentCat.indexY == 8){

        alert("游戏结束");

        return;

    }

    var dir = getMoveDir(currentCat);

    switch (dir){

        case MOVE_LEFT:

            currentCat.setCircleType(Circle.TYPE_UNSELECTED);

            currentCat=circleArr[currentCat.indexX-1][currentCat.indexY];

            currentCat.setCircleType(Circle.TYPE_CAT);

            break;

        case MOVE_UP_LEFT:

            currentCat.setCircleType(Circle.TYPE_UNSELECTED);

            currentCat=circleArr[currentCat.indexY%2?currentCat.indexX:currentCat.indexX-1][currentCat.indexY-1];

            currentCat.setCircleType(Circle.TYPE_CAT);

            break;

        case MOVE_UP_RIGHT:

            currentCat.setCircleType(Circle.TYPE_UNSELECTED);

            currentCat=circleArr[currentCat.indexY%2?currentCat.indexX+1:currentCat.indexX][currentCat.indexY-1];

            currentCat.setCircleType(Circle.TYPE_CAT);

            break;

        case MOVE_RIGHT:

            currentCat.setCircleType(Circle.TYPE_UNSELECTED);

            currentCat=circleArr[currentCat.indexX+1][currentCat.indexY];

            currentCat.setCircleType(Circle.TYPE_CAT);

            break;

        case MOVE_DOWN_RIGHT:

            currentCat.setCircleType(Circle.TYPE_UNSELECTED);

            currentCat=circleArr[currentCat.indexY%2?currentCat.indexX+1:currentCat.indexX][currentCat.indexY+1];

            currentCat.setCircleType(Circle.TYPE_CAT);

            break;

        case MOVE_DOWN_LEFT:

            currentCat.setCircleType(Circle.TYPE_UNSELECTED);

            currentCat=circleArr[currentCat.indexY%2?currentCat.indexX:currentCat.indexX-1][currentCat.indexY+1];

            currentCat.setCircleType(Circle.TYPE_CAT);

            break;

        default :

            alert("游戏结束");

    }

}

function addCircles(){

    for(var indexY = 0;indexY<9;indexY++){

        for(var indexX = 0;indexX<9;indexX++){

            var c = new Circle();

            gameView.addChild(c);

            circleArr[indexX][indexY] = c;

            c.indexX = indexX;

            c.indexY = indexY;

            c.x = indexY%2?indexX*55 + 25 : indexX*55;

            c.y = indexY * 55;

            if(indexX == 4 && indexY==4){

                c.setCircleType(Circle.TYPE_CAT);

                currentCat = c;

            }else if(Math.random()<0.1){

                c.setCircleType(Circle.TYPE_SELECTED);

            }

            c.addEventListener("click",circleClicked);

        }

    }

}

addCircles();

Circle.js

/**

 * Created by xxc on 2018/11/24.

 */

//画圆

function Circle(){

    createjs.Shape.call(this);

    this.setCircleType = function (type) {

        this._circleType = type;

        switch (type){

            case Circle.TYPE_UNSELECTED:

                this.setColor("#cccccc");

                break;

            case Circle.TYPE_SELECTED:

                this.setColor("#ff6600");

                break;

            case Circle.TYPE_CAT:

                this.setColor("#0000ff");

                break;

        }

    }

    this.setColor = function (colorString) {

        this.graphics.beginFill(colorString);

        this.graphics.drawCircle(0,0,25);

        this.graphics.endFill();

    }

    this.getCircleType = function () {

        return this._circleType;

    }

    this.setCircleType(1);

}

Circle.prototype = new createjs.Shape();

Circle.TYPE_UNSELECTED = 1;

Circle.TYPE_SELECTED = 2;

Circle.TYPE_CAT = 3;

游戏1：HTML5制作网页游戏围住神经猫--createjs的更多相关文章

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

    效果: index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...

  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. DNS处理模块dnspython

    一.介绍 官网:http://www.dnspython.org/ https://pypi.org/project/dnspython/ dnspython是Python的DNS工具包.它支持几乎所 ...

  2. 使用 XML-RPC 为 C++ 应用程序启用 Web 服务

    http://www.ibm.com/developerworks/cn/webservices/ws-xml-rpc/ 引言 Internet 现在的受欢迎程度越来越高,由于这个原因及其固有的优势, ...

  3. CloudStack 初始化执行命令流分析

                查询路由元素   选择可以使用的路由元素   需要将网络服务提供者的:虚拟路由和安全同时启用   { "createnetworkresponse" : { ...

  4. Luogu 4245 【模板】任意模数NTT

    这个题还有一些其他的做法,以后再补,先记一下三模数$NTT$的方法. 发现这个题不取模最大的答案不会超过$10^5 \times 10^9 \times 10^9 = 10^{23}$,也就是说我们可 ...

  5. BZOJ 2038 小Z的袜子(hose) (莫队算法)

    题意:中文题. 析:很著名的莫队算法,先把这个求概率的式子表达出来,应该是分子:C(x1, 2) + C(x2, 2) + C(x3, 2) + ... + C(xn, 2)  分母:C(n, 2), ...

  6. Java对称加密算法

    对称加密算法概念 加密密钥和解密密钥相同,大部分算法加密揭秘过程互逆. 特点:算法公开.(相比非对称加密)计算量小.加密速度快.效率高. 弱点:双方都使用同样的密钥,安全性得不到保证. 常用对称加密算 ...

  7. 策略和计费控制(PCC)系统研究

    策略和计费控制(PCC)系统研究 研究内容 [TOC "float:left"] 策略与计费控制(PCC)框架1 [架构图](achitecture.png "Archi ...

  8. poj2480——Longge's problem（欧拉函数）

    Longge's problem Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 9190   Accepted: 3073 ...

  9. ubuntun16.0 登陆密码忘记

    1. 开机,如下图所示(没有装虚拟机,手机拍的图片凑合这看把): 2. 此时会有一个选项:Advanced Options for Ubuntu, 选中直接回车 ,如下图: 3. 看到里面有很多选项, ...

  10. [Mac][转] ports命令

    [Mac][转] ports命令 安装路径:/opt/local/lib/ 常用命令 port -d selfupdate #升级macport, 如同:cd /usr/ports && ...