Thiết kế website giá rẻ

Question

I’ve been trying to code a simple JavaScript game in which the user controls a square across a canvas in order to collect coins, scoring points. My intention is that when the user collects a coin, the coin will move to a new location and the score increases by one. However, I’ve been having problems with trying to have the coin move to another location. When the coin is collected, a new coin is added, but the original stays in the same place and can’t be re-collected. What’s more, a line appears that goes from coin to coin, and even creates this strange yellow background across the coins that covers the player.

Here’s my code for reference:

<!--HTML CODE-->
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Collect the coins game</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <canvas id="game">Canvas isn't working</canvas>
    <h2>Score: <span id="score">0</span></h2>
    <script src="script.js"></script>
  </body>
</html>

//js code

// creates character, coin, score and score element on html, and coin coordinates
var character;
var coin;
var scoreHTML = document.getElementById("score");
var score = 0;
var coinLoc;

// creating a new coin, including the first coin
function createNewCoin(){
  coinLoc = [Math.round(Math.random()*900),Math.round(Math.random()*450)];

  if(coinLoc[0] < 12){
    coinLoc[0] = 12;
  }
  else if(coinLoc[0] > 888){
    coinLoc[0] = 888;
  }
  if(coinLoc[1] < 12){
    coinLoc[1] = 12;
  }
  else if(coinLoc[1] > 438){
    coinLoc[1] = 438;
  }
  if(coin){
    delete window.coin;
    console.log(coin);
  }
  
  coin = new component(coinLoc[0],coinLoc[1],10,10,"black","yellow",4,360);
}

// starting game
function startGame(){
  gameCanvas.start();
  character = new component(2,2,20,20,"black","red",4,-1);
  createNewCoin();
  character.move();
}

// updating canvas
function updateGame(){
  gameCanvas.clear();
  character.checkCoin();
  if (gameCanvas.key && (gameCanvas.key == "ArrowLeft"|| gameCanvas.key == "ArrowRight" || gameCanvas.key == "ArrowUp" || gameCanvas.key == "ArrowDown")){
    if (gameCanvas.key && gameCanvas.key == "ArrowLeft"){
      character.Xmove -= 1;
    }
    if (gameCanvas.key && gameCanvas.key == "ArrowRight"){
      character.Xmove += 1;
    }
    if (gameCanvas.key && gameCanvas.key == "ArrowUp"){
      character.Ymove -= 1;
    }
    if (gameCanvas.key && gameCanvas.key == "ArrowDown") {
      character.Ymove += 1;
    }
  }
  else {
    character.slowdown();
  }
  character.move();
  character.update();
  coin.update();
}

// game canvas element
var gameCanvas = {
  canvas : document.getElementById("game"),
  start : function(){
    this.canvas.width = 900;
    this.canvas.height = 450;
    this.context = this.canvas.getContext("2d");
    this.interval = setInterval(updateGame,1000/30);
    window.addEventListener('keydown', function (e) {
      gameCanvas.key = e.key;
    })
    window.addEventListener('keyup', function () {
      gameCanvas.key = false;
    })
  },
  clear : function(){
    this.context.clearRect(0,0,this.canvas.width,this.canvas.height);
  }
}

