使用createJS製做遊戲

時間  2020-04-07
標籤 使用 createjs 製做 遊戲 欄目 遊戲 简体版
原文   原文鏈接

使用createJS製做網頁小遊戲

1、目錄

一、createJS介紹

二、案例設計

2、createJS介紹

一、什麼是createJS？

CreateJS爲CreateJS庫，是一款爲HTML5遊戲開發的引擎。CreateJS 是一套能夠構建豐富交互體驗的 HTML5 遊戲的開源工具包，旨在下降 HTML5 項目的開發難度和成本，讓開發者以熟悉的方式打造更具現代感的網絡交互體驗。css

二、createJS都有什麼？

easeljs ：主要用來sprites，動畫，向量和位圖的繪製， 建立html5 canvas 上的交互體驗html

tweenjs：主要用來作動畫效果html5

soundjs：音頻播放引擎canvas

preloadjs:網站資源預加載網絡

3、案例設計

一、圍住神經貓

1.1實驗結果圖片

1.2實驗代碼
1.2.1 html關鍵部分代碼

鏈接createJSapp

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

鏈接circle和appjs函數dom

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

建立canvas畫布函數

<canvas id="gameView" width="800px" height="800px" ></canvas>
1.2.2 circle.js部分代碼
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.2.3 app.js關鍵部分代碼

1.2.3.1定義的貓：currentCat 1.2.3.2定義的方向參數：工具

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;

1.2.3.3貓可移動方向函數動畫

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;
    var 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
    var 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;
    var 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;
    var 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;
    }
}

1.2.3.4跳躍判斷以及貓的移動

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("遊戲結束");
    }
}

1.2.3.5用戶點擊函數

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

1.2.3.6遊戲開始調用函數

addCircles();

二、看你有多色

1.1實驗結果圖片

1.2實驗代碼
1.2.1 html關鍵部分代碼

1.2.1.1鏈接createJS

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

1.2.1.2鏈接app.js

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

1.2.1.3鏈接Rect.js

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

1.2.1.4鏈接css樣式表

<link rel="stylesheet" href="style.css" type="text/css">

1.2.1.5建立canvas畫布

<div class="main">
    <canvas id="gameView"></canvas>
</div>
1.2.2 app.js關鍵部分代碼

1.2.2.1主函數入口（遊戲開始）

function startGame() {
    getCanvasSize();
    n=2;
    addRect();
}

1.2.2.2添加方格函數

function addRect() {
    var c1=parseInt(Math.random()*1000000);
    var color=("#"+c1);
    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 c2=parseInt((c1-10*(n-indexY)>0)?(c1-10*(n-indexY)):(c1+10*indexY));
            var Rectcolor=("#"+c2);
            var c3=parseInt((c2-10*(n-indexY)>0)?(c2-10*(n-indexY)):(c2+10*indexY));
            var Rectcolor=("#"+c3);
            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*(getSize()/n);
            r.y=indexY*(getSize()/n);
            if (r.getRectType()==2){
                r.addEventListener("click",clickRect)
            }
        }
    }
}

1.2.2.3特殊狀況從新繪製方格

function clickRect() {
    if (n<7){
        ++n;
    }
    gameView.removeAllChildren();
    addRect();
}

1.2.2.4獲取canvas畫布大小函數

function getCanvasSize() {
    var gView=document.getElementById("gameView");
    gView.height=window.innerHeight-4;
    gView.width=window.innerWidth-4;
}
function getSize() {
    if (window.innerHeight>=window.innerWidth){
        return window.innerWidth;
    } else {
        return window.innerHeight;
    }
}

1.2.2.5函數入口

startGame();
1.2.3 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,getSize()/n-2,getSize()/n-2);
        this.graphics.endFill();
    }
    this.getRectType=function () {
        return this._RectType;
    }
    this.setRectType(1);
}
Rect.prototype=new createjs.Shape();
1.2.4 css代碼
*{
    margin: 0px;
    padding: 0px;
}

main{
    width: 80%;
    margin: 0px 2px;
}
#gameView{
    width: 100%;
    margin: 20px auto;
}
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程