简体   繁体   English

HTML5 Canvas绘图图像随机

[英]HTML5 Canvas drawing image at random

I'm quite a noob when it comes to programming, so please bear with me and point out any additional info that I need to provide. 在编程方面,我是个菜鸟,所以请多包涵,并指出我需要提供的其他信息。 I'm making a game with Javascript and HTML5 canvas. 我正在用Javascript和HTML5 canvas开发游戏。 At the current stage, I call two images and assign them to objects. 在当前阶段,我调用两个图像并将其分配给对象。 It uses a basic loop that runs through update and render functions, and their subfunctions. 它使用一个贯穿更新和渲染功能及其子功能的基本循环。

var player = {}
player.truck = new Image();
player.truck.src = "truck.png";
var missile = {}
missile.rocket = new Image();
missile.rocket.src = "missile2.png"

Both are manipulated through separate render functions who's variables are manipulated by update functions and who's variables are in turn manipulated by keyPress events. 两者都通过单独的渲染函数进行操作,这些渲染函数的变量由更新函数控制,而变量由keyPress事件控制。 At refresh, the player image displays and behaves just fine - but the missile one displays completely at random. 刷新时,播放器图像会显示并正常运行-但是一个导弹完全随机显示。

Check keys: 检查键:

function checkKeys() {
    if (keyPressList[37]==true) {
        ConsoleLog.log("pressed left ")
        player.moveX = player.x -= 3;           
    }

    if (keyPressList[39]==true) {ConsoleLog.log("pressed right")
        player.moveX = player.x += 3;
    }

    if (keyPressList[32]==true) {ConsoleLog.log("space pressed")
        shotFired=true;
    }
}

Update Missile (subfunction of update()): 更新导弹(update()的子功能):

function updateMissiles(){
    if (shotFired==false){
        missile.x = player.x + 68;
        missile.y = 521;
    }else if(shotFired==true && currentGameStateFunction==gameStatePlayLevel){
        missile.y -= 5;
    }
}

Render Missile (subfunction of render()): 渲染导弹(render()的子函数):

function renderMissiles(x,y){
    context.drawImage(missile.rocket,missile.x,missile.y);
}

EDIT: I'm currently multitasking, so I uploaded the whole thing onto www.techgoldmine.com 编辑:我目前正在执行多任务处理,所以我将整个内容上传到了www.techgoldmine.com

When does shotfired ever get reset to false? shotfired才能重置为false? Could be that once you fire, it just keeps firing at the updateMissiles() . 可能是,一旦您触发,它只会在updateMissiles()处继续触发。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM