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属性。 isNear大于弹丸的实际半径，用于在弹丸经过玩家附近时进行击打测试。
向弹丸对象添加isNear属性。 nearRadius是一个true / false属性，表示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(); }属性从true变为false时，射弹已经在近乎未命中的情况下通过了玩家。发生这种情况时，您可以提高玩家的分数。

示例代码和演示：

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>

$histoicTotal

帆布游戏，你躲避射弹

1 个答案: