準備編 JavaScriptでカードゲームスピードをつくる(1)

前回はC#でカードゲームのスピードを作ったので、今回はJavaScriptで作成することにします。

Contents

1 HTML部分
2 Cardクラス
3 MovingCardクラス

HTML部分

最初にHTML部分を示します。

カードが表示される部分は決まっているのでdivタグをつかってそこに画像を挿入することでカードを表示することにします。またプルダウンメニューを作成してコンピュータの動作速度を変更できるようにします。

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>カードゲーム スピード - JavaScript版</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
    #body {
        background-color: #000000;
    }
    #table {
        width: 700px;
        height:600px;
        margin: 0 auto 0;
        background-color: #008000;
    }
    #button-start {
        display: none;
        position: absolute;
        margin-top: 450px;
        margin-left: 70px;
    }

    #game-info {
        margin-top: 380px;
        margin-left: 70px;
        position: absolute;
        color: #fff;
    }
    #cards-info {
        margin-top: 410px;
        margin-left: 70px;
        position: absolute;
        color: #fff;
        background-color: #000;
    }

    #game-level {
        position: absolute;
        margin-top: 450px;
        margin-left: 200px;
        color: white;
        font-size: 14px;
    }
    .card {
        height: 100px;
        width: 70px;
        position: absolute;
    }
</style>
</head>

<body id = "body">
    <div id = "table">
        <div class= "card" id = "cardsDeckPlayer2"></div>
        <div class= "card" id = "cardsPutIntoPlay2-0"></div>
        <div class= "card" id = "cardsPutIntoPlay2-1"></div>
        <div class= "card" id = "cardsPutIntoPlay2-2"></div>
        <div class= "card" id = "cardsPutIntoPlay2-3"></div>

        <div class= "card" id = "cardsLedgerPlayer2"></div>
        <div class= "card" id = "cardsLedgerPlayer1"></div>

        <div class= "card" id = "cardsDeckPlayer1"></div>
        <div class= "card" id = "cardsPutIntoPlay1-0"></div>
        <div class= "card" id = "cardsPutIntoPlay1-1"></div>
        <div class= "card" id = "cardsPutIntoPlay1-2"></div>
        <div class= "card" id = "cardsPutIntoPlay1-3"></div>

        <div id = "game-info"></div>
        <div id = "cards-info"></div>
        <button id = "button-start" onclick="GameStart()">ゲームスタート</button>
        <div id = "game-level">レベル (間隔：秒)
            <select id="speed" name="speed">
                <option value="250">0.25</option>
                <option value="500">0.5</option>
                <option value="750">0.75</option>
                <option value="1000">1.0</option>
                <option value="1250">1.25</option>
                <option value="1500">1.5</option>
                <option value="1750">1.75</option>
                <option value="2000" selected>2.0</option>
                <option value="2250">2.25</option>
                <option value="2500">2.5</option>
                <option value="2750">2.75</option>
                <option value="3000">3.0</option>
                <option value="3250">3.25</option>
                <option value="3500">3.5</option>
                <option value="3750">3.75</option>
                <option value="4000">4.0</option>
                <option value="4250">4.25</option>
                <option value="4500">4.5</option>
                <option value="4750">4.75</option>
                <option value="5000">5.0</option>
                <option value="5250">5.25</option>
                <option value="5500">5.5</option>
                <option value="5750">5.75</option>
                <option value="6000">6.0</option>
            </select>
        </div>
    </div>

    <script src="./card.js"></script>
    <script src="./game.js"></script>

</body>
</html>

100

101

102

103

104

105

106

107

108

<!DOCTYPE html>

<head>

<title>カードゲームスピード - JavaScript版</title>

<style>

#body {

background-color: #000000;

}

#table {

width: 700px;

height:600px;

margin: 0 auto 0;

background-color: #008000;

}

#button-start {

display: none;

position: absolute;

margin-top: 450px;

margin-left: 70px;

}

#game-info {

margin-top: 380px;

margin-left: 70px;

position: absolute;

color: #fff;

}

#cards-info {

margin-top: 410px;

margin-left: 70px;

position: absolute;

color: #fff;

background-color: #000;

}

#game-level {

position: absolute;

margin-top: 450px;

margin-left: 200px;

color: white;

font-size: 14px;

}

.card {

height: 100px;

width: 70px;

position: absolute;

}

</style>

</head>

<button id = "button-start" onclick="GameStart()">ゲームスタート</button>

<div id = "game-level">レベル (間隔：秒)

</select>

</div>

</body>

</html>

Cardクラス

次にCardクラスを作成します。コンストラクタの引数にスート、番号、幅、高さを渡せばカードをつくるための画像からイメージタグ（＜img src=”data:image/png;base64,XXX(省略)XXX” width=”70″ height=”100″＞）を取得できるようになります。

カードをつくるための画像はここからダウンロードします。

トランプ　カードイラスト – No: 934665／無料イラストなら「イラストAC」

card.js

class Suit{
    static Club = 0;
    static Diamond = 1;
    static Heart = 2;
    static Spade = 3;
    static Joker = 4;
}

