Question

我想用鼠标控件开发一个简单的2D游戏。我正在为一个只能使用一条腿的残疾人开发这个游戏，所以这个游戏可以用脚来玩。

这个游戏的主要目的是向健康人展示如果你身体受到挑战，使用电脑是多么艰难。玩家有30秒的时间来摧毁画布中的所有方块。方块的大小都相同，但它们以随机的速度移动。我已经成功完成了所有这些工作，但事情太复杂了，我无法继续下去。

我需要一些关于鼠标功能的帮助。我希望这样当一个玩家用他或她的鼠标盘旋在一个广场上时，这个方块就会消失。画布下方有两个柜台;一个是倒计时玩家离开的时间，另一个是计算剩余的方格数或已被摧毁的数量。当时间用完或没有更多的方块可以摧毁时，游戏就应该停止。

我是JS的新手，所以任何帮助都会非常感激。我设法走到这一步。代码如下......

<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>

Answer 1

首先，您需要捕捉在画布上移动的鼠标，然后您需要检查鼠标是否在距任何方格35像素的范围内。最后你必须从objekti数组

中删除这些方块

<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>

使用鼠标的简单2D游戏

1 个答案: