Home/ Questions/Q 861233
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-15T08:56:46+00:00

This is what I got so far, and it’s not working at all :(

  • 0

This is what I got so far, and it’s not working at all 🙁 all the variables are null in my player class and update never gets called.

I mean a programming class, not a css class. I.E. not (.movingdiv{color: #ff0000;})

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Class Test</title>
        <meta charset="utf-8" />
        <style>
            body { text-align: center; background-color: #ffffff;}
            #box { position: absolute; left: 610px; top: 80px; height: 50px; width: 50px; background-color: #ff0000; color: #000000;}
        </style>

        <script type="text/javascript">
            document.onkeydown=function(event){keyDown(event)};
            document.onkeyup=function(event){keyUp(event)};
            var box = 0;

            function Player () {
                var speed = 5;
                var x = 50;
                var y = 50;
            }

            function update() {
                box.style.left = this.x + "px";
                box.style.top = this.y + "px";
                box.innerHTML = "<h6 style=\"margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;\">X: "+ this.x + "<br /> Y: " + this.y + "</h6>";
            }

            var player = new Player();
            var keys = new Array(256);
            var i = 0;
            for (i = 0;i <= 256; i++){
                keys[i] = false;
            }

            function keyDown(event){
               keys[event.keyCode] = true;
            }

            function keyUp(event){
               keys[event.keyCode] = false; 
            }

            function update(){
                if(keys[37]) player.x -= player.speed;
                if(keys[39]) player.x += player.speed;

                player.update();
            }

            setInterval(update, 1000/60);
        </script>
    </head>

    <body>
        <div id="box" ></div> 
        <script type="text/javascript">
            box = document.getElementById('box');
            box.innerHTML = "<h6 style=\"margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;\">X: "+ player.x + "<br /> Y: " + player.y + "</h6>";
        </script>

    </body>
</html>

Edit: alright, I think I messed up here. The first time I tried to make a class I seem to have messed up. After retrying I seem to be able to now using the “1 Using a function” in Meders post.

the real problem seems to be that javascript doesn’t know what to do when it gets to this line in my real code: 

box.style.background-position = "" + -(this.frame * this.width) + "px " + -(this.state * this.height) + "px";

It also seems to choke anytime I put

box.style.background-color

So the question I need answered now is how do I set a value to style variables in javascript that have a “-” in the name. I’ll post a test in a second

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    According to this article, there are three ways to define a class in JavaScript:

    1 Using a function

    Example:

     function Apple (type) {
     this.type = type;
     this.color = "red";
     this.getInfo = getAppleInfo;
 }

 function getAppleInfo() {
     return this.color + ' ' + this.type + ' apple';
 }


 var apple = new Apple('macintosh');
 apple.color = "reddish";
 alert(apple.getInfo());

    2 Using JSON

     var apple = {
     type: "macintosh",
     color: "red",
     getInfo: function () {
         return this.color + ' ' + this.type + ' apple';
     }
 }


 apple.color = "reddish";
 alert(apple.getInfo());

    3 Singleton using a function

     var apple = new function() {
     this.type = "macintosh";
     this.color = "red";
     this.getInfo = function () {
         return this.color + ' ' + this.type + ' apple';
     };
 }


 apple.color = "reddish";
 alert(apple.getInfo());
    • 0