Javascript 使用html/js的动画和随机化程序_Javascript_Html_Canvas

Javascript 使用html/js的动画和随机化程序

javascript html canvas

Javascript 使用html/js的动画和随机化程序,javascript,html,canvas,Javascript,Html,Canvas,我有一页代码，其中我希望3“ghost.png”显示在画布上，使用math.random，只需按下一个按钮，就可以在画布上显示随机坐标。除此之外，我还尝试使用另一个函数在画布上绘制“sac.jpg”，以及在相同位置绘制相同的重影，因为它们已由math.random确定。然后，在相同的功能中，我希望能够使用键盘上的箭头键设置图像“sac.png”的动画，而无需使鬼图像随之移动。有了这个目标，我试图创建一个代码，但它似乎不起作用。有人能解释一下吗概述：功能hasard（按下按钮时激活）： a）

我有一页代码，其中我希望3“ghost.png”显示在画布上，使用math.random，只需按下一个按钮，就可以在画布上显示随机坐标。除此之外，我还尝试使用另一个函数在画布上绘制“sac.jpg”，以及在相同位置绘制相同的重影，因为它们已由math.random确定。然后，在相同的功能中，我希望能够使用键盘上的箭头键设置图像“sac.png”的动画，而无需使鬼图像随之移动。有了这个目标，我试图创建一个代码，但它似乎不起作用。有人能解释一下吗

概述：功能hasard（按下按钮时激活）： a） math.random 6次选择同一图像3的x、y坐标 b）将图像放入变量中

功能Desiner（按下箭头键时激活）： a）画背景 b）每次从hasard函数在同一个点上绘制图像，直到我按下第一个函数中的按钮以随机化一对新坐标。 c）绘制图像“sac.gif”，并编程使其能够使用箭头键移动

<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
  <link rel="stylesheet" href="Jeu.css">
  </head>
  <body>

    <canvas id="canvas" width="400" height="400"
    style="border-color: 'black'; border-width: 3px; border-style: solid">
      </canvas>
<br>
  <button type="button"onclick="hasard()"><img src="start.jpg"></button>

<script type="text/javascript">

var canvas = document.getElementById("canvas");
var contexte = canvas.getContext("2d");
var x;
var y;
var x1;
var y1;
var x2;
var y2;

var ghost = new Image();
ghost.src = "ghost.png";

function hasard(){
x = 32 +(Math.random() * (400-64));
y = 32 +(Math.random() * (400-64));
x1 = 32 +(Math.random() * (400-64));
y1 = 32 +(Math.random() * (400-64));
x2 = 32 +(Math.random() * (400-64));
y2 = 32 +(Math.random() * (400-64));

contexte.drawImage(ghost,x,y,60,60)
contexte.drawImage(ghost,x1,y1,60,60)
contexte.drawImage(ghost,x2,y2,60,60)
};

var bg = new Image();
bg.src = 'haunted.jpg';

var sac = new Image();
sac.src = "sac.gif";

var a=100;
var b=100;
var dx=0;
var dy=0;

T_fleche_gauche = 37;
T_fleche_droite = 39;
T_fleche_haut = 38;
T_fleche_bas = 40;

document.onkeydown = miseAJourTouche;

function miseAJourTouche(e){

toucheCourante = e.keyCode;

if (toucheCourante == T_fleche_gauche){
dx= -1;
dy=0;
draw(dx,dy);
}
if (toucheCourante == T_fleche_droite){
dx= 1;
dy=0;
draw(dx,dy);
}
if (toucheCourante == T_fleche_haut){
dy= -1;
dx=0;
draw(dx,dy);
}
if (toucheCourante == T_fleche_bas){
dy= 1;
dx=0;
draw(dx,dy);
}
}

