Javascript 对象在画布中自行移动
对不起，代码太长了。当英雄图像距离地雷或怪物图像最多32像素时，应将其传输回繁殖点，x轴为5像素，y轴为5像素。英雄形象被正确传送，警报不起作用。提前感谢您的任何想法或建议Javascript 对象在画布中自行移动,javascript,html,canvas,alerts,Javascript,Html,Canvas,Alerts,对不起，代码太长了。当英雄图像距离地雷或怪物图像最多32像素时，应将其传输回繁殖点，x轴为5像素，y轴为5像素。英雄形象被正确传送，警报不起作用。提前感谢您的任何想法或建议 <html> <style> </style> <body background="background.jpg"> <canvas id="canvas" width="1300" height="630"></canvas> <script&g
<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)
) {
var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（“2d”）；
var H=画布高度；
var W=画布宽度；
var x=10；
变量y=15；
var-rightspressed=false；
var leftPressed=false；
var upPressed=假；
var-downPressed=false；
var-heroX=20；
var=x=200；
var=200；
var heroY=20；
var dx=.68；
var-dy=.76；
var得分=0；
var monstersCaught=0；
var ballPX=32+（Math.random（）*（canvas.width-64））；
var ballPY=32+（Math.random（）*（canvas.height-64））；
var h=178；
变量i=333；
var-mineX=778；
var mineY=178；
Window.onload=dank（）；
函数dank（）{
警告（“如何玩：使用箭头键移动你的英雄，收集彩色球以获得力量和分数！在不接触怪物的情况下获得最高分数，这会让你重新开始！收集彩色球以获得更多更好的特殊力量。”）；
}
文档。addEventListener（“keydown”，keyDownHandler，false）；
文件。addEventListener（“keyup”，keyUpHandler，false）；
函数绘图（）{
clearRect（0，0，canvas.width，canvas.height）；
var-mage=新图像（）；
onload=函数（）{
ctx.drawImage（英雄法师、英雄、英雄）；
}
heroMage.src=“hero.jpg”；
兴奋剂（）；
方格怪物（）；
抽地雷（）；
checkDeath（）；
}
函数keyDownHandler（e）{
如果（e.keyCode==39）{
rightspressed=true；
}
否则如果（e.keyCode==37）{
leftPressed=true；
}
否则如果（e.keyCode==40）{
downPressed=true；
}
否则如果（e.keyCode==38）{
upPressed=true；
}
}
函数keyUpHandler（e）{
如果（e.keyCode==39）{
右压=假；
}
否则如果（e.keyCode==37）{
leftPressed=false；
}
否则如果（e.keyCode==40）{
按下=假；
}
否则如果（e.keyCode==38）{
upPressed=false；
}
}
函数dope（）{
如果（右键按下）{
heroX+=7；
}
else if（左键按下）{
heroX-=7；
}
否则，如果（增加）{
heroY-=7；
}
else if（按下）{
heroY+=7；
}
}
函数checkMonster（）{
var monsterImage=新图像（）；
monsterImage.onload=function（）{
ctx.drawImage（怪物图像，怪物x，怪物y）
}
monsterImage.src=“monster.jpg”；
x+=dx；
怪物+=dy；
如果（monsterX>canvas.width | | | monsterXcanvas.height | | | monsterY对我有效。你在动画循环中加载了图像，这会产生闪烁效果。最好将你的资产加载到画布上，并在加载图像时将其放置在画布上。这样你就不必检查图像是否已加载，也可以有背景色作为替身。在间隔循环中运行动画的效率也不如使用requestAnimationFrame。还要在关键点输入上使用preventDefault
，以防止滚动
var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（“2d”）；
var H=画布高度；
var W=画布宽度；
var x=10；
变量y=15；
var-rightspressed=false；
var leftPressed=false；
var upPressed=假；
var-downPressed=false；
var-heroX=20；
var=x=200；
var=200；
var heroY=20；
var dx=.68；
var-dy=.76；
var得分=0；
var monstersCaught=0；
var ballPX=32+（Math.random（）*（canvas.width-64））；
var ballPY=32+（Math.random（）*（canvas.height-64））；
var h=178；
变量i=333；
var-mineX=778；
var mineY=178；
Window.onload=dank（）；
函数dank（）{
警告（“如何玩：使用箭头键移动你的英雄，收集彩色球以获得力量和分数！在不接触怪物的情况下获得最高分数，这会让你重新开始！收集彩色球以获得更多更好的特殊力量。”）；
}
文档。addEventListener（“keydown”，keyDownHandler，false）；
文件。addEventListener（“keyup”，keyUpHandler，false）；
函数loadImage（w、h、颜色、url）{
var can=document.createElement（'canvas'）；
can.width=w；
can.height=h；
var ctx=can.getContext（'2d'）；
ctx.fillStyle=颜色；
ctx.fillRect（0,0，w，h）；
var img=document.createElement（'image'）；
img.onLoad=函数（）{
ctx.clearRect（0,0，w，h）；
ctx.drawImage（img，0,0）；
};
src=url；
还可以；
}
//装载资产
var-heromage=loadImage（32,32，#FF9900'，“hero.jpg”）；
var monsterImage=loadImage（32,32，'purple'，'monster.jpg'）；
var rsz_mineImage=loadImage（32,32，#FF3300'，“rsz_mineimg.jpg”）；
函数绘图（）{
clearRect（0，0，canvas.width，canvas.height）；
ctx.drawImage（英雄法师、英雄、英雄）；
兴奋剂（）；
方格怪物（）；
抽地雷（）；
//checkDeath（）；
请求动画帧（绘制）；
}
函数keyDownHandler（e）{
如果（e.keyCode==39）{
rightspressed=true；
}否则如果（e.keyCode==37）{
leftPressed=true；
}否则如果（e.keyCode==40）{
downPressed=true；
}否则如果（e.keyCode==38）{
upPressed=true；
}
e、 预防默认值（）；
}
函数keyUpHandler（e）{
如果（e.keyCode==39）{
右压=假；
}否则如果（e.keyCode==37）{
leftPressed=false；
}否则如果（e.keyCode==40）{
按下=假；
}否则如果（e.keyCode==38）{
upPressed=false；
}
e、 预防默认值（）；
}
函数dope（）{
如果（右键按下）{
heroX+=7；
}else if（左键按下）{
heroX-=7；
}否则，如果（增加）{
heroY-=7；
}else if（按下）{
heroY+=7；
}
}
函数checkMonster（）{
ctx.drawImage（怪物图像，怪物x，怪物y）
x+=dx；
怪物+=dy；
if（monsterX>canvas.width | | monsterX<0）{
monsterX=-dx；
}else if（monsterY>canvas.height | | monsterY<0）{
怪物=-dy；
}
如果(
heroX你能在不加解释的情况下发布代码吗？也许可以尝试将所有内容缩进一点以便看得更清楚？尝试将JS粘贴到其中：
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>