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

05-28 阅读 0评论

目录

    • 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，否则为 true
let d = false; // hook 绳如果在伸长，则为 true，如果在减短，则为 false。这个标志只有在drag 为 true 时才有效。
let ok = false; // 如果当前 hook 绳钩住了物品，则为 true
let 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

相关阅读：

1、xbox主机怎么绑定账号登录(xbox主机怎么绑定账号登录游戏)

2、主机副屏播放视频黑屏怎么回事（电脑副屏看视频主屏打游戏）

3、游戏主机怎么选配件啊(游戏主机怎么选配件啊知乎)

4、百度快照显示的域名不对怎么回事（网站百度快照迟迟不更新怎么解决）

5、华硕游戏主机质量怎么样(华硕游戏主机质量怎么样知乎)

免责声明
本网站所收集的部分公开资料来源于AI生成和互联网，转载的目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
文章版权声明：除非注明，否则均为主机测评原创文章，转载或复制请以超链接形式并注明出处。

相关阅读

发表评论

快捷回复： 表情：
评论列表 （暂无评论，人围观）

还没有评论，来说两句吧...

目录[+]