canvas: пререрисовака экрана
Здравствуйте люди! Прошу помочь мне сделать перерисовку эрана (в будующим для написания движка). вот есть код:
<html> <body> =S.A= <canvas id="mapclet" width=1000 height=500></canvas> <script> var canvas=document.getElementById("mapclet"); var c=canvas.getContext("2d") c.fillStyle="#00ff00"; c.fillRect(x,y,64,64); </script> </body> </html> как мне канву вызывать через setInterval ? Это, допустим для изменения координат квадрата (для его передвижения или изменения формы). Ну это в принцимпе для манипуляции координатами и параметрами фигур на холсте. Пожалуста помогите или там обьясните как работает. Я не прошу там пошаговых инструкций)))) Заранее спасибо:) ЗЫ: я планирую в этой теме писать про генератор карты на js (для игры). |
Здравствуйте!
Судя по вашему сообщению, вы ну совсем не знаете javascript. Освойте основы языка и вопрос отпадет сам, полностью или частично. А с чем не справитесь - поможем. На сайте javascript можно начать изучать с учебника, раздел Основы javascript. Возможно, вам также понадобится HTML - учебник есть, например, здесь: http://ru.html.net/tutorials/html/ Задавайте конкретные вопросы по ходу дела. |
<canvas width = "100px" height = "100px" style = "border: 3px solid black"></canvas>
<script>
var canvas = document.querySelector("canvas"),
ctx = canvas.getContext("2d"),
x = 50,
y = 50,
speed = 10 ;
ctx.fillStyle = "red" ;
ctx.fillRect(x, y, 10, 10) ;
var i = setInterval(function() {
if(
x + 10 >= canvas.width ||
y + 10 >= canvas.height ||
x <= 0 ||
y <= 0
)
speed = - speed ;
ctx.clearRect(x, y, 10, 10) ;
x += speed ;
y += speed ;
ctx.fillRect(x, y, 10, 10) ;
}, 500) ;
</script>
|
Да я правдо не это имел ввиду. Но все равно спасибо.
|
давайте!) меня интересует
|
я про это изночально говорил:
<!DOCTYPE HTML><canvas id=c width=1000 height=600 </canvas> <script> c= document.getElementById('c');g= c.getContext('2d'); x= 0; y= 0; col_a='#800000'; col_b='#0099cc'; setInterval('run()',1); function run(){ g.fillStyle=col_b; g.fillRect(x,y,10,10); x+=10; if(x==800) {y+=10; x-=800; } } </script> |
g.fillStyle="#00FF00";
g.fillRect(x,y,10,10); Как сделать поворот фигуры вокруг своей оси? Я не про трансформацию системы координат. Заранее спасибо. Ну если не фигуру то допустим спрайт? |
Цитата:
|
нет другого способа?
|
Цитата:
в остальном же: Цитата:
|
можно ли g.rotate поворачивать ТОЛЬКО определенную фигуру , а не все систему координат??????????
|
Цитата:
g.save(); g.rotate(.... g.restore() мы поворачиваем всю систему координат но в конце восстанавливаем предыдущее состояние |
Цитата:
нет фигур на канве после "отрисовки" их . есть канва и всё! |
да, но при перерисовки они есть)))
|
"ещё раз -основы учите" на этом сайте я их прочел и ответа нужного не нашел.
|
Цитата:
это мольберт художника. можно повернуть участок мольберта с картинкой? можно нарисовать на мольберте, а потом это чудесным образом оказалось не нарисовано? Можно, но только сделав копию, с какой в дальнейшем можно работать. Можно запомнить краску какой рисовалось, кисть .... -в общем использованные инструменты, чтоб потом к ним вернуться |
Спасибо. Очень хорошо)
|
а с помощю css можно поварачивать?
|
Писал тут клас планет для создания модели солнечной системы, но чет не че не работает(
вот код: <html><canvas id=c width=500 height=500</canvas> <script> window.onload=function(){ c= document.getElementById('c');g= c.getContext('2d'); var planet=function(w,h,x,y,xCentr,yCentr,rad,speed,an gle,col) { /*w,h это ширина и высота квадрата x,y его положение xCentr,yCentr это точка во круг которой врыщыется квадрат rad это расстояние от центр. до квадрата speed это скорость квадрата angle это угол относительно точки вращения col это цвет квадрата*/ that={ w:w, h:h, x:x, y:y, xCentr:xCentr, yCentr:yCentr, rad:rad, speed:speed, angle:angle, move: function() { x=xCentr+Math.cos(angle)*rad; y=yCentr+Math.sin(angle)*rad; angle+=speed; } draw: function() { g.fillStyle=col; g.fillRect(x,y,w,h); } }; return that; }; var pandora=new planet(10,10,0,0,250,250,100,0.01,0,"#0f0"); setInterval(ris,30); function ris(){ g.clearRect(0,0,500,500); g.fillRect(0,0,500,500); pandora.move(); pandora.draw(); } } </script></html> я так и не полял где ошибка...Помоги исправить пожалуста:) |
<!DOCTYPE html>
<html><canvas id=c width=500 height=500</canvas>
<script>
window.onload=function(){
c= document.getElementById('c');g= c.getContext('2d');
var planet=function(w,h,x,y,xCentr,yCentr,rad,speed,angle,col) {
that={
w:w,
h:h,
x:x,
y:y,
xCentr:xCentr,
yCentr:yCentr,
rad:rad,
speed:speed,
angle:angle,
move: function() {
x=xCentr+Math.cos(angle)*rad;
y=yCentr+Math.sin(angle)*rad;
angle+=speed;
}
,
draw: function() {
g.fillStyle=col;
g.fillRect(x,y,w,h);
}
};
return that;
};
var pandora=new planet(10,10,0,0,250,250,100,0.01,0,"#0f0");
setInterval(ris,30);
function ris(){
g.clearRect(0,0,500,500);
//g.fillRect(0,0,500,500);
pandora.move();
pandora.draw();
}
}
</script></html>
|
Спасибо. Вот этот момент я понял //g.fillRect(0,0,500,500);, но когда я тестил код у меня вообще не чего не выресовывалось. В чем была ошибка?
|
Цитата:
an gle с разрывом в параметрах функции отладчик хрома сразу нашел |
А если есть два класса объектов, то как проверять в них столкновения этих объектов? Допустим пули со стеной. То есть, как это проверять прям в классах этих объектов?
|
c= document.getElementById('c');g= c.getContext('2d');
var gameObject=[]; map=[ 0,0,0,1,0,0,0,0, 0,1,1,1,1,1,1,0, 0,1,1,1,1,1,1,0, 0,1,1,0,0,1,1,0, 1,1,1,0,1,1,1,1, 0,1,1,1,1,1,1,0, 0,1,1,1,1,1,1,0, 0,0,0,1,0,0,0,0 ]; mapClet=50; vx=0;vy=0; var plyer=function(xPl,yPl,col){ vec=0; that={ xPl:xPl, yPl:yPl, col:col, move: function(){ if(key==37){xPl-=mapClet; vec=0} if(key==39){xPl+=mapClet; vec=1} if(key==38){yPl-=mapClet; vec=2} if(key==40){yPl+=mapClet; vec=3} if(key==32){gameObject.push(bulletPlayer(xPl+15,yP l+15,vec,"#000"))} }, draw: function(){ g.fillStyle=col; g.fillRect(xPl,yPl,mapClet,mapClet); } }; return that; }; var mob=function(xMb,yMb,col){ that={ xMb:xMb, yMb:yMb, col:col, move: function(){}, draw: function(){ g.fillStyle=col; g.fillRect(xMb,yMb,mapClet,mapClet); } }; return that; }; var bulletPlayer=function(xBp,yBp,vec,col){ that={ xBp:xBp, yBp:yBp, col:col, vec:vec, move: function(){ if(vec==0){xBp-=mapClet} if(vec==1){xBp+=mapClet} if(vec==2){yBp-=mapClet} if(vec==3){yBp+=mapClet} }, draw: function(){ g.fillStyle=col; g.fillRect(xBp,yBp,20,20); } }; return that; }; var bulletMob=function(xBm,yBm,vec,col){ that={ xBm:xBm, yBm:yBm, vec:vec, col:col, move: function(){}, draw: function(){} }; }; var woll=function(x,y,col){ that={ x:x, y:y, col:col, move: function(){}, draw: function(){ g.fillStyle=col; g.fillRect(x,y,mapClet,mapClet); } }; } setInterval(function(){ g.clearRect(0,0,700,700); for(n=0;n<64;n++){ x=n&7;y=n>>3; if(map[n]==0){vx=x;vy=y} g.fillStyle="#0f0"; g.fillRect(vx*mapClet,vy*mapClet,mapClet,mapClet); } gameObjectFresh=[]; for(i=0;i<gameObject.length;i++){ gameObject[i].move(); gameObject[i].draw(); if(gameObject.flag===false){ gameObjectFresh.push(gameObject[i]); } } gammeObject=gameObjectFresh; },100); gameObject.push(plyer(200,200,"#00f")); gameObject.push(mob(300,300,"#f00")); document.onkeydown = keyDn; document.onkeyup = keyUp; key=0; function keyDn(e) {key = e.which; } function keyUp(e) {key = 0;} [/JS] вот допустим как здесь сделать проверку столкновения танка с мобом и стенами, пуль с танком, мобом и стенами? Это я танчики пишу:) помогите пожалуйста =) |
Просто на основе этого можно будет писать самые разные игры! И очень просто! Вот только еще же могут быть столкновения двух мобов... То есть если два объекта одного класса сталкиваются как быть? Как проверять их столкновения?
|
хотя это уже выходит за темы этого форума...
|
это, типа ни кто не знает???
|
| Часовой пояс GMT +3, время: 03:23. |