物体在画布上自行移动

时间：2015-12-26 02:51:51

标签： javascript html5 canvas alerts

对不起，代码太久了。当英雄形象离矿区或怪物图像最多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>

1 个答案:

答案 0 :(得分：0)

这对我有用。您在动画循环中加载了图像，这会产生闪烁效果。最好将资源加载到画布上，并在图像加载时将它们放在画布上。这样您就不必检查图像是否已加载并且可以将背景颜色作为替代。在间隔循环中运行动画也不如使用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>

相关问题
最新问题