2D游戏开发课程第6次作业——CreateJs游戏案例

Wesley13
• 阅读 615

一、围住神经猫游戏案例

游戏介绍：

点击圆圈即可将圆圈点亮，用橘色圆圈将蓝色圆圈全部围住游戏结束。

运行结果：

2D游戏开发课程第6次作业——CreateJs游戏案例

代码：

html代码—cat.html

 <!DOCTYPE html>
 <html>
     <head>
         <meta charset="UTF-8">
         <title></title>
         <script src="easeljs.min.js"></script>
         <script src="Circle.js"></script>
     </head>
     <body>
         <canvas id="gameView" width="800px" height="800px"></canvas>
         <script src="app.js" type="text/javascript" charset="utf-8"></script>
     </body>
 </html>

html代码—cicrle.html

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;

js代码—app.js

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;
//6个方向的参数
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] = can.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;
    var x = cat.indexX , y = cat.indexY;
    while(true){
        if(circleArr[x][y].getCircleType() == Circle.TYPE_SELECTED){
            can = false;
            distanceMap[MOVE_UP_RIGHT] = can.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;
    }
    //ritht 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.index;
            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(3);
                currentCat = c;
            }else if(Math.random() <0.1){
                c.setCircleType(Circle.TYPE_SELECTED);
            }
            //添加事件
            c.addEventListener("click",circleClicked);
        }
    }
}
addCircles();

二、看你有多色游戏

游戏介绍：

点击图片中不同颜色的色块，随着关卡进行色块越多，且难度会增大

运行结果：

2D游戏开发课程第6次作业——CreateJs游戏案例 2D游戏开发课程第6次作业——CreateJs游戏案例 2D游戏开发课程第6次作业——CreateJs游戏案例

代码：

html代码

<!DOCTYPE html>
 <html lang="en">
 <head>
 <meta name="viewport" content="text/html; charset=utf-8" />
 <title>color</title>
 <script src="easeljs.min.js"></script>
         <script src="Rect.js"></script>
     </head>
<style>
    *{
        margin: 0px;
        padding: 0px;
    }

    #gameView{
        margin: 5px;
    }

</style>
     <body>
         <div class="main">
         <canvas id ="gameView"  width="400px" height="400px"></canvas>
         </div>
         <script src="appcolor.js"></script>
     </body>
 </html>

js代码—appcolor.js

var stage= new createjs.Stage("gameView");
createjs.Ticker.setFPS(30);
createjs.Ticker.addEventListener("tick",stage);
var gameView = new createjs.Container();
stage.addChild(gameView);
//n  列数 最少等于2
var n = 2;
function addRect(){
    //随机生成一个颜色
    var cl = parseInt(Math.random() * 1000000);
    var color = "#"+cl;
    //根据n 生成不同的颜色  n越大生成的颜色越接近
    var lhh = cl+(10-n)*500;
    var RectColor = "#"+lhh;
    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,RectColor);
            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()

js代码—Rect.js

function Rect(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(RectColor);
                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();
circledown软件设计软件设计
点赞
收藏
评论区
推荐文章
blmius blmius
•
3年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时，报错：原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等，这样可以更容易地在不同的环境中使用MySQL。全局s
4246
0
0
helloworld_34035044 helloworld_34035044
•
2年前
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时，如何在新增行里自动增加id呢？能新增整数排序id吗？目前可以在新增行里自动增加id，但只能用uuid函数增加UUID编码，不能新增整数排序id。uuid函数说明：获取一个UUID，可以在填报表中用来创建数据ID语法：uuid()或uuid(sep)参数说明：sep布尔值，生成的uuid中是否包含分隔符''，缺省为
1209
0
0
待兔 待兔
•
5个月前
手写Java HashMap源码
HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程22
1137
0
0
Jacquelyn38 Jacquelyn38
•
3年前
2020年前端实用代码段，为你的工作保驾护航
有空的时候，自己总结了几个代码段，在开发中也经常使用，谢谢。1、使用解构获取json数据let jsonData  id: 1,status: "OK",data: 'a', 'b';let  id, status, data: number   jsonData;console.log(id, status, number )
2446
0
0
Stella981 Stella981
•
3年前
SpringBoot整合Redis乱码原因及解决方案
问题描述：springboot使用springdataredis存储数据时乱码rediskey/value出现\\xAC\\xED\\x00\\x05t\\x00\\x05问题分析：查看RedisTemplate类!(https://oscimg.oschina.net/oscnet/0a85565fa
1004
0
0
Easter79 Easter79
•
3年前
SpringBoot整合Redis乱码原因及解决方案
问题描述：springboot使用springdataredis存储数据时乱码rediskey/value出现\\xAC\\xED\\x00\\x05t\\x00\\x05问题分析：查看RedisTemplate类!(https://oscimg.oschina.net/oscnet/0a85565fa
928
0
0
Wesley13 Wesley13
•
3年前
2D小游戏开发学习笔记（5）
一、围住神经猫游戏游戏玩法：玩法很简单，蓝色圆圈代表神经猫，通过点击周围圆圈把猫困住，就算游戏成功游戏效果!(https://oscimg.oschina.net/oscnet/up968a35abafe07c092eacca8126719e14a50.png)逻辑梳理：1、
674
0
0
Stella981 Stella981
•
3年前
CreateJS函数库简单效果案例
开发工具：VsCode案例一：围住神经猫小游戏游戏介绍：鼠标点击围住猫，不让它从旁边溜走。index.html<!DOCTYPEhtml<html<head<metacharset"UTF8"<title
510
0
0
Wesley13 Wesley13
•
3年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
1586
0
0
Python进阶者 Python进阶者
•
11个月前
Excel中这日期老是出来00：00：00，怎么用Pandas把这个去除
大家好，我是皮皮。一、前言前几天在Python白银交流群【上海新年人】问了一个Pandas数据筛选的问题。问题如下：这日期老是出来00：00：00，怎么把这个去除。二、实现过程后来【论草莓如何成为冻干莓】给了一个思路和代码如下：pd.toexcel之前把这
559
0
0
Wesley13
Wesley13
Lv1
最大的安心是自律温柔和爱自己。
文章
1.2w
粉丝
22
获赞
1.7k
热门文章
JavPlayer：AI破坏马赛克，大量马赛克破坏版影片流出
2020年最新可用的磁力搜索引擎&种子搜索网站，持续整理分享
8个在线接收手机短信验证码的免费网络服务整理
IDM 激活破解工具
java.net.ConnectException：Connection timed out：connect 出现连接超时的问题？