自己在画布上移动的物体

对不起，代码太长了。当英雄图像距离地雷或怪物图像至多32像素时，它应该被运回到重生点，其在x轴上是5个像素，并且在y轴上是5个。英雄形象正在正确运输，警报不起作用。预先感谢您的任何想法或建议。自己在画布上移动的物体

<html> 
<style> 
</style> 
<body background="background.jpg"> 
<canvas id="canvas" width="1300" height="630"></canvas> 
<script> 
var canvas=document.getElementById("canvas"); 
var ctx = canvas.getContext("2d"); 
var H=canvas.height; 
var W=canvas.width; 
var x=10; 
var y=15; 
var rightPressed=false; 
var leftPressed=false; 
var upPressed=false; 
var downPressed=false; 
var heroX=20; 
var monsterX=200; 
var monsterY=200; 
var heroY=20; 
var dx= .68; 
var dy= .76; 
var score=0; 
var monstersCaught=0; 
var ballPX = 32 + (Math.random() * (canvas.width - 64)); 
var ballPY = 32 + (Math.random() * (canvas.height - 64)); 
var h=178; 
var i=333; 
var mineX=778; 
var mineY=178; 

Window.onload=dank(); 
function dank(){ 
alert("How to play: move your hero using the arrow keys, and collect colored  balls for powerups and points!Get the highest score you can without touching a  monster, which makes you start over!Collect the colored balls for more and   better special powerups."); 
} 
document.addEventListener("keydown", keyDownHandler, false); 
document.addEventListener("keyup", keyUpHandler, false); 

function draw(){ 
ctx.clearRect(0, 0, canvas.width, canvas.height); 
var heroImage=new Image(); 
heroImage.onload=function(){ 
ctx.drawImage(heroImage , heroX, heroY); 
} 
heroImage.src="hero.jpg"; 
dope(); 
checkMonster(); 
drawMines(); 
checkDeath(); 
} 
function keyDownHandler(e) { 
if(e.keyCode == 39) { 
rightPressed = true; 
} 
else if(e.keyCode == 37) { 
leftPressed = true; 
} 
else if(e.keyCode == 40) { 
downPressed = true; 
} 
else if(e.keyCode == 38) { 
upPressed = true; 
} 
} 
function keyUpHandler(e) { 
if(e.keyCode == 39) { 
rightPressed = false; 
} 
else if(e.keyCode == 37) { 
leftPressed = false; 
} 
else if(e.keyCode == 40) { 
downPressed = false; 
} 
else if(e.keyCode == 38) { 
upPressed = false; 
} 
} 
function dope(){ 
if(rightPressed) { 
heroX += 7; 
} 
else if(leftPressed) { 
heroX -= 7; 
} 
else if(upPressed){ 
heroY -= 7; 
} 
else if(downPressed){ 
heroY +=7; 
} 
} 
function checkMonster(){ 
var monsterImage=new Image(); 
monsterImage.onload=function(){ 
ctx.drawImage(monsterImage, monsterX, monsterY) 
} 
monsterImage.src="monster.jpg"; 
monsterX += dx; 
monsterY += dy; 
if(monsterX>canvas.width || monsterX<0){ 
monsterX = -dx; 
} 
else if(monsterY>canvas.height || monsterY<0){ 
monsterY = -dy; 
} 
if (
heroX <= (monsterX + 32) 
&& monsterX <= (heroX + 32) 
&& heroY <= (monsterY + 32) 
&& monsterY <= (heroY + 32) 
) {

不工作

alert("DEATH"); 
heroY=5; 
heroX=5; 
monsterX=100; 
monsterY=100; 
upPressed=false; 
downPressed=false; 
leftPressed=false; 
rightPressed=false; 


} 
} 
function drawMines(){ 
var rsz_mineImage=new Image(); 
rsz_mineImage.onload=function(){ 
ctx.drawImage(rsz_mineImage , mineX, mineY); 
} 
rsz_mineImage.src="rsz_mineimg.jpg"; 
if (
heroX <= (mineX + 32) 
&& mineX <= (heroX + 32) 
&& heroY <= (mineY + 32) 
&& mineY <= (heroY + 32) 
){ 
rightPressed=false; 
leftPressed=false; 
upPressed=false; 
downPressed=false; 
heroX=5; 
heroY=5;

一个警报不工作

alert("DEATH"); 

} 
} 





setInterval(draw, 10); 
</script> 
</body> 
</html>

来源

2015-12-26 C. Liuzza

您可以发布_without_切断它与你的解释的代码？也许尝试缩小一切看到更清晰？试着在这里粘贴JS：http://jsbeautifier.org/ –

它的工作对我来说警报。您在创建闪烁效果的动画循环中加载了图像。最好将资源加载到画布上，并在图像加载时将它们放在画布上。这样，您不必检查图像是否已加载，并且可以将背景颜色作为替代品。在间隔循环中运行动画也不如使用requestAnimationFrame有效。在键盘输入上也使用preventDefault来防止滚动。

var canvas = document.getElementById("canvas"); 
 
var ctx = canvas.getContext("2d"); 
 
var H = canvas.height; 
 
var W = canvas.width; 
 
var x = 10; 
 
var y = 15; 
 
var rightPressed = false; 
 
