pause / resume button on comecocos js

Question

pause / resume button on comecocos js

Navigation

#1 by (2 votes)

1

I was developing the game of the comet in js, based on the guidelines indicated at www.w3schools.com.

My problem is that after pressing the pause button ('spacebar') the keyboard driver stops listening and, therefore, there is no way to resume the game. I do not understand what I'm doing wrong

My code is as follows:

 <!DOCTYPE html>
<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;
var paused;

function startGame() {
    myGamePiece = new component(30, 30, "red", 225, 225);
    myGameArea.start();
}

var myGameArea = {
    canvas : document.createElement("canvas"),
    start : function() {
        this.canvas.width = 480;
        this.canvas.height = 270;
        this.context = this.canvas.getContext("2d");
        document.body.insertBefore(this.canvas, document.body.childNodes[0]);
        this.frameNo = 0;
        this.interval = setInterval(updateGameArea, 20);
        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() {
        if (!paused){
          this.interval =   clearInterval(this.interval);
          paused = true;
        }else{
          this.interval = setInterval(updateGameArea, 200000);
          paused = false;
        }

    },
    clear : function() {
        this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
    }
}

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

    this.type = type;
    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;
        ctx.save();
        ctx.translate(this.x, this.y);
        ctx.rotate(this.angle);
        ctx.fillStyle = color;
        ctx.fillRect(this.width / -2, this.height / -2, this.width, this.height);
        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() {
    console.log("hola")
    myGameArea.clear();
    myGamePiece.moveAngle = 0;
    myGamePiece.speed = 0;
    if (myGameArea.keys && myGameArea.keys[37]) {myGamePiece.moveAngle = -1; }
    if (myGameArea.keys && myGameArea.keys[39]) {myGamePiece.moveAngle = 1; }
    if (myGameArea.keys && myGameArea.keys[38]) {myGamePiece.speed= 1; }
    if (myGameArea.keys && myGameArea.keys[40]) {myGamePiece.speed= -1; }
    if (myGameArea.keys && myGameArea.keys[32]) {myGameArea.stop()}
    myGamePiece.newPos();
    myGamePiece.update();
}
</script>

<p>Make sure the gamearea has focus, and use the arrow keys to move the red square around.</p>

</body>
</html>

Thank you very much, Edardo

javascript html

asked by Eduardo Durán Fuentes 08.05.2017 в 11:30

source

1 answer

Error with arrays in Python Import library to Android Studio [closed]

score 2 · Answer 1

The problem is that when doing the clearInterval, you stop calling the function updateGameArea, so even if you click on the space again, you will never interpret the pulsation and call the stop method.

What you can do is add a paused property to the myGameArea object that indicates whether the game is paused or not. In this way in the updateGameArea method, if the game is paused, you only check if the space has been pressed and if not, you do not do anything.

Look at this example:

var myGamePiece;
var paused;

function startGame() {
    myGamePiece = new component(30, 30, "red", 225, 225);
    myGameArea.start();
}

var myGameArea = {
    canvas : document.createElement("canvas"),
    start : function() {
        this.canvas.width = 480;
        this.canvas.height = 270;
        this.context = this.canvas.getContext("2d");
        document.body.insertBefore(this.canvas, document.body.childNodes[0]);
        this.frameNo = 0;
        this.interval = setInterval(updateGameArea, 20);
        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() {
        this.paused = !this.paused;
        document.getElementById('paused').innerHTML = (this.paused ? 'paused' : ' &nbsp; ');
    },
    clear : function() {
        this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
    },
    paused: false
}

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

    this.type = type;
    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;
        ctx.save();
        ctx.translate(this.x, this.y);
        ctx.rotate(this.angle);
        ctx.fillStyle = color;
        ctx.fillRect(this.width / -2, this.height / -2, this.width, this.height);
        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() {
    if (myGameArea.paused){
      if (myGameArea.keys && myGameArea.keys[32]) {myGameArea.stop()}
      return;
    }
    myGameArea.clear();
    myGamePiece.moveAngle = 0;
    myGamePiece.speed = 0;
    if (myGameArea.keys && myGameArea.keys[37]) {myGamePiece.moveAngle = -1; }
    if (myGameArea.keys && myGameArea.keys[39]) {myGamePiece.moveAngle = 1; }
    if (myGameArea.keys && myGameArea.keys[38]) {myGamePiece.speed= 1; }
    if (myGameArea.keys && myGameArea.keys[40]) {myGamePiece.speed= -1; }
    if (myGameArea.keys && myGameArea.keys[32]) {myGameArea.stop()}
    myGamePiece.newPos();
    myGamePiece.update();
}

canvas {
    border:1px solid #d3d3d3;
    background-color: #f1f1f1;
}

<body onload="startGame()">


<div id="paused"> &nbsp; </div>
<p>Make sure the gamearea has focus, and use the arrow keys to move the red square around.</p>
</body>