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 codeMining 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 codeAll 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 codeAdd 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 codeinstantiation
// 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 codeCollision 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 codeThe last
I’m sorry to hang “Gayhub” on the demo, so it’s you pikachu!
Welcome to clap brick ~
Ok, my first post is 💕❤️💗💘💖💗💕💔❤️💕.