var leftPressed = false; 
 
var upPressed = false; 
 
var downPressed = false; 
 
var heroX = 20; 
 
var monsterX = 200; 
 
var monsterY = 200; 
 
var heroY = 20; 
 
var dx = .68; 
 
var dy = .76; 
 
var score = 0; 
 
var monstersCaught = 0; 
 
var ballPX = 32 + (Math.random() * (canvas.width - 64)); 
 
var ballPY = 32 + (Math.random() * (canvas.height - 64)); 
 
var h = 178; 
 
var i = 333; 
 
var mineX = 778; 
 
var mineY = 178; 
 

 
Window.onload = dank(); 
 

 
function dank() { 
 
    alert("How to play: move your hero using the arrow keys, and collect colored  balls for powerups and points!Get the highest score you can without touching a  monster, which makes you start over!Collect the colored balls for more and   better special powerups."); 
 
} 
 
document.addEventListener("keydown", keyDownHandler, false); 
 
document.addEventListener("keyup", keyUpHandler, false); 
 

 
function loadImage(w,h,color,url) { 
 
    var can = document.createElement('canvas'); 
 
    can.width = w; 
 
    can.height = h; 
 
    var ctx = can.getContext('2d'); 
 
    ctx.fillStyle=color; 
 
    ctx.fillRect(0,0,w,h); 
 
    var img = document.createElement('image'); 
 
    img.onLoad = function() { 
 
    ctx.clearRect(0,0,w,h); 
 
    ctx.drawImage(img, 0, 0); 
 
    }; 
 
    img.src=url; 
 
    return can; 
 
} 
 

 
// load assets 
 
var heroImage = loadImage(32,32,'#FF9900',"hero.jpg"); 
 
var monsterImage = loadImage(32,32,'purple',"monster.jpg"); 
 
var rsz_mineImage = loadImage(32,32,'#FF3300',"rsz_mineimg.jpg"); 
 

 
function draw() { 
 
    ctx.clearRect(0, 0, canvas.width, canvas.height); 
 
    ctx.drawImage(heroImage, heroX, heroY); 
 
    dope(); 
 
    checkMonster(); 
 
    drawMines(); 
 
    //checkDeath(); 
 
    requestAnimationFrame(draw); 
 
} 
 

 
function keyDownHandler(e) { 
 
    if (e.keyCode == 39) { 
 
    rightPressed = true; 
 
    } else if (e.keyCode == 37) { 
 
    leftPressed = true; 
 
    } else if (e.keyCode == 40) { 
 
    downPressed = true; 
 
    } else if (e.keyCode == 38) { 
 
    upPressed = true; 
 
    } 
 
    e.preventDefault(); 
 
} 
 

 
function keyUpHandler(e) { 
 
    if (e.keyCode == 39) { 
 
    rightPressed = false; 
 
    } else if (e.keyCode == 37) { 
 
    leftPressed = false; 
 
    } else if (e.keyCode == 40) { 
 
    downPressed = false; 
 
    } else if (e.keyCode == 38) { 
 
    upPressed = false; 
 
    } 
 
    e.preventDefault(); 
 
} 
 

 
function dope() { 
 
    if (rightPressed) { 
 
    heroX += 7; 
 
    } else if (leftPressed) { 
 
    heroX -= 7; 
 
    } else if (upPressed) { 
 
    heroY -= 7; 
 
    } else if (downPressed) { 
 
    heroY += 7; 
 
    } 
 
} 
 

 
function checkMonster() { 
 
    
 
    ctx.drawImage(monsterImage, monsterX, monsterY) 
 
    monsterX += dx; 
 
    monsterY += dy; 
 
    if (monsterX > canvas.width || monsterX < 0) { 
 
    monsterX = -dx; 
 
    } else if (monsterY > canvas.height || monsterY < 0) { 
 
    monsterY = -dy; 
 
    } 
 
    if (
 
    heroX <= (monsterX + 32) && monsterX <= (heroX + 32) && heroY <= (monsterY + 32) && monsterY <= (heroY + 32) 
 
) { 
 
    alert("DEATH"); 
 
    heroY = 5; 
 
    heroX = 5; 
 
    monsterX = 100; 
 
    monsterY = 100; 
 
    upPressed = false; 
 
    downPressed = false; 
 
    leftPressed = false; 
 
    rightPressed = false; 
 

 

 
    } 
 
} 
 

 
function drawMines() { 
 

 
    ctx.drawImage(rsz_mineImage, mineX, mineY); 
 
    
 
    if (
 
    heroX <= (mineX + 32) && mineX <= (heroX + 32) && heroY <= (mineY + 32) && mineY <= (heroY + 32) 
 
) { 
 
    rightPressed = false; 
 
    leftPressed = false; 
 
    upPressed = false; 
 
    downPressed = false; 
 
    heroX = 5; 
 
    heroY = 5; 
 
    alert("DEATH"); 
 

 
    } 
 
} 
 

 
draw();

#canvas { 
 
    width:100%; 
 
    background-color:#eff0de; 
 
} 
 
body { 
 
    background-color:#AADDFF; 
 
}

<canvas id="canvas" width="1300" height="630"></canvas>

来源

2015-12-27 23:20:05 wolfhammer

自己在画布上移动的物体

回答

相关问题