// component class that creates the character and coins
class component{
  constructor(x,y,height,width,colorOut,colorIn,lineThick,radius){

    // these determine attributes for each shape (colorOut is fill color, colorIn is stroke color)
    this.x = x;
    this.y = y
    this.height = height;
    this.width = width;
    this.colorOut = colorOut;
    this.colorIn = colorIn;
    this.lineThick = lineThick;
    this.radius = radius;

    // determines movement
    this.Xmove = 0;
    this.Ymove = 0;

    // determines if player should stop accelerating
    this.stopAccelX = false;
    this.stopAccelY = false;

    // sets up coloring of objects
    var Gcontext = gameCanvas.context;
    Gcontext.fillStyle = this.colorIn;
    Gcontext.strokeStyle = this.colorOut;

    // stops player when they crash into a wall
    this.stop = function(){
      if (this.x < 2){
        this.Xmove = 0;
        this.x = 2;
      }      
      else if (this.x > 878){
        this.Xmove = 0;
        this.x = 878;
      }
      else {
      }
      if (this.y < 2){
        this.Ymove = 0;
        this.y = 2;
      }
      else if(this.y > 428){
        this.Ymove = 0;
        this.y = 428;
      }
    }
    
    // stops player from moving too quickly (reaching max speed)
    this.maxSpeed = function(){
      if (Math.sqrt(this.Xmove**2 + this.Ymove**2) > 15){
        if(this.Xmove < 0 && gameCanvas.key == "ArrowLeft"){
          this.stopAccelX = true;
        }
        else if(this.Xmove > 0 && gameCanvas.key == "ArrowRight"){
          this.stopAccelX = true;
        }
        else {
          this.stopAccelX = false;
        }
        if(this.Ymove < 0 && gameCanvas.key == "ArrowUp"){
          this.stopAccelY = true;
        }
        else if(this.Ymove > 0 && gameCanvas.key == "ArrowDown"){
          this.stopAccelY = true;
        }
        else {
          this.stopAccelY = false;
        }
      }
    }

    // slows down the player
    this.slowdown = function(){
      if (this.Xmove < 0){
        this.Xmove = (-1 * ((this.Xmove * -1) ** 0.9)) + 0.066;
      }
      else if (this.Xmove > 0){
        this.Xmove = (this.Xmove ** 0.9) - 0.066;
      }
      if (this.Ymove < 0){
        this.Ymove = (-1 * ((this.Ymove * -1) ** 0.9)) + 0.066;
      }
      else if (this.Ymove > 0){
        this.Ymove = (this.Ymove ** 0.9) - 0.066;
      }
    }
    
    // moves character
    this.move = function(){
      this.stopAccelX = false;
      this.stopAccelY = false;
      this.maxSpeed();
      if(this.stopAccelX){
        if(this.Xmove > 0){
          this.Xmove -= 1;
        }
        else {
          this.Xmove += 1;
        }
      }
      if(this.stopAccelY){
        if(this.Ymove > 0){
          this.Ymove -= 1;
        }
        else {
          this.Ymove += 1;
        }
      }
      this.x += this.Xmove;
      this.y += this.Ymove;
      this.stop();
    }

    // updating character and coins
    this.update = function(){
      if(this.radius == -1) {
        this.rectConstruct(this.colorOut);
      }
      else {
        this.arcConstruct(this.colorOut);
      }
    }

    // checks for coin collision
    this.checkCoin = function(){
      if(this.x + 34 >= coin.x && this.x - 14 <= coin.x && this.y + 34 >= coin.y && this.y - 14 <= coin.y){
        score++;
        scoreHTML.textContent = score;
        createNewCoin();
      }
    }
    
  }

  // updates rectangles
  rectConstruct(stroke){
    var Gcontext = gameCanvas.context;
    Gcontext.fillStyle = this.colorIn;
    Gcontext.fillRect(this.x,this.y,this.height,this.width);
    if(stroke != false){
      Gcontext.strokeStyle = this.colorOut;
      Gcontext.lineWidth = this.lineThick;
      Gcontext.strokeRect(this.x,this.y,this.height,this.width);
    }
  }

  // updates coins
  arcConstruct(stroke){
    var Gcontext = gameCanvas.context;
    Gcontext.fillStyle = this.colorIn;
    Gcontext.arc(this.x,this.y,this.height,this.width,this.radius);
    Gcontext.fill();
    if(stroke != false){
      Gcontext.strokeStyle = this.colorOut;
      Gcontext.lineWidth = this.lineThick;
      Gcontext.stroke();
    }
  }
}

startGame();

/*css code*/
body {
  background-color:rgb(102,120,255);
}

canvas {
  background-color:white;
  border:1px solid black;
}

I’ve tried to use coin = null or delete window.coin to delete the first coin, but they don’t fix the problem at all. Can someone tell me what I need to fix?

Thiết kế website giá rẻ

Danh mục

Drawings on canvas don’t disappear and create weird visual effects