class Card {
    constructor(suit, number, width, height){
        this.Number = number;
        this.Suit = suit;
        this.ImageTagString = '';
        this.BackImageTagString = '';
        this.Width = width;
        this.Height = height;

        const img = new Image();
        img.src = "cardimage.png";

        let card = this;

        img.onload = function(){
            const canvas = document.createElement('canvas');
            let width = 360;
            let height = 500;
            canvas.width = width;
            canvas.height = height;
            let con = canvas.getContext('2d');
            if(suit != Suit.Joker)
                con.drawImage(img, 380 * (number - 1) + number, suit * 600, width,height, 0,0,width,height);
            else
                con.drawImage(img, 380 * (1 - 1) + 1, 4 * 600, width,height, 0,0,width,height);

            // dataURL を取得
            let dataUrl1 = canvas.toDataURL('image/png');

            con.drawImage(img, 380 * (3 - 1) + 1, 4 * 600, width,height, 0,0,width,height);
            let dataUrl2 = canvas.toDataURL('image/png');

            let cardImage = new Image(card.Width, card.Height);
            cardImage.src = dataUrl1;
            card.ImageTagString = cardImage.outerHTML;

            cardImage = new Image(card.Width, card.Height);
            cardImage.src = dataUrl2;
            card.BackImageTagString = cardImage.outerHTML;
        }
    }

    // カードの表
    GetImageTagText(){
        return this.ImageTagString;
    }

    // カードの裏
    GetBackImageTagText(){
        return this.BackImageTagString;
    }
}

class Suit{

static Club = 0;

static Diamond = 1;

static Heart = 2;

static Spade = 3;

static Joker = 4;

}

class Card {

constructor(suit, number, width, height){

this.Number = number;

this.Suit = suit;

this.ImageTagString = '';

this.BackImageTagString = '';

this.Width = width;

this.Height = height;

const img = new Image();

img.src = "cardimage.png";

let card = this;

img.onload = function(){

const canvas = document.createElement('canvas');

let width = 360;

let height = 500;

canvas.width = width;

canvas.height = height;

let con = canvas.getContext('2d');

if(suit != Suit.Joker)

con.drawImage(img, 380 * (number - 1) + number, suit * 600, width,height, 0,0,width,height);

else

con.drawImage(img, 380 * (1 - 1) + 1, 4 * 600, width,height, 0,0,width,height);

// dataURL を取得

let dataUrl1 = canvas.toDataURL('image/png');

con.drawImage(img, 380 * (3 - 1) + 1, 4 * 600, width,height, 0,0,width,height);

let dataUrl2 = canvas.toDataURL('image/png');

let cardImage = new Image(card.Width, card.Height);

cardImage.src = dataUrl1;

card.ImageTagString = cardImage.outerHTML;

cardImage = new Image(card.Width, card.Height);

cardImage.src = dataUrl2;

card.BackImageTagString = cardImage.outerHTML;

}

// カードの表

GetImageTagText(){

return this.ImageTagString;

}

// カードの裏

GetBackImageTagText(){

return this.BackImageTagString;

}

MovingCardクラス

それからカードを出すときにカードがテーブルの上を流れるように見せかけるためのクラスもつくります。

card.js

class MovingCard{
    constructor(suit, number, startX, startY, endX, endY, innerHTML, parentElement){
        this.UpdateCount = 0;
        this.ParentElement = parentElement;

        this.Suit = suit;
        this.Number = number;

        this.StartX = startX;
        this.StartY = startY;
        this.EndX = endX;
        this.EndY = endY;
        this.innerHTML = innerHTML;
        this.Dead = false;

        this.Element = document.createElement('div');
        this.Element.innerHTML = innerHTML;
        this.MaxUpdateCount = 4;
        this.Element.style.marginLeft = this.StartX + 'px';
        this.Element.style.marginTop = this.StartY + 'px';
        this.Element.style.position = 'absolute';

        this.ParentElement.appendChild(this.Element);
    }

    Move(){
        this.UpdateCount++;

        let x = this.StartX + this.UpdateCount * (this.EndX - this.StartX)/this.MaxUpdateCount;
        let y = this.StartY + this.UpdateCount * (this.EndY - this.StartY)/this.MaxUpdateCount;
        this.Element.style.marginLeft = x + 'px';
        this.Element.style.marginTop = y + 'px';

        // 移動が終わったらDeadフラグを立てて要素を取り除く
        if(this.UpdateCount >= this.MaxUpdateCount){
            this.Element.remove();
            this.Dead = true;
        }
    }
}

class MovingCard{

constructor(suit, number, startX, startY, endX, endY, innerHTML, parentElement){

this.UpdateCount = 0;

this.ParentElement = parentElement;

this.Suit = suit;

this.Number = number;

this.StartX = startX;

this.StartY = startY;

this.EndX = endX;

this.EndY = endY;

this.innerHTML = innerHTML;

this.Dead = false;

this.Element = document.createElement('div');

this.Element.innerHTML = innerHTML;

this.MaxUpdateCount = 4;

this.Element.style.marginLeft = this.StartX + 'px';

this.Element.style.marginTop = this.StartY + 'px';

this.Element.style.position = 'absolute';

this.ParentElement.appendChild(this.Element);

}

Move(){

this.UpdateCount++;

let x = this.StartX + this.UpdateCount * (this.EndX - this.StartX)/this.MaxUpdateCount;

let y = this.StartY + this.UpdateCount * (this.EndY - this.StartY)/this.MaxUpdateCount;

this.Element.style.marginLeft = x + 'px';

this.Element.style.marginTop = y + 'px';

// 移動が終わったらDeadフラグを立てて要素を取り除く

if(this.UpdateCount >= this.MaxUpdateCount){

this.Element.remove();

this.Dead = true;

}

ゲームのメインの部分（game.js）は次回示します。

準備編 JavaScriptでカードゲームスピードをつくる(1)

HTML部分

Cardクラス

MovingCardクラス

関連記事

鳩でも分かるC#管理人からのお願い

コメントについて

管理人のモチベーションアップのために

コメントをどうぞ