嗨:)首先抱歉我的英语很糟糕,我的英语很差,但是我希望我的辞职是可以理解的。
所以,我17岁,我的bac(你知道这个毕业生吗?)在大学之前,我有一个项目,我的计算机科学。我的项目是简单地在javascript / Html / Css中创建一个塔防,没有graphism等。所以我的目标是在我的广场附近产生x小怪,然后这些小怪会冲塔,如果塔上有2个小怪,她被摧毁,如果有任何塔离开,游戏就会丢失。所以,这是我的代码,我会在代码后问你问题。
var canvas = document.getElementById("fenetreJeu");
var ctx = canvas.getContext("2d");
var mob = document.getElementById("mobile");
var fenetreDuJeuHauteur = canvas.height-5;
var fenetreDuJeuLargeur = canvas.width-5;
var largeurMobile = mob.offsetLeft;
var vx = 2; // vitesse en pixel vers la droite
var xmin = 0; // limite gauche
var xmax = fenetreDuJeuLargeur;
var hauteurMobile = mob.offsetTop; //ordonnée du mobile
var vy= 2;
var ymin = 0;
var ymax=fenetreDuJeuHauteur;
var timer1;
window.onload = function()
{
var debut = document.getElementById("start");
var arret = document.getElementById("stop");
var blocCentrale = document.getElementById("blocCentrale");
var tour = document.getElementById("tour");
debut.addEventListener("click",debutPartie);
arret.addEventListener("click",pause);
quadrillage();
generationMob();
ensembleMob = document.getElementsByClassName("monstre");
ensembleMob[0].style.backgroundColor = "blue";
}
function generationMob()
{
for(i = 0; i < 10; i++){
creationPositionnement();
}
}
function creationPositionnement(){
var ensembleMob = [];
var mobCree = document.createElement("div");
mobCree.className = "monstre";
mobCree.style.width = "5px";
mobCree.style.height = "5px";
mobCree.style.backgroundColor = "red";
mobCree.style.position = "absolute";
ensembleMob = document.getElementsByClassName("monstre");
var mobCreeHauteur = mobCree.style.top = Math.floor(Math.random()*595)+"px";
var mobCreeLargeur = mobCree.style.left = Math.floor(Math.random()*595)+"px";
var aleatoirePosition = Math.floor((Math.random()*4)+1);
if (aleatoirePosition == 1){
if (mobCreeHauteur != 0){
mobCree.style.left = "0"+"px";}
}if (aleatoirePosition == 2){
if (mobCreeLargeur != 0){
mobCree.style.top = "0"+"px";}
}if (aleatoirePosition == 3){
if (mobCreeHauteur != 0){
mobCree.style.left = "595"+"px";}
}if (aleatoirePosition == 4){
if (mobCreeLargeur != 0){
mobCree.style.top = "595"+"px";}
}
blocCentrale.appendChild(mobCree);
return ensembleMob;
}
function positionCurseur ()
{
}
function quadrillage (){
var larg = 50;
var haut = 50;
for (var i = 0; i < 40;i++){
ctx.beginPath();
ctx.moveTo(larg,0);
ctx.lineTo(larg,600);
ctx.stroke();
larg +=50;
}
for (var i = 0; i < 20;i++){
ctx.beginPath();
ctx.moveTo(0,haut);
ctx.lineTo(canvas.width,haut);
ctx.stroke();
haut +=50;
}
}
function debutPartie(){
// lance le changement de position tout les 0,01 secondes.
clearInterval(timer1); //arrête un éventuel timer déjà en place.
timer1 = setInterval(animation2,10); // Lance le déplacement
}
function pause(){
clearInterval(timer1);
}
var animation = function() {
// déplace le mobile de Vx pixels vers la droite et change Vx si on arrive au bord.
largeurMobile = largeurMobile + Vx;
if ((largeurMobile<=xmin) || (largeurMobile>=xmax)) {
Vx=-Vx; // Si on est au bord, on change le sens de déplacement.
}
mobile.style.left=largeurMobile+"px"; // déplacement de l'objet à l'écran.
hauteurMobile = hauteurMobile + Vy;
if ((hauteurMobile<=ymin) || (hauteurMobile>=ymax)) {
Vy=-Vy; // Si on est au bord, on change le sens de déplacement.
}
mobile.style.top=hauteurMobile+"px"; // déplacement de l'objet à l'écran.
}
function animationBis(){
for (i = 0; i < 10; i++){
ensembleMob[i].style.left = ensembleMob[i].offsetLeft + vy + "px";
if (ensembleMob[i].offsetLeft <= 0 || ensembleMob[i].offsetLeft >= 595){
vx =- vx;
}
ensembleMob[i].style.top = ensembleMob[i].offsetTop + vx + "px";
if (ensembleMob[i].offsetTop <= 0 || ensembleMob[i].offsetTop >= 595){
vy =- vy;
}
}
}
function animation2(){
ensembleMob[0].style.left = ensembleMob[0].offsetLeft + vy + "px";
if (ensembleMob[0].offsetLeft <= 0 || ensembleMob[0].offsetLeft >= 595){
vy =- vy;
}
ensembleMob[0].style.top = ensembleMob[0].offsetTop + vx + "px";
if (ensembleMob[0].offsetTop <= 0 || ensembleMob[0].offsetTop >= 595){
vx =- vx;
}
}
// calculer la position d'un element sur la page
/*calcul la position d'un élément sur la page
var item = document.getElementById(img);
var parent = item.offsetParent;
var posElmX = 0;
var posElmY = 0;
while(parent) {
posElmX += parent.offsetLeft;
posElmY += parent.offsetTop;
parent = parent.offsetParent;
}
var positionX = item.offsetLeft + posElmX;
var positionY = item.offsetTop + posElmY;
changer les dimension d'un élément
item.style.width = item.offsetWidth+10+'px';
item.style.height = item.offsetHeight+5+'px';
*/
不要关心某些功能,例如:函数动画是一个测试,animationBis不起作用,但animation2工作,除非div位于块中央的底部或右侧。
所以我的问题是关于animationBis它是一个“测试”但我想我以后需要这个功能的想法为最后的动画,它不起作用。 Div(暴民)移动是的,但真的很奇怪的举动,就像他们在另一个div中但不在我的区块中央。我想这是因为我的var vitesse,但我不确定。
另一个问题,如果我可以:) 我怎么能说暴徒“你冲塔(自动从他的位置移动到塔上)”?
如你所见,我的javascript级别非常糟糕,我只使用函数,所以如果你能给我一个我更喜欢的函数答案:)
仍然并且仍然抱歉我可怕的英语和thx的答案和耐心阅读我。再见:)
答案 0 :(得分:0)
我将举例说明使用两种非常方便的技术:
// Define state variables like so:
var MOVING_LEFT = 1;
var MOVING_RIGHT = 2;
var MOVING_UP = 3;
var MOVING_DOWN = 4;
// Use these human-readable variable names to set states
var current_moving_direction = MOVING_RIGHT;
// Use these variables to check for the state again
switch (current_moving_direction){
case MOVING_LEFT:
// Execute code for moving left
break;
case MOVING_RIGHT:
// Execute code for moving right
break;
case MOVING_UP:
// Execute code for moving up
break;
case MOVING_DOWN:
// Execute code for moving down
break;
}
大写字母的变量是含义。它们包含您必须以自己的方式管理自己的数字1-4。那样,你从这些数字中看到的就是他们的意思。不过,您仍然可以检查现在存储在其中的数字。
switch-case语句为每个'case'标签定义的所有状态检查变量'current_moving_direction'。一旦条件成立,“休息”对于打破开关案例是必要的。