function dessiner(x,y){

bg.addEventListener('load', function() {

contexte.drawImage(bg, 100, 20, 200, 200);

image.onload = function(){
contexte.drawImage(ghost,x,y,60,60)
contexte.drawImage(ghost,x1,y1,60,60)
contexte.drawImage(ghost,x2,y2,60,60)

image.onload = function(){

context.drawImage(sac, 0, 0, 70,90);
context.translate(10+a,10+b);

a = a+dx;
b = b+dy;

if (a > 400) a = -80;  if (a <-80) a = 400;
if (b > 400) b = -40;  if (b <-40) b = 400;
}
window.requestAnimFrame(function() { dessiner(dx,dy) });
}
dessiner();
};
</script>
</body>
</html>




var canvas=document.getElementById（“canvas”）；
var contexte=canvas.getContext（“2d”）；
var x；
变量y；
var-x1；
变量y1；
var-x2；
变量y2；
var ghost=新图像（）；
ghost.src=“ghost.png”；
函数hasard（）{
x=32+（Math.random（）*（400-64））；
y=32+（Math.random（）*（400-64））；
x1=32+（数学随机（）*（400-64））；
y1=32+（Math.random（）*（400-64））；
x2=32+（Math.random（）*（400-64））；
y2=32+（Math.random（）*（400-64））；
上下文drawImage（ghost，x，y，60,60）
上下文drawImage（ghost，x1，y1,60,60）
上下文drawImage（ghost，x2，y2,60,60）
};
var bg=新图像（）；
bg.src='闹鬼的.jpg'；
var sac=新图像（）；
sac.src=“sac.gif”；
var a=100；
var b=100；
var-dx=0；
var-dy=0；
T_fleche_gauche=37；
T_fleche_droite=39；
T_fleche_haut=38；
T_fleche_bas=40；
document.onkeydown=miseAJourTouche；
miseAJourTouche（e）功能{
ToucheCournate=e.keyCode；
if（touchecourant==T\u fleche\u gauche）{
dx=-1；
dy=0；
绘制（dx，dy）；
}
如果（接触铀==T_fleche_droite）{
dx=1；
dy=0；
绘制（dx，dy）；
}
如果（touchecourant==T\u fleche\u haut）{
dy=-1；
dx=0；
绘制（dx，dy）；
}
如果（touchecourant==T\u fleche\u bas）{
dy=1；
dx=0；
绘制（dx，dy）；
}
}
函数dessiner（x，y）{
bg.addEventListener（'load'，function（））{
背景图像（背景图像，100，20，200，200）；
image.onload=函数（）{
上下文drawImage（ghost，x，y，60,60）
上下文drawImage（ghost，x1，y1,60,60）
上下文drawImage（ghost，x2，y2,60,60）
image.onload=函数（）{
背景图像（sac，0,0,70,90）；
语境。翻译（10+a，10+b）；
a=a+dx；
b=b+dy；
如果（a>400）a=-80；如果（a 400）b=-40；如果（b从我所能看出的来看，你正在尝试为鬼魂和袋子制作动画，袋子是玩家可以控制的物品
虽然我无法为您调试程序，但我可以告诉您使用浏览器的开发工具。F12
或Fn+F12
将带您到Inspector，其中一个选项卡是console
现在，在您的程序中，我看到您将image.onload
分配给两个函数，其中一个函数缺少一个右大括号
image.onload = function(){
contexte.drawImage(ghost,x,y,60,60)
contexte.drawImage(ghost,x1,y1,60,60)
contexte.drawImage(ghost,x2,y2,60,60)

image.onload = function(){

context.drawImage(sac, 0, 0, 70,90);
context.translate(10+a,10+b);

a = a+dx;
b = b+dy;

if (a > 400) a = -80;  if (a <-80) a = 400;
if (b > 400) b = -40;  if (b <-40) b = 400;
}

image.onload=function（）{
上下文drawImage（ghost，x，y，60,60）
上下文drawImage（ghost，x1，y1,60,60）
上下文drawImage（ghost，x2，y2,60,60）
image.onload=函数（）{
背景图像（sac，0,0,70,90）；
语境。翻译（10+a，10+b）；
a=a+dx；
b=b+dy；
如果（a>400）a=-80；如果（a>400）b=-40；如果（b如果我理解得很好，你想用random位置画3个重影，而包也在random位置，并且想用箭头键移动它，对吗
那么，我可以提出几点建议：
不要把更新代码和绘图代码放在一起。你有一个绘图函数dessiner（x，y）
，但你也在hasard（）
和miseAJourTouche（e）
函数中绘图。这会使事情变得混乱，无助于调试
进一步分解：例如，在hasard（）
函数中，您将计算32+（Math.random（）*（400-64））；
6次。相反，您可以使用函数在两个值之间生成一个随机数，然后在init（）中初始化值
函数。您可以初始化其中的所有变量，也可以加载图像。根据您的目标，您还可以使用对象，例如将初始化其坐标的Ghost
对象，以及它自己的draw（）
方法等。对于其他对象，这可能会简单得多
保持一致：如果你在+
前后都放上空格，那么就一直这样做。不要在同一个代码中使用多种语言，你使用英语和法语（而英语在寻求帮助时更容易）。此外，你还可以使用IDE美化器功能或在线工具（我用过）使代码更具可读性或发现键入问题，如缺少大括号
我冒昧地重构了一下您的代码：
注释：

我没有写任何条件来防止在没有键的情况下刷新
按下，但很容易添加
我评论了背景绘图部分，因为我没有图像
我还注释了一些我没有使用的变量

我希望这能有所帮助。
为什么抄袭我的答案？这也是我的第一次：(