Simple 2D game using a mouse

Question

I would like to develop a simple 2D game using mouse controls. I am developing this game for a handicapped person that can only use one leg, so this game with be played with feet.

The main purpose of this game is to show healthy people what a struggle it is to use a computer if you are physically challenged. A player has 30 seconds to destroy all squares in the canvas. The squares are all the same size but they move at random speeds. I have managed to do all of this but things are too complicated for me to continue without assistance.

I need some help with mouse over function. I would like it so that when a player hovers over a square with his or her mouse the square disappears. Below the canvas there are two counters; One is counting down the time the player has left and the other one is counting the number of squares left or the amount that have been destroyed. When time runs out or there are no more squares to destroy the game should stop.

I am a rookie in JS so any help would be much appreciated. I have managed to come this far. The code is as it follows....

<html>
<head>
<title>Primer z več objekti</title>
<script type="text/javascript">

var canvas, ctx;
var num_objects = 20;
var objekti = [];

var time = 1000;

function Objekt() {
    this.x = Math.random() * canvas.width;
    this.y = Math.random() * canvas.height;

    this.xvel = Math.random() * 4 - 2.5;
    this.yvel = Math.random() * 4 - 2.5;

    this.waitTime = Math.random() * 1000;

    this.color = 0; // določimo lastnost barve objekta
}

Objekt.prototype.update = function () {
    this.x += this.xvel;
    this.y += this.yvel;

    this.yvel += 0;

    if (this.x > canvas.width || this.x < 0) {
        this.xvel = -this.xvel;
    }

    if (this.y > canvas.height || this.y < 0) {
        this.yvel = -this.yvel;
    }

    if (time > this.waitTime) {
        this.color = 1;
    }

}

function loop() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    for (var i = 0; i < num_objects; i++) {
        objekti[i].update();

        if (objekti[i].color == 1) {
            ctx.fillStyle = '#0000FF';
        } else {
            ctx.fillStyle = '#FF0000';

        }


        ctx.fillRect(objekti[i].x, objekti[i].y, 35, 35);

    }

    time = time - 1;

    document.getElementById("time").value = "Time:" + " " + time;
    document.getElementById("num_objects").value = "OBJECTS:" + " " + num_objects;
    setTimeout(loop, 1);

}

function load() {
    canvas = document.getElementById("cv");
    ctx = canvas.getContext("2d");

    for (var i = 0; i < num_objects; i++) {
        objekti[i] = new Objekt();
    }
    ctx.lineWidth = "4";
    ctx.strokeStyle = "rgb(255,255,255)";
    loop();
}

</script>
<style>
body {
background-color:#ACFA58;
margin:50px;
text-align:center;
}

canvas {
border:1px solid #FF0000;
}
</style>

</head>
<body onload="load();"> 
<canvas id="cv" width = "1000" height="750"> </canvas>
<p> </p>    
<form>
    <input type = "text" id="time" value = "0" /> 
    <input type = "text" id="num_objects" value = "0" />
</form>

</body>

</html>

What is your problem? I can't tell what you are asking help for specifically. Are you not able to tell when you are hovering over an object? — zero298, Jun 16 '14 at 17:48
Actually I don't have sufficient knowledge to finnish what I have started. A guess I should determine when a mouse is hovering over the object and then delete thagt object. — matjaz.moser, Jun 16 '14 at 18:14
I would say that that would be the best next step. If you have things rendering and bouncing around in your canvas, I would consider the logical progression to be able to interact with them. In your step function, start by printing out mouse coords in `console.log()` Once you have that, check the mouse coords against each of the object's position in your object array (and calculate against object size bounds). Then you know if they are being hovered and can delete them or do whatever. Once you have that going, you can come back and improve your question if you have more problems. — zero298, Jun 16 '14 at 18:18
Additionally, to get you started, consider this question that asks how to find mouse position in a canvas: [How do I get the coordinates of a mouse click on a canvas element?](http://stackoverflow.com/a/5932203/691711) — zero298, Jun 16 '14 at 18:32

score 0 · Answer 1 · answered Jul 02 '14 at 21:32

First you need to capture the mouse moving over the canvas, then you need to check whether the mouse is within a range of 35 pixels from any of the squares. finally you have to remove these squares from the objekti array

<html>
<head>
<title>Primer z več objekti</title>
<script type="text/javascript">

var canvas, ctx;
var num_objects = 20;
var objekti = [];

var time = 1000;

function Objekt() {
    this.x = Math.random() * canvas.width;
    this.y = Math.random() * canvas.height;

    this.xvel = Math.random() * 4 - 2.5;
    this.yvel = Math.random() * 4 - 2.5;

    this.waitTime = Math.random() * 1000;

    this.color = 0; // določimo lastnost barve objekta
}

Objekt.prototype.update = function () {
    this.x += this.xvel;
    this.y += this.yvel;

    this.yvel += 0;

    if (this.x > canvas.width || this.x < 0) {
        this.xvel = -this.xvel;
    }

    if (this.y > canvas.height || this.y < 0) {
        this.yvel = -this.yvel;
    }

    if (time > this.waitTime) {
        this.color = 1;
    }

}

Objekt.prototype.destroy = function () {
    objekti.splice(objekti.indexOf(this),1);//removes `this` instance from objekti array
    num_objects--;
}

function loop() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    for (var i = 0; i < num_objects; i++) {
        objekti[i].update();

        if (objekti[i].color == 1) {
            ctx.fillStyle = '#0000FF';
        } else {
            ctx.fillStyle = '#FF0000';

        }


        ctx.fillRect(objekti[i].x, objekti[i].y, 35, 35);

    }

    time = time - 1;

    document.getElementById("time").value = "Time:" + " " + time;
    document.getElementById("num_objects").value = "OBJECTS:" + " " + num_objects;
    setTimeout(loop, 1);

}

function mouseMove (e) {

    var x = e.offsetX;
    var y = e.offsetY;

    for (var i in objekti){//check if coordinates are in square
        var obj=objekti[i];
        if (x>obj.x-35 && x<obj.x+35) {
            if (y>obj.y-35 && y<obj.y+35){
                obj.destroy();//destroy square if it is
            }
        }
    }
}

function load() {
    canvas = document.getElementById("cv");
    ctx = canvas.getContext("2d");

    canvas.addEventListener('mousemove',mouseMove);//listen for the mousemove event and call function mouseMove when it happens

    for (var i = 0; i < num_objects; i++) {
        objekti[i] = new Objekt();
    }
    ctx.lineWidth = "4";
    ctx.strokeStyle = "rgb(255,255,255)";
    loop();
}

</script>
<style>
body {
    background-color:#ACFA58;
    margin:50px;
    text-align:center;
}

canvas {
    border:1px solid #FF0000;
}
</style>

</head>
<body onload="load();"> 
<canvas id="cv" width = "1000" height="750"> </canvas>
<p> </p>    
<form>
    <input type = "text" id="time" value = "0" /> 
    <input type = "text" id="num_objects" value = "0" />
</form>

</body>

</html>

Simple 2D game using a mouse

1 Answers1