Frogger JavaScript game - Redefine Object Property

Question

I am trying to write a frogger game like in OOP javascript. I have a couple of sprites for the player to choose from. What I want to achieve is that when the user selects the specific sprite, it updates the correct one when instantiating the player object. I get an error when I try to redefine the property. I have tried a couple of solutions but with no success. What am i doing wrong? please help!

HTML:

    <!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>First Attempt: Frogger</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/dd.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>    
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>         
</head>
<body>

    <div class="container">
        <div class="row">
            <div class="col-sm-4 offset-sm-2 characters" style="border:1px solid black">
                <img src="images/char-boy.png" alt="char-boy"><input type="radio" name="sprite" value="images/char-boy.png" checked="checked"> 
                <img src="images/char-cat-girl.png" alt="char-boy"><input type="radio" name="sprite" value="images/char-cat-girl.png"> 
                <img src="images/char-horn-girl.png" alt="char-boy"><input type="radio" name="sprite" value="images/char-horn-girl.png"> 
                <img src="images/char-pink-girl.png" alt="char-boy"><input type="radio" name="sprite" value="images/char-pink-girl.png"> 
                <img src="images/char-princess-girl.png" alt="char-boy"><input type="radio" name="sprite" value="images/char-princess-girl.png">  
            </div>
            <div class="col-sm-6" id="game"></div>
        </div>        
    </div>

    <script src="js/resources.js"></script>
    <script src="js/app.js"></script>
    <script src="js/engine.js"></script> 
</body>
</html>

JavaScript:

var Player = function(){    
    //What sprite to use    
    this.sprite = $("input[name='sprite']:checked").val();          
    //initial x location
    this.x = 200;
    //initial y location
    this.y = 400;
};

$(document).on("click", 'input:radio[name="sprite"]',
function(){            
    var result = $("input[name='sprite']:checked").val();
    console.log(result);
    Object.defineProperty(Player.prototype, 'sprite', {
        get: function(){
            return this.sprite;
        },
        set: function(result){
            this.sprite = result;
        }
    });           
}
);

sliptype · Accepted Answer · 2018-02-21 16:39:33Z

0

You could wrap the Player constructor in a closure to pass in the sprite before instantiation:

var PlayerWithSprite = function (sprite) {    

    return function () {
        //What sprite to use    
        this.sprite = sprite;
        //initial x location
        this.x = 200;
        //initial y location
        this.y = 400;
    };
    
};

var Player = PlayerWithSprite('my-sprite');

var playerInstance = new Player();

console.log(playerInstance);

answered Feb 21, 2018 at 16:39

sliptype

2,9741 gold badge18 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

PedroQ Over a year ago

The problem is i need a default value for sprite otherwise when I try to draw the sprite image later on in the code i get this error "Uncaught TypeError: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The provided value is not of type '(CSSImageValue or HTMLImageElement

D. Levine · Accepted Answer · 2018-02-21 16:41:55Z

0

Here is a Player class to get you started:

class Player
{
  constructor(x,y)
  {
    var player = this;    

    this.x = x;
    this.y = y;

    this.sprite = null;

    $('input:radio[name="sprite"]').click(function(){
      player.sprite = $("input[name='sprite']:checked").val();
    });
   }
}

$(function(){
  new Player(200,400);
});

answered Feb 21, 2018 at 16:41

D. Levine

3693 silver badges6 bronze badges

1 Comment

PedroQ Over a year ago

The problem is i need a default value for sprite otherwise when I try to draw the sprite image later on in the code i get this error "Uncaught TypeError: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The provided value is not of type '(CSSImageValue or HTMLImageElement ..."

user2453676 · Accepted Answer · 2018-02-21 16:44:39Z

0

You are getting an error because by default you can't redefine properties in JavaScript. See this answer for more information. If you want to define properties on an object, it should be one in the player constructor function.

edited Feb 21, 2018 at 16:44

answered Feb 21, 2018 at 16:35

user2453676

57611 silver badges24 bronze badges

Collectives™ on Stack Overflow

Frogger JavaScript game - Redefine Object Property

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related