0
안녕하세요 :) 처음에는 끔찍한 영어에 대해 유감스럽게 생각합니다. 나쁜 영어로 나쁜 프랑스 인이지만, 내 재검토가 이해되기를 바랍니다.타워 방어 자바 스크립트 애니메이션
저는 17 세이며 제 졸업생이었습니다. (대학 졸업자를 아십니까?) 대학을 가기 전에 필자는 컴퓨터 과학에 대한 프로젝트를 가지고 있습니다. 내 프로젝트는 그래픽 방어없이 정말 간단하게 자바 스크립트/Html/CSS에서 타워 방어를 만드는 것입니다. 그래서 내 목표는 내 광장 주위에 x mobs를 산란시키는 것입니다.이 mobs는 타워를 돌진 할 것입니다. 2 mobs가 타워에 있다면, 그녀는 파괴된다, 어떤 타워라도 떠난다면, 게임은 사라진다. 그래서, 이것은 내 코드입니다, 나는 당신에게 코드 후에 질문 할 것입니다. animationBis 작동하지 않는, 기능 애니메이션 테스트했지만 사업부는 바닥에 또는 오른쪽 중앙 블록에있는 경우를 제외하고 animation2 일 :
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';
*/
내 질문은 애니메이션에 관한 것입니다. 테스트입니다.하지만 나중에이 애니메이션의 아이디어가 필요하다고 생각합니다. 작동하지 않습니다. Div (군중)는 이동하지만 다른 구역에 있지만 내 블록 중앙에 있지 않은 것처럼 이상한 이동을합니다. 내 생각에 그것은 내 생애의 vitesse 때문에,하지만 난 잘 모르겠다.
내가 할 수있는 또 다른 질문 : 내가 어떻게 군중 "U 서두 르 (타워에서 자동으로 그 위치에서 타워로 이동)"말할 수 있습니까?
보시다시피, 자바 스크립트의 내 수준은 정말 나쁜와 u는 기능을 나에게 대답을 줄 수 있다면, 그래서 난 단지 기능을 사용하여 내가 내 끔찍한 영어 및 들으 죄송 아직도 여전히
: 선호하여 대답과 인내심으로 나를 읽으십시오.
// 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;
}
대문자의 변수는 contants 있습니다 : 안녕
jsfiddle/codepen? – bjb568
질문은 언어와 의미 모두에서 매우 분명하지 않습니다. 아이디어보다는 사실을 요구하십시오. Stackoverflow 반복 occourring 문제에 대한 답변을 제공하기로되어 있습니다. 기본 구조를 설정하는 방법에 대한 도움이 필요하면 프로젝트와 함께 할 수있는 사람을 찾는 것이 가장 좋습니다. 문제는 그러한 사람들을 찾을 수있는 곳입니다. 이것을 jsfiddle (jsfiddle.net)에 넣을 수 있다면 정말 도움이 될 것이므로 직접 볼 수 있습니다. – Sam
기본적으로, 우리가 당신을 유니버시티로 데려 오기를 원합니까? –