曾经我也是个矿工
曾经，我也是个矿工，也曾勤勤恳恳滴挖矿，赚钱养家，还记得这个老头吗？
没错就是这个白胡子老头，还有下面这个长得挺着急的大叔
于是。。。 我写了一个高大上的版本
睁大你们的小眼睛哟
就问问你， 够不够扁？ 够不够平？ 够不够高(ai)大(cuo)上(qiong)！
好， 皮够了，以下是班门弄斧的时间：
html结构
<canvas id="can">很抱歉,当前浏览器不能委以重任，望弃之</canvas>
<div class="over">
<h3>游戏结束!</h3>
<p>当前得分:<span>0</span></p>
<div>重新开始</div>
</div>
挖矿的工具
// 采矿工具构造函数
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; // 钩子伸出去的速度
this.upSpeed = -5; // 钩子收回来的速度
this.deg = 0; //初始旋转角度
this.color = color;
this.offsetDeg = 1;
this.checkX = 0;
this.checkY = 0;
}
MiningTool.prototype = {
constructor: MiningTool,
draw: function () {
// 画出方块
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;
// 绳子
context.moveTo(0, 0);
context.lineTo(0, this.ropeLength);
context.stroke();
// 钩子
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;
}
}
}
各种矿藏
·好吧，就三种，外加五大三粗廉价的石头 0-0
//矿物 构造函数
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: //金子
this.score = rand(300, 500);
this.color = 'gold';
this.heavy = 3;
break;
case 2: // 铁矿
this.score = rand(200, 300);
this.color = 'rgb(107, 107, 107)';
this.heavy = 3;
break;
case 3: // 铜矿
this.score = rand(100, 200);
this.color = 'rgb(207, 91, 23)';
this.heavy = 4;
break;
case 4: // 石头
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;
}
}
}
}
添加动画
game();
function game() {
context.clearRect(0, 0, cw, ch);
// 得分
context.beginPath();
context.font = '18px sans-serif';
context.fillStyle = 'skyblue';
context.fillText('得分: ' + score, 20, 40);
context.closePath();
context.fill();
// 时间
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('时间: ' + countDown, 20, 80);
context.closePath();
context.fill();
//最高分
context.beginPath();
context.font = '18px sans-serif';
context.fillStyle = 'orange';
context.fillText('最高得分: ' + maxScore, 20, 120);
context.closePath();
context.fill();
// 区分采矿区
context.moveTo(0, 150);
context.lineTo(cw, 150);
context.stroke();
if (!isClick) {
player1.draw();
player1.shake();
} else {
player1.ropeLength += player1.speed;
player1.draw();
collisionHandler()
}
//矿物
for (let i = 0; i < mineralsArr.length; i++) {
mineralsArr[i].draw();
mineralsArr[i].move();
// 如果该矿物被勾到了
if (!mineralsArr[i].isActive) {
// 矿物跟着钩子运动
mineralsArr[i].x = player1.checkX - mineralsArr[i].w / 2;
mineralsArr[i].y = player1.checkY + 5;
// 钩子到头 矿物消失 加分
if (!mineralsArr[i].del) {
if (player1.ropeLength < 50) {
mineralsArr[i].del = true;
// 游戏未结束时 得分有效
if (canClick) {
score += mineralsArr[i].score;
}
// 隔一定时间 随机生成矿物
setTimeout(() => {
let mineral = new Mineral(rand(220, ch - 60));
mineralsArr.push(mineral);
}, rand(3000, 5000));
mineralsArr.splice(i, 1);
}
}
}
}
window.requestAnimationFrame(game)
}
实例化
//实例化一个工具
let player1 = new MiningTool(300);
// 实例化5个矿物
let defineY = 250; // 初始y值
for (let i = 0; i < 5; i++) {
let minerals = new Mineral(defineY);
defineY += minerals.h + rand(10, 20);
mineralsArr.push(minerals);
}
碰撞检测 💥
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) { // 下钩
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;
}
}
}
}
最后
炒鸡小的demo，不好意思挂gayhub，就决定是你了 pikachu！
欢迎拍砖~
好吧，第一篇小白文，还是厚脸皮求几个小💕❤️💗💘💖💗💕💔❤️💕 吧。
