Once I was a miner, too

Once UPON a time, I was a miner, and I worked hard to make money for my family. Remember this old man?

That’s right, the old man with the white beard, and the old man down there who’s in a hurry

So… I wrote a fancy version of it

Keep your little eyes open

Just asking, is it flat enough? Is it flat enough? Is it high enough (ai) big (cuo) up (qiong)!

Ok, that’s enough skin. Here’s how to teach fish how to swim:

HTML structure

        <canvas id="can">I'm sorry, but the current browser can't be trusted</canvas>
    <div class="over">
        <h3>Game over!</h3>
        <p>Current score:<span>0</span></p>
        <div>Start all over again</div>
    </div>
Copy the code

Mining tools

        // Mining tool constructor
        function MiningTool(x, y = 150, color = 'black') {
            this.w = 50;
            this.h = 30;
            this.x = x;
            this.y = y - 15;
            this.ropeLength = 50;
            this.hookRadius = 10;
            this.speed = 5;
            this.downSpeed = 5; // The speed at which the hook extends
            this.upSpeed = - 5; // The speed at which the hook retracts
            this.deg = 0; // Initial rotation Angle
            this.color = color;
            this.offsetDeg = 1;
            this.checkX = 0;
            this.checkY = 0;
        }

        MiningTool.prototype = {
            constructor: MiningTool,
            draw: function () {
                // Draw the square
                context.beginPath();
                context.save();
                context.fillStyle = this.color;
                context.fillRect(this.x - this.w / 2.this.y - this.h / 2.this.w, this.h);
                context.restore();

                context.beginPath();
                context.save();
                context.translate(this.x, this.y + this.h / 2);
                context.rotate(Math.PI / 180 * this.deg);
                context.lineWidth = 2;

                / / the rope
                context.moveTo(0.0);
                context.lineTo(0.this.ropeLength);
                context.stroke();

                / / hooks
                context.beginPath();
                context.arc(0.this.ropeLength + this.hookRadius, this.hookRadius, Math.PI / 180 * 30.Math.PI /
                    180 * 150.true);
                context.stroke();
                context.restore();

                if (this.deg > 0) {
                    this.checkX = this.x - Math.floor(Math.cos((90 - Math.abs(this.deg)) * Math.PI / 180) *
                        (this.ropeLength +
                            this.hookRadius * 2));
                } else if (this.deg <= 0) {
                    this.checkX = this.x + Math.floor(Math.cos((90 - Math.abs(this.deg)) * Math.PI / 180) *
                        (this.ropeLength +
                            this.hookRadius * 2));
                }
                this.checkY = this.y + Math.floor(Math.sin((90 - Math.abs(this.deg)) * Math.PI / 180) * (
                    this.ropeLength +
                    this.hookRadius * 2));

            },
            shake: function () {

                this.deg += this.offsetDeg;
                if (this.deg > 60 || this.deg < - 60) {
                    this.offsetDeg = -this.offsetDeg; }}}Copy the code

All kinds of mineral deposits

ยท All right, three, plus five or three cheap stones 0-0

        // Mineral constructor
        function Mineral(y) {
            this.type = rand(1.4);
            this.w = rand(60.100);
            this.h = rand(50.60);
            this.x = rand(0, cw - this.w)
            this.y = y;
            this.speed = rand(- 3.3);
            this.isActive = true;
            this.del = false;
            switch (this.type) {
                case 1: / / gold
                    this.score = rand(300.500);
                    this.color = 'gold';
                    this.heavy = 3;
                    break;
                case 2: / / iron ore
                    this.score = rand(200.300);
                    this.color = 'rgb(107, 107, 107)';
                    this.heavy = 3;
                    break;
                case 3: / / copper
                    this.score = rand(100.200);
                    this.color = 'rgb(207, 91, 23)';
                    this.heavy = 4;
                    break;
                case 4: / / stone
                    this.score = rand(10.50);
                    this.color = '#ccc';
                    this.heavy = 4;
                    break;
            }
        }

        Mineral.prototype = {
            constructor: Mineral,
            draw: function () {
                if (!this.del) {
                    context.beginPath();
                    context.fillStyle = this.color;
                    context.fillRect(this.x, this.y, this.w, this.h); }},move: function () {
                if (this.isActive) {
                    this.x += this.speed;
                    if (this.x < 0 || this.x > cw - this.w) {
                        this.speed = -this.speed; }}}}Copy the code

