帆布游戏，你可以在那里躲避投射物

Question

问题

我正在创造一个游戏，在这里你必须躲避投射物，因为你错过的每一个射弹你都能得到1分。现在我有了，所以每次射到你身上，得分都会上升。

问题

我怎样才能改变这一点，使分数上升的每一个射弹错过你？

代码

        function init() {

            level = 1;
            total_projectiles = 0;
            projectiles = [];

            c = document.getElementById("c");
            ctx = c.getContext("2d");
            ctx.fillStyle = "#ff6600";
            ctx.fillRect(0, 0, 500, 600);

            c.addEventListener("mousemove", function (e) {
                //moving over the canvas.
                var bounding_box = c.getBoundingClientRect();
                player.x = (e.clientX - bounding_box.left) * (c.width / bounding_box.width) - player_img.width / 2;
            }, false);

            setupProjectiles(); 
            requestAnimationFrame(tick);
        }

        function setupProjectiles() {
            var max_projectiles = level * projectiles_per_level;
            while (projectiles.length < max_projectiles) {
                initProjectile(projectiles.length);
            }
        }

        function initProjectile(index) {
            var max_speed = max_speed_per_level * level;
            var min_speed = min_speed_per_level * level;
            projectiles[index] = {
                x: Math.round(Math.random() * (width - 2 * projectile_w)) + projectile_w,
                y: -projectile_h,
                v: Math.round(Math.random() * (max_speed - min_speed)) + min_speed,
                delay: Date.now() + Math.random() * delay
            }
            total_projectiles++;
        }

        function collision(projectile) {
            if (projectile.y + projectile_img.height < player.y + 74) {
                return false;
            }
            if (projectile.y > player.y + 74) {
                return false;
            }
            if (projectile.x + projectile_img.width < player.x + 177) {
                return false;
            }
            if (projectile.x > player.x + 177) {
                return false;
            }

            return true;
        }

        function maybeIncreaseDifficulty() {
            level = Math.max(1, Math.ceil(player.score / 10));
            setupProjectiles();
        }

        function tick() {
            var i;
            var projectile;
            var dateNow = Date.now();
            c.width = c.width;
            for (i = 0; i < projectiles.length; i++) {
                projectile = projectiles[i];
                if (dateNow > projectile.delay) {
                    projectile.y += projectile.v;
                    if (collision(projectile)) {
                        initProjectile(i);
                        player.score++;
                    } else if (projectile.y > height) {
                        initProjectile(i);
                    } else {
                        ctx.drawImage(projectile_img, projectile.x, projectile.y);
                    }
                }
            }

Answer 1

你可以像这样测试“近误”：

• 向投射对象添加一个nearRadius属性。nearRadius大于弹丸的实际半径，当弹丸通过球员附近时，用来进行命中测试。
• 向投射对象添加一个isNear属性。isNear是一个真/假属性，指示nearRadius是否与播放机发生冲突。
• 当弹丸的isNear属性从真变为假时，弹丸差点就通过了玩家。当这种情况发生时，你可以增加球员的得分。

示例代码和演示：

​

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;
function reOffset(){
    var BB=canvas.getBoundingClientRect();
    offsetX=BB.left;
    offsetY=BB.top;        
}
var offsetX,offsetY;
reOffset();
window.onscroll=function(e){ reOffset(); }
window.onresize=function(e){ reOffset(); }

var player={x:cw/2,y:50,radius:15,score:0};
var projectile={x:-30,y:30,radius:5,nearRadius:35,isNear:false}
var gameOver=false;

ctx.textAlign='center';
ctx.textBaseline='middle';
ctx.font='14px verdana';

draw();

$("#canvas").mousemove(function(e){handleMouseMove(e);});

function draw(){
    ctx.clearRect(0,0,cw,ch);
    // player
    ctx.beginPath();
    ctx.arc(player.x,player.y,player.radius,0,Math.PI*2);
    ctx.fillStyle='green';
    ctx.fill();
    // players score
    ctx.fillStyle='white';
    ctx.fillText(player.score,player.x,player.y);
    // projectile
    ctx.beginPath();
    ctx.arc(projectile.x,projectile.y,projectile.radius,0,Math.PI*2);
    ctx.fillStyle='red';
    ctx.fill();
    // projectile near 
    ctx.beginPath();
    ctx.arc(projectile.x,projectile.y,projectile.nearRadius,0,Math.PI*2);
    ctx.strokeStyle=projectile.isNear?'green':'red';
    ctx.stroke();
    // if game over
    if(gameOver){
        ctx.font='30px verdana';
        ctx.fillStyle='blue';
        ctx.fillText('Game Over',cw/2,35);
    }
}

function handleMouseMove(e){
    if(gameOver){return;}
    
    // tell the browser we're handling this event
    e.preventDefault();
    e.stopPropagation();

    projectile.x=parseInt(e.clientX-offsetX);
    projectile.y=parseInt(e.clientY-offsetY);

    var dx=projectile.x-player.x;
    var dy=projectile.y-player.y;

    // test projectile hits player
    var rr=projectile.radius+player.radius;
    gameOver=(dx*dx+dy*dy)<(rr*rr);
    
    // test projectile nearly misses player
    var rr=projectile.nearRadius+player.radius;
    var isNearNow=(dx*dx+dy*dy)<(rr*rr);
    if(projectile.isNear && !isNearNow){
        player.score++;
    }
    projectile.isNear=isNearNow;
    draw();
}

body{ background-color: ivory; }
#canvas{border:1px solid red; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<h4>Move red projectile with mouse<br>Score when outer ring passes by player.</h4>
<canvas id="canvas" width=300 height=300></canvas>

​