子弹地狱设计技巧

时间:2016-05-20 02:46:32

标签: javascript html

好的,所以我对javascript很新,我只是制作我的第一个非教程游戏,只是一个简单的弹壳。我做到这样,子弹随机从墙上飞出,但它只做了一次。我希望它从一个随机的地方发射子弹,等待大约1秒钟,然后从其他随机地方再发射4发子弹。先感谢您! 下面是代码:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Square</title>
    <style>
            * { padding: 0; margin: 0; }
            canvas { background: #eee; display: block; margin: 0 auto; }
        </style>
</head>
<body>
<canvas id="myCanvas" width="480" height="320"></canvas>

<fom name="Show">
<input type="text" name="MouseX" value="0" size="4"> X<br>
<input type="text" name="MouseY" value="0" size="4"> Y<br>
</form>

<script language="JavaScript1.2">
    var canvas=document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");

    var x=canvas.width/2;
    var y=canvas.height-30;
    var playerHeight = 20;
    var playerWidth = 20;
    var enemyHeight = 10;
    var enemyWidth = 10;
    var IE = document.all?true:false
    var randRight = Math.random()*320;
    var randLeft = Math.random()*320;
    var randTop = Math.random()*320;
    var randBottom = Math.random()*320;
    var enemyXPosRight = 480;
    var enemyXPosLeft = 0;
    var enemyYPosTop = 0;
    var enemyYPosBottom = 320;
    var rep = true;


if (!IE) document.captureEvents(Event.MOUSEMOVE)


document.onmousemove = getMouseXY;


var tempX = 0
var tempY = 0

// Main function to retrieve mouse x-y pos.s

function getMouseXY(e) {
  if (IE) {
    tempX = event.clientX + document.body.scrollLeft
    tempY = event.clientY + document.body.scrollTop
  } else {
    tempX = e.pageX
    tempY = e.pageY
  }  

  if (tempX < 0){tempX = 0}
  if (tempY < 0){tempY = 0}  

  document.Show.MouseX.value = tempX
  document.Show.MouseY.value = tempY
  return true
}

function drawPlayer() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.beginPath();
    ctx.rect(tempX-500, tempY-20, playerWidth, playerHeight);
    ctx.fill();
    ctx.closePath();

    if (tempX < 500) {
    tempX = 500;
    }
    if (tempX > 960) {
    tempX = 960;
    }
    if (tempY < 38) {
    tempY = 38;
    }
    if (tempY > 340) {
    tempY = 340;
    }
}

function drawEnemyRight() {
    ctx.beginPath();
    ctx.rect(enemyXPosRight-=3, randRight, enemyWidth, enemyHeight);
    ctx.fill();
    ctx.closePath();
}
function drawEnemyLeft() {
    ctx.beginPath();
    ctx.rect(enemyXPosLeft+=3, randLeft, enemyWidth, enemyHeight);
    ctx.fill();
    ctx.closePath();
}
function drawEnemyTop() {
    ctx.beginPath();
    ctx.rect(randTop, enemyYPosTop+=3, enemyWidth, enemyHeight);
    ctx.fill();
    ctx.closePath();
}
function drawEnemyBottom() {
    ctx.beginPath();
    ctx.rect(randBottom, enemyYPosBottom-=3, enemyWidth, enemyHeight);
    ctx.fill();
    ctx.closePath();
}

function draw() {
    drawPlayer();
    drawEnemyBottom();
    drawEnemyRight();
    drawEnemyLeft();
    drawEnemyTop();
    requestAnimationFrame(draw);
}
    draw();

</script>
</body>
</html>

0 个答案:

没有答案