Add animation

          game();

        function game() {
            context.clearRect(0.0, cw, ch);
            / / score
            context.beginPath();
            context.font = '18px sans-serif';
            context.fillStyle = 'skyblue';
            context.fillText('Score:' + score, 20.40);
            context.closePath();
            context.fill();

            / / time
            let curTime = new Date().getTime();
            context.beginPath();
            context.font = '18px sans-serif';
            context.fillStyle = 'yellowgreen';
            let countDown = (time - ((curTime - startTime) / 1000)).toFixed(2);
            if (countDown < 0) {
                countDown = '0.00';
                if (canClick) {
                    canClick = false;
                    $('.over span').innerText = score;
                    if (localStorage.maxScore && localStorage.maxScore < score) {
                        localStorage.maxScore = score;
                    }
                    over.style.display = 'block';
                }
            }
            context.fillText('Time:' + countDown, 20.80);
            context.closePath();
            context.fill();

            / / the highest
            context.beginPath();
            context.font = '18px sans-serif';
            context.fillStyle = 'orange';
            context.fillText('Highest score:' + maxScore, 20.120);
            context.closePath();
            context.fill();

            // Identify mining areas
            context.moveTo(0.150);
            context.lineTo(cw, 150);
            context.stroke();


            if(! isClick) { player1.draw(); player1.shake(); }else {
                player1.ropeLength += player1.speed;
                player1.draw();
                collisionHandler()


            }

            / / mineral
            for (let i = 0; i < mineralsArr.length; i++) {
                mineralsArr[i].draw();
                mineralsArr[i].move();

                // If the mineral is hooked
                if(! mineralsArr[i].isActive) {// Minerals follow the hook
                    mineralsArr[i].x = player1.checkX - mineralsArr[i].w / 2;
                    mineralsArr[i].y = player1.checkY + 5;

                    // Hook head mineral disappear bonus
                    if(! mineralsArr[i].del) {if (player1.ropeLength < 50) {
                            mineralsArr[i].del = true;
                            // The score is valid while the game is not over
                            if (canClick) {
                                score += mineralsArr[i].score;
                            }

                            // Minerals are randomly generated at regular intervals
                            setTimeout((a)= > {
                                let mineral = new Mineral(rand(220, ch - 60));
                                mineralsArr.push(mineral);
                            }, rand(3000.5000));
                            mineralsArr.splice(i, 1); }}}}window.requestAnimationFrame(game)
        }
Copy the code

instantiation

            // instantiate a tool
        let player1 = new MiningTool(300);

        // Instantiate 5 minerals
        let defineY = 250; // The initial y value
        for (let i = 0; i < 5; i++) {
            let minerals = new Mineral(defineY);
            defineY += minerals.h + rand(10.20);
            mineralsArr.push(minerals);
        }

Copy the code

Collision detection ๐Ÿ’ฅ


        function collisionHandler() {
            if (player1.checkX < 0 || player1.checkX > cw || player1.checkY > ch) {
                player1.speed = player1.upSpeed;
            }
            if (player1.ropeLength < 50) {
                player1.speed = player1.downSpeed;
                isClick = false;
            }
            for (let i = 0; i < mineralsArr.length; i++) {
                if (isClick && player1.speed > 0 && mineralsArr[i].isActive) { / / the hook
                    if (player1.checkX >= mineralsArr[i].x && player1.checkX <= mineralsArr[i].x + mineralsArr[i].w &&
                        player1.checkY >= mineralsArr[i].y && player1.checkY <= mineralsArr[i].y + mineralsArr[i].h) {
                        player1.speed = player1.upSpeed + mineralsArr[i].heavy;
                        mineralsArr[i].isActive = false; }}}}Copy the code

The last

I’m sorry to hang “Gayhub” on the demo, so it’s you pikachu!

Welcome to clap brick ~

Ok, my first post is ๐Ÿ’•โค๏ธ๐Ÿ’—๐Ÿ’˜๐Ÿ’–๐Ÿ’—๐Ÿ’•๐Ÿ’”โค๏ธ๐Ÿ’•.