HTML 5を使用した掃海艇

明らかに、2000年は有名な古典的なゲーム'掃海艇'を知っている前に、誰もが生まれた.私にとって、私はこのゲームを知っていたとき、私はほとんどの時点では、Windows XPのどこに支配されていた.それは面白いです私は正確にどのようにゲームがプレイされていないその時点で.その時、ゲームはどこかに勝つか、失うまで、鉱山のものを除いてすべての正方形を排除しようとすると私にゲームの一部の種類だった😆.
最近まで、友人は彼らがゲームを解くために完全に完璧なAIを作った男のビデオを見たと指摘しました.私はアイデアを気に入ったので、一つ作ることにしました.私はゲームがどのように動作するかを学ぶことから始めました.あるゲーム内の鉱山の特定の数があり、プレーヤーは、これらの鉱山は、ゲームに勝つためにどこに発見する必要があります.すべての正方形は、その特定の正方形の周囲の8乗内にどのように多くの鉱山を示している重量を持っています.重量がゼロだった場合は、ゲームは鉱山、それ以外の場合は、広場自体を明らかにするものを除いてすべての周囲の正方形を明らかにする.物事はアイデアと非常にうまく行かなかったが、私は結局ゲームを作ることになった.

どうやって動くの？

HTML 5のキャンバス要素の助けを借りて、幾何学的オブジェクトを描くことができます.我々はこれを動的にJavaScriptを使用して達成することができます.まず、ページにキャンバス要素を作成します.

<canvas id="example" width="500" height="500">Any text here will get displayed if the browser does not support HTML5 canvas</canvas>

次に、JavaScriptを使用してオブジェクトを作成し、プロパティを制御します.

var canvas = document.getElementById("example");
var context = canvas.getContext("2d");
context.beginPath();
context.fillStyle = 'red';
context.fillRect(0, 0, 10, 10);
context.closePath();

これは、辺が10で、(0,0)の位置を持つ正方形を作成する.簡単でシンプル.

子牛

使用するGrub ブートローダ用.明らかに、UEFIシステムにGRUBを使用します.ESPの場所のために、私は私の/boot/efi 他のLinuxディストリビューションアプローチに従ってください.このラップトップが付属しているHidpiスクリーンのために、GRUBは見るのが非常に小さいでしょうGRUB_GFXMODE 変数1600x1200x32 . 利用可能な値はGRUBコマンドラインからvideoinfo . エディット/etc/default/grub これらの行を含むファイル

掃海艇

オブジェクト指向プログラミング精神から来て、私は、私がこのようにそれに慣れているので、クラスをつくる能力が欲しかったです😃. 私はあなたが創造を模倣できることを知って驚いたclasses in JavaScript .
私は、それぞれの正方形が持っている属性を質問することから始めました?そして、私はこれらを思いつきました:ismine、isflagged、isdown、x、y、および重さ.Ismineは、正方形が鉱山であるかどうか言います.iSlaggedは、正方形がフラグまたはマークされているときです.正方形が明らかにされるならば、IsDown.XとYは、ゲームの場所を保持します.重量は、それが周囲の正方形の中にどのように多くの鉱山を保持するゼロよりも大きい数です.これらの属性で、このJSクラスが付属しています.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

class square {
    constructor(x, y) {
        this.x = x;
        this.y = y;
        this.isDown = false;
        this.isMine = false;
        this.isDown = false;
        this.weight = 0;
    }
    get x() { return this._x; }
    set x(value) { this._x = value; }
    get y() { return this._y; }
    set y(value) { this._y = value; }
    get weight() { return this._weight; }
    set weight(value) { this._weight = value; }
    get isDown() { return this._isDown; }
    set isDown(value) {
        this._isDown = value;
        if (this.isMine) {
            end = true;
        }
    }
    get isMine() { return this._isMine; }
    set isMine(value) { this._isMine = value; }
    get isFlagged() { return this._isFlagged; }
    set isFlagged(value) {
        this._isFlagged = value;
        if (value)
            numberofmines = (numberofmines <= 0) ? 0: numberofmines - 1;
        else
            numberofmines++;
        updateHeader();
    }
}

ゲームは、ループを持っていない、それは2つの主要な機能が含まれています.最初のものはマウスイベントハンドラを設定するようなゲーム環境を初期化するために呼び出されます.ここでは、すべての魔法が発生するたびに、ユーザーが最初のクリックをクリックすると、タイマーを起動し、それがゲームにクリックを通過します.それが正方形であるゲームフレームの中にあれば、その広場のクリックを登録します.さもなければ、それは新しいゲームを開始します.2番目の関数で、前の関数は1度だけ呼び出されます.これは、ゲーム内のすべての前のデータをクリアし、新しいゲームを開始するために呼び出されます.明らかに、これは他の機能の助けを借りて、もう少し整理するために行われます.

ソースコード

ソースコードはJSMinesweeper または、あなたはそれを試してみることができますhere .