Javascript 如何将子弹连接到移动的精灵_Javascript_Html_Css

Javascript 如何将子弹连接到移动的精灵

javascript html css

Javascript 如何将子弹连接到移动的精灵,javascript,html,css,Javascript,Html,Css,到目前为止，我已经创建了一个可以移动的框，您可以按向上、向下、向左和向右箭头键。但是现在，我想把子弹固定在盒子上，这样每当我按下空格键，它就会射出一颗子弹。我只是有点不知道该怎么做（空格键的键码是32） gameTime.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>WOMP</title> <

到目前为止，我已经创建了一个可以移动的框，您可以按向上、向下、向左和向右箭头键。但是现在，我想把子弹固定在盒子上，这样每当我按下空格键，它就会射出一颗子弹。我只是有点不知道该怎么做（空格键的键码是32）

gameTime.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>WOMP</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="gameTime.css">
</head>     
<body>
<canvas id="canvas" height="400" width="400"></canvas>
<div id="bullet"></div>
<script type="text/javascript" src="gameTime.js"></script>
</body>
</html>

gameTime.js

var canvas = document.querySelector('#canvas');
var context = canvas.getContext('2d');

var xPos = 0;
var yPos = 0;

context.rect(xPos,yPos,50,50);
context.stroke();

function movement(e) {
    if(e.keyCode == 39) {
        xPos += 5;
    } 

    if(e.keyCode == 37) {
        xPos -= 5;
    }

    if(e.keyCode == 38) {
        yPos -=5;
    }

    if(e.keyCode == 40) {
        yPos +=5;
    }

    canvas.width = canvas.width;
    context.rect(xPos,yPos,50,50);
    context.stroke();
}

document.onkeydown = movement;

每次按空格键时，应使用自己的坐标、speead和方向创建新的

rect

，并使用

setInterval

重新计算。每次按空格键时，应使用自己的坐标、speead和方向创建新的

rect

，并使用

setInterval

重新计算。

var canvas = document.querySelector('#canvas');
var context = canvas.getContext('2d');

var xPos = 0;
var yPos = 0;

context.rect(xPos,yPos,50,50);
context.stroke();

function movement(e) {
    if(e.keyCode == 39) {
        xPos += 5;
    } 

    if(e.keyCode == 37) {
        xPos -= 5;
    }

    if(e.keyCode == 38) {
        yPos -=5;
    }

    if(e.keyCode == 40) {
        yPos +=5;
    }

    canvas.width = canvas.width;
    context.rect(xPos,yPos,50,50);
    context.stroke();
}

document.onkeydown = movement;