黄金矿工游戏的HTML+CSS+JAVASCRIPT纯前端实现

目录

• • style.css
  • index.html
  • gold.js
  • game.js
  • background.png
  • clock.png
  • diamond.png
  • dolar.png
  • gold.png
  • hook.png
  • level.png
  • rock.png
  • target.png
  • 最终结果

    本文介绍一个开源的 HTML + CSS + JAVASCRIPT 纯前端实现的网页版黄金矿工游戏 —— Gold-Miner-Game，作者是 zukahai ，该开源代码的目录结构如下：

    Gold-Miner-Game├── css│   └── style.css├── images│   ├── background.png│   ├── clock.png│   ├── diamond.png│   ├── dolar.png│   ├── gold.png│   ├── hook.png│   ├── level.png│   ├── rock.png│   └── target.png├── index.html└── js    ├── game.js    └── gold.js

    style.css

    body{    background-color: white;    margin: 0px;    text-align: center;}html, body {    margin: 0;    height: 100%;    overflow: hidden}html {    scrollbar-width: none;    -ms-overflow-style: none; }html { overflow-y: hidden; }

    index.html

        HaiZuka - Gold Miner Game        

    gold.js

    var goldIm = new Image();goldIm.src="images/gold.png";var rockIm = new Image();rockIm.src="images/rock.png";var diamondIM = new Image();diamondIM.src="images/diamond.png";class gold {    constructor(game) {        this.game = game;        this.init();    }    init() {        this.type = Math.floor(Math.random() * 100000) % 8;        this.x = 2 * this.game.getWidth() + Math.random() * (game_W - 4 * this.game.getWidth());        this.y = 2 * this.game.getWidth() + game_H / 3 + Math.random() * (2 * game_H / 3 - 4 * this.game.getWidth());        this.alive = true;        this.update();    }    update() {        switch (this.type) {            case 0:                this.speed = this.game.getWidth() / 5;                this.width = this.game.getWidth();                this.height = this.game.getWidth() / 2;                this.IM = goldIm;                this.score = 50;                break;            case 1:                this.speed = this.game.getWidth() / 8;                this.width = 1.5 * this.game.getWidth();                this.height = 1.5 * this.game.getWidth() / 2;                this.IM = goldIm;                this.score = 100;                break;            case 2:                this.speed = this.game.getWidth() / 20;                this.width = 2.5 * this.game.getWidth();                this.height = 2.5 * this.game.getWidth() / 2;                this.IM = goldIm;                this.score = 250;                break;            case 3:                this.speed = this.game.getWidth() / 15;                this.width = 1.5 * this.game.getWidth();                this.height = 1.5 * this.game.getWidth();                this.IM = rockIm;                this.score = 11;                break;            case 4:                this.speed = this.game.getWidth() / 40;                this.width = 1.8 * this.game.getWidth();                this.height = 1.8 * this.game.getWidth();                this.IM = rockIm;                this.score = 20;                break;            case 5:                this.speed = this.game.getWidth() / 65;                this.width = 2 * this.game.getWidth();                this.height = 2 * this.game.getWidth();                this.IM = rockIm;                this.score = 30;                break;            case 6:            case 7:                this.speed = this.game.getWidth() / 2.5;                this.width = this.game.getWidth() / 2;                this.height = this.game.getWidth() / 2.5;                this.IM = diamondIM;                this.score = 600;                break;        }    }    randomXY() {        this.x = 2 * this.game.getWidth() + Math.random() * (game_W - 4 * this.game.getWidth());        this.y = 2 * this.game.getWidth() + game_H / 3 + Math.random() * (2 * game_H / 3 - 4 * this.game.getWidth());    }    draw() {        // this.game.rotate(0);        this.game.context.drawImage(this.IM, this.x - this.width / 2, this.y - this.height / 2, this.width, this.height);    }    size() {        return Math.sqrt(this.width * this.width + this.height * this.height) / 2;    }}

    game.js

    // canvas 以左上角为坐标原点，向右为 X 轴正方向，向下为 Y 轴正方向let game_W = 20;let game_H = 20;let XXX = 0, YYY = 0, Xh = 0, Yh = 0; // (XXX，YYY)：hook 绳旋转的圆心点坐标；(Xh，Yh)：hook 当前时刻坐标let MaxLeng = 0; // hook 绳最大的长度let speedReturn = 0 // hook 绳返回的速度let R = 0, r = 0; // R：hook 绳最小的长度；r：hook 绳当前的长度let drag = false; // hook 绳如果在旋转，则为 false，否则为 truelet d = false; // hook 绳如果在伸长，则为 true，如果在减短，则为 false。这个标志只有在drag 为 true 时才有效。let ok = false; // 如果当前 hook 绳钩住了物品，则为 truelet angle = 90; // hook 绳当前的角度，从 X 轴正方向开始，顺时针为正，逆时针为负let ChAngle = -1; // 每帧更新时，hook 绳角度的变化值index = -1; // 钩住的物品的下标level = -1; // 当前的关卡值time = 60; // 每关的时长tager = 0; // 目标分数timeH = 0; // timeH = 成功钩上物品时剩余的秒数 - 0.7s，表示在 timeH 表示的时间点前都需要显示当前物品所得的分数vlH = 0; // 当前物品所得的分数var bg = new Image();bg.src="images/background.png";var hook = new Image();hook.src="images/hook.png";var targetIM = new Image();targetIM.src="images/target.png";var dolarIM = new Image();dolarIM.src="images/dolar.png";var levelIM = new Image();levelIM.src="images/level.png";var clockIM = new Image();clockIM.src="images/clock.png";let N = -10;  // 物品总数class game {    constructor() {        this.canvas = null;        this.context = null;        this.score = 0;        this.init();    }    init() {        this.canvas = document.createElement("canvas");        this.context = this.canvas.getContext("2d");        document.body.appendChild(this.canvas);        this.render();        this.newGold();        this.initGold();        this.loop();        // 监听鼠标和键盘，任意点击鼠标或按下任意一个键，hook 都会往外伸长        this.listenKeyboard();        this.listenMouse();    }    newGold() {        ok = false;        index = -1;        Xh = XXX;        Yh = YYY;        r = R;        drag = false;        timeH = -1;        vlH = 0;        time = 60;        level ++;        tager = (level + 1) * 1000 + level * level * 120;        this.initGold();    }    listenKeyboard() {        document.addEventListener("keydown", key => {            this.solve();        })    }    listenMouse() {        document.addEventListener("mousedown", evt => {            this.solve();        })    }    solve() {        if (!drag) {            drag = true;            d = true;            speedReturn = this.getWidth() / 2;            index = -1;        }    }    loop() {        this.update();        this.draw();        if (time > 0 || this.score > tager)            setTimeout(() => this.loop(), 10);        if (time             if (this.score = tager || this.checkWin())                 this.newGold();            else {                window.alert("You lose!" + "\n" + "Your Score: " + this.score);                location.reload();            }        }                }    update() {        this.render();        time -= 0.01;        Xh = XXX + r * Math.cos(this.toRadian(angle));        Yh = YYY + r * Math.sin(this.toRadian(angle));        if (!drag) {            angle += ChAngle;            if (angle >= 165 || angle             if (r