制作多

制作多

关注
发信
关注(28)粉丝(399)

javascript - 如何在obj上的js中制作多个矩形？以及如何使它们在不同的x和y轴上？

这是我的js

var canvas = document.getElementById("mainCanvas");
var context = canvas.getContext("2d");

var keys =[];

var width = 1575,
    height = 700,
    speed = 10,
    score1 = 0,
    NUMFOOD = 10,
    running = true,
    i = 0;


var requestAnimFrame = window.requestAnimationFrame ||
                            window.mozRequestAnimationFrame ||
                            window.webkitRequestAnimationFrame ||
                            window.msRequestAnimationFrame;


var randomXSpawn = Math.random() * (width - 8);
var randomYSpawn = Math.random() * (height - 8);

function gameObj(x,y,width,height) {
    this.x=x;
    this.y=y;
    this.width=width;
    this.height=height;
};
var player1 = new gameObj(0,0,10,10);
var player2 = new gameObj(0, 700-10,10,10);
var food = new gameObj(randomXSpawn,randomYSpawn,3,3);

window.addEventListener("keydown", function(e){
    keys[e.keyCode] = true;
}, false);
window.addEventListener("keyup", function(e){
    delete keys[e.keyCode];
}, false);

/*
    keys
    up-38
    down-40
    right-39
    left-37

    w-87
    s-83
    a-65
    d-68

    y-89
    h-72
    g-71
    j-74

    5-101
    2-98
    1-97
    3-99
*/
function game(){
    update();
    render();
}
function update(){
    if(keys[87]) player1.y-=speed;
    if(keys[83]) player1.y+=speed;
    if(keys[65]) player1.x-=speed;
    if(keys[68]) player1.x+=speed;

    if(player1.x <0) player1.x=0;
    if(player1.y <0) player1.y=0;
    if(player1.x >= width - player1.width) player1.x = width - player1.width;
    if(player1.y >= height - player1.height) player1.y = height - player1.height;

    if(collision(player1, food)){
        playerColl1 = true;
        process(player1, score1);
        console.log("collision");
    }

    console.log(player1.x, player1.y);
}
function process(player){
    score1++;
    food.x = Math.random() * (width - 8);
    food.y = Math.random() * (height - 8);
    if(score1 >= player.width){
        player.width++;
        player.height++;
        if(speed >= 1){
            speed = speed - 0.1;
            if(speed <= 2){
                speed = 2;
            }
        }
    }
}

function render(){
    context.clearRect(0,0,width,height);
    context.fillStyle = "black";
    context.fillRect(width/2 - 1,0,1,height);

    context.fillStyle = "blue";
    context.fillRect(player1.x, player1.y, player1.width, player1.height);
    context.fillStyle = "red";
    while(NUMFOOD > i){
        food++;
    }
    context.fillRect(food.x, food.y, food.width, food.height);
    context.fillStyle = "black";

    context.font = "bold 30px helvetica";
    context.fillText(score1, 10,30);
}

function collision(first, second){
    return !(first.x > second.x + second.width ||
        first.x + first.width < second.x ||
        first.y > second.y + second.height||
        first.y + first.height < second.y||
        second.x > first.x + first.width ||
        second.x + second.width < first.x ||
        second.y > first.y + first.height||
        second.y + second.height < first.y);
}

function animate() {
    if (running) {
         game();
    }
    requestAnimFrame(animate);
}
animate();


这是我的HTML

<html lang="en-US">
<head>
    <meta charset="UTF-8"/>
    <title>Game</title>
    <link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<canvas id="mainCanvas" height="700" width="1575"></canvas>
<script type="text/javascript" src="script.js"></script>
</body>
</html>


这是我的CSS

#mainCanvas{
    outline: 1px solid black;
    background-color: #bcbcbc;
}


我不知道为什么我不能制作多个矩形。有人可以帮我什么忙吗？我正在尝试使用while循环，但无法正常工作。我正在尝试制作多种食物（红色方块）供玩家食用（蓝色方块）

最佳答案

如果我理解正确，则您正在尝试拥有玩家可以收集的多种食物。

尝试以此更新您的js。我在修改的地方添加了评论：

var canvas = document.getElementById("mainCanvas");
var context = canvas.getContext("2d");

var keys =[];

var width = 1575,
    height = 700,
    speed = 10,
    score1 = 0,
    NUMFOOD = 10,
    running = true,
    i = 0;


var requestAnimFrame = window.requestAnimationFrame ||
                            window.mozRequestAnimationFrame ||
                            window.webkitRequestAnimationFrame ||
                            window.msRequestAnimationFrame;



function gameObj(x,y,width,height) {
    this.x=x;
    this.y=y;
    this.width=width;
    this.height=height;
};
var player1 = new gameObj(0,0,10,10);
var player2 = new gameObj(0, 700-10,10,10);


// create a list of food items
var foods = [];
for (var i=0; i< NUMFOOD; i++){
    foods[i]=new gameObj( Math.random() * (width - 8), Math.random() * (height- 8),3,3);
}


window.addEventListener("keydown", function(e){
    keys[e.keyCode] = true;
}, false);
window.addEventListener("keyup", function(e){
    delete keys[e.keyCode];
}, false);

/*
    keys
    up-38
    down-40
    right-39
    left-37

    w-87
    s-83
    a-65
    d-68

    y-89
    h-72
    g-71
    j-74

    5-101
    2-98
    1-97
    3-99
*/
function game(){
    update();
    render();
}
function update(){
    if(keys[87]) player1.y-=speed;
    if(keys[83]) player1.y+=speed;
    if(keys[65]) player1.x-=speed;
    if(keys[68]) player1.x+=speed;

    if(player1.x <0) player1.x=0;
    if(player1.y <0) player1.y=0;
    if(player1.x >= width - player1.width) player1.x = width - player1.width;
    if(player1.y >= height - player1.height) player1.y = height - player1.height;

    //loop over list of food and check if any hits
    for (var i=0; i< NUMFOOD; i++){
        if(collision(player1, foods[i])){
            playerColl1 = true;
            // pass food object that has been hit to process
            process(player1, score1, foods[i]);
            console.log("collision");
         }
    }


    console.log(player1.x, player1.y);
}
function process(player, score1, food){
    score1++;
    food.x = Math.random() * (width - 8);
    food.y = Math.random() * (height - 8);
    if(score1 >= player.width){
        player.width++;
        player.height++;
        if(speed >= 1){
            speed = speed - 0.1;
            if(speed <= 2){
                speed = 2;
            }
        }
    }
}

function render(){
    context.clearRect(0,0,width,height);
    context.fillStyle = "black";
    context.fillRect(width/2 - 1,0,1,height);

    context.fillStyle = "blue";
    context.fillRect(player1.x, player1.y, player1.width, player1.height);
    context.fillStyle = "red";

    // render all food items
    for (var i=0; i< NUMFOOD; i++){
        context.fillRect(foods[i].x, foods[i].y, foods[i].width, foods[i].height);
    }

    context.fillStyle = "black";

    context.font = "bold 30px helvetica";
    context.fillText(score1, 10,30);
}

function collision(first, second){
    return !(first.x > second.x + second.width ||
        first.x + first.width < second.x ||
        first.y > second.y + second.height||
        first.y + first.height < second.y||
        second.x > first.x + first.width ||
        second.x + second.width < first.x ||
        second.y > first.y + first.height||
        second.y + second.height < first.y);
}

function animate() {
    if (running) {
         game();
    }
    requestAnimFrame(animate);
}
animate();

10-07 16:59
Powered by LMLPHP ©2024 制作多 0.042242