goldminer-mantouba/index.js

This project is a JavaScript game called "Gold Miner" where players control a miner to collect gold while avoiding rocks.

const canvas = document.getElementById("gameCanvas");
const ctx = canvas.getContext("2d");

const miner = new Image();
miner.src = "miner.png";

const gold = new Image();
gold.src = "gold.png";

const rock = new Image();
rock.src = "rock.png";

const width = 1024;
const height = 576;
const gridSize = 32;

let score = 0;
let lives = 3;

const minerWidth = 64;
const minerHeight = 64;
let minerX = width / 2 - minerWidth / 2;
let minerY = height - minerHeight - 10;

const goldWidth = 32;
const goldHeight = 32;
let goldX = Math.floor(Math.random() * (width - goldWidth));
let goldY = 0;

const rockWidth = 32;
const rockHeight = 32;
let rockX = Math.floor(Math.random() * (width - rockWidth));
let rockY = 0;

function drawMiner() {
  ctx.drawImage(miner, minerX, minerY, minerWidth, minerHeight);
}

function drawGold() {
  ctx.drawImage(gold, goldX, goldY, goldWidth, goldHeight);
}

function drawRock() {
  ctx.drawImage(rock, rockX, rockY, rockWidth, rockHeight);
}

function moveMiner(event) {
  const key = event.keyCode;
  if (key === 37) {
    if (minerX > 0) {
      minerX -= gridSize;
    }
  } else if (key === 39) {
    if (minerX < width - minerWidth) {
      minerX += gridSize;
    }
  }
}

function dropGold() {
  if (goldY < height) {
    goldY += gridSize / 2;
  } else {
    score++;
    goldX = Math.floor(Math.random() * (width - goldWidth));
    goldY = 0;
  }
}

function dropRock() {
  if (rockY < height) {
    rockY += gridSize / 3;
  } else {
    lives--;
    rockX = Math.floor(Math.random() * (width - rockWidth));
    rockY = 0;
  }
}

function checkCollision() {
  if (
    goldX < minerX + minerWidth &&
    goldX + goldWidth > minerX &&
    goldY < minerY + minerHeight &&
    goldY + goldHeight > minerY
  ) {
    score++;
    goldX = Math.floor(Math.random() * (width - goldWidth));
    goldY = 0;
  }

  if (
    rockX < minerX + minerWidth &&
    rockX + rockWidth > minerX &&
    rockY < minerY + minerHeight &&
    rockY + rockHeight > minerY
  ) {
    lives--;
    rockX = Math.floor(Math.random() * (width - rockWidth));
    rockY = 0;
  }
}

function drawScore() {
  ctx.fillStyle = "white";
  ctx.font = "24px Arial";
  ctx.fillText("Score: " + score, 10, 30);
}

function drawLives() {
  ctx.fillStyle = "white";
  ctx.font = "24px Arial";
  ctx.fillText("Lives: " + lives, width - 100, 30);
}

function draw() {
  ctx.clearRect(0, 0, width, height);
  drawMiner();
  drawGold();
  drawRock();
  drawScore();
  drawLives();
  dropGold();
  dropRock();
  checkCollision();

  if (lives <= 0) {
    ctx.fillStyle = "red";
    ctx.font = "48px Arial";
    ctx.fillText("Game Over", width / 2 - 150, height / 2);
    return;
  }

  requestAnimationFrame(draw);
}

function startMove(obj, attrs, fn){
  
    console.log('*** startMove ***', fn)

    clearInterval(obj.timer);

    obj.timer = setInterval(function(){
        let flag = true;
        for(let a in attrs){
     
            let curStyle = 0;
            let iTarget = attrs[a];
            if(a === 'opacity'){
       
                curStyle = Math.round(parseFloat(getStyle(obj,a))*100);
            } else{
                curStyle = parseInt(getStyle(obj,a));
            }
     
            let speed = (iTarget - curStyle) / 8;
            speed = speed > 0 ? Math.ceil(speed): Math.floor(speed);
    
            if(curStyle !== iTarget){
                flag = false;
            }
            if(a === 'opacity'){
                obj.style.filter = 'opacity('+(curStyle + speed)+')';
                obj.style.opacity = (curStyle + speed)/100
            } else{
                obj.style[a] = curStyle + speed + 'px';
            }
        }
        if(flag){
            clearInterval(obj.timer);
            console.log('flag  === true');
            if(fn){
                fn();
            }
        }
    }, 30)
}

function getStyle(obj, attr){
    if(obj.currentStyle){
        return obj.currentStyle[attr];
    }
    return getComputedStyle(obj,false)[attr];
}