Jump to content

wutruneef

Members
 View Profile  See their activity

  • Posts

    1

  • Joined

  • Last visited

 Content Type 

Posts posted by wutruneef

    help me with the w3 code

    in JavaScript

    Posted

    I copied the game code from w3 schools for a school project, however I wanted to change the turning and moving object from a red square to an image.

    Now everything works fine but the image does not turn when the object turns, how do I fix this.

    Here is my code:

    <html>
    <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <style>
    canvas {
        border:1px solid #d3d3d3;
        background-color: #f1f1f1;
    }
    </style>
    </head>
    <body onload="startGame()">

    <script>
    var myGamePiece;

    function startGame() {
        myGamePiece = new component(30, 30, "images/smiley.png", 255, 255, "image");
        myGameArea.start();
    }

    var myGameArea = {
        canvas : document.createElement("canvas"),
        start : function() {
            this.canvas.width = 800;
            this.canvas.height = 500;
            this.context = this.canvas.getContext("2d");
            document.body.insertBefore(this.canvas, document.body.childNodes[0]);
            this.frameNo = 0;
            this.interval = setInterval(updateGameArea, 10);
            window.addEventListener('keydown', function (e) {
                e.preventDefault();
                myGameArea.keys = (myGameArea.keys || []);
                myGameArea.keys[e.keyCode] = (e.type == "keydown");
            })
            window.addEventListener('keyup', function (e) {
                myGameArea.keys[e.keyCode] = (e.type == "keydown");
            })
        },
        stop : function() {
            clearInterval(this.interval);
        },    
        clear : function() {
            this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
        }
    }

    function component(width, height, color, x, y, type) {

        this.type = type;
        if (type == "image") {
            this.image = new Image();
            this.image.src = color;
        }
        this.width = width;
        this.height = height;
        this.speed = 0;
        this.angle = 0;
        this.moveAngle = 0;
        this.x = x;
        this.y = y;    
        this.update = function() {
            ctx = myGameArea.context;
            if (type == "image") {
                ctx.drawImage(this.image, 
                    this.x, 
                    this.y,
                    this.width, this.height);
            } else {
                ctx.fillStyle = color;
                ctx.fillRect(this.width / -2, this.height / -2, this.width, this.height);
            }
            ctx.save();
            ctx.translate(this.x, this.y);
            ctx.rotate(this.angle);


            ctx.restore();    
        }
        this.newPos = function() {
            this.angle += this.moveAngle * Math.PI / 180;
            this.x += this.speed * Math.sin(this.angle);
            this.y -= this.speed * Math.cos(this.angle);
        }
    }

    function updateGameArea() {
        myGameArea.clear();
        myGamePiece.moveAngle = 0;
        myGamePiece.speed = 0;
        if (myGameArea.keys && myGameArea.keys[37]) {myGamePiece.moveAngle = -2; }
        if (myGameArea.keys && myGameArea.keys[39]) {myGamePiece.moveAngle = 2; }
        if (myGameArea.keys && myGameArea.keys[38]) {myGamePiece.speed= 2; }
        if (myGameArea.keys && myGameArea.keys[40]) {myGamePiece.speed= -2; }
        myGamePiece.newPos();
        myGamePiece.update();
    }
    </script>

    <p></p>

    </body>
    </html>

    I very appreciate the help!

×
×
  • Create New...