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;
        }
    });           
}
);

user2453676 · Answer 1 · 2018-02-21T16:44:39.310

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 '18 at 16:44

answered Feb 21 '18 at 16:35

user2453676

470
9
16

score 0 · Answer 2 · answered Feb 21 '18 at 16:39

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 '18 at 16:39

sliptype

2,804
1
15
26

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 – PedroQ Feb 21 '18 at 17:34

score 0 · Answer 3 · answered Feb 21 '18 at 16:41

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 '18 at 16:41

D. Levine

319
3
5

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 ..." – PedroQ Feb 21 '18 at 17:31

Frogger JavaScript game - Redefine Object Property

3 Answers3