помогите с игрой [Архив форума]

Просмотр полной версии : помогите с игрой

nub

18.11.2013, 16:57

пишу игру помогите сделать радиус порождения для оружия
HTML<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>333</title>
</head>
<body>

<div id="menu">
<img src="120px-Молот.png" id="mol">
<img src="120px-Базука.png" id="baz">
<img src="120px-Бомбардировка.png" id="boom">
<img src="Динамит.png" id="tnt">
</div>

<script src="js.js"></script>
</body>
</html>
jsvar a=document.createElement('mol');
mol.style.width="120px";
mol.style.height="120px";
mol.style.position='absolute';
mol.onclick=function cur(){
document.body.style.cursor = 'url("32p.png"), default';
}
document.body.appendChild(a);

var b=document.createElement('baz');
baz.style.top="120px";
baz.style.width="120px";
baz.style.height="120px";
baz.style.position='absolute';
baz.onclick=function changeCursor(){
document.body.style.cursor = 'url("32px-Базука.png"), default';
}
document.body.appendChild(b);

var c=document.createElement('boom');
boom.style.top="240px";
boom.style.width="120px";
boom.style.height="120px";
boom.style.position='absolute';
boom.onclick=function changeCursor(){
document.body.style.cursor = 'url("32px-Бомбардировка.png"), default';
}
document.body.appendChild(c);

var d=document.createElement('tnt');
tnt.style.top="360px";
tnt.style.width="120px";
tnt.style.height="120px";
tnt.style.position='absolute';
tnt.onclick=function changeCursor(){
document.body.style.cursor = 'url("32px-Динамит.png"), default';
}
document.body.appendChild(d);

var test=document.createElement('menu');
menu.style.backgroundColor=
menu.style.zIndex=10;
menu.style.width="160px";
menu.style.height="600px";
menu.style.position='absolute';
menu.style.left="-155px";

menu.onmouseover=azz;
function azz(event) {
var left = -155;

function frame() {

left++;
menu.style.left = left + 'px'

if (left == 0) {
clearInterval(timer1);
}
}
var timer1 = setInterval(frame, 10)
}
menu.onmouseout=az;
function az(event) {
var left = 0;

function frame() {

left--;
menu.style.left = left + 'px'

if (left == -155) {
clearInterval(timer1);
}
}
var timer1 = setInterval(frame, 10)
}
document.body.appendChild(test);

var fon = document.createElement('div');
fon.style.width = '100%';
fon.style.height = '100%';
fon.style.position = 'absolute';
fon.style.backgroundImage = "url(trava.jpg)";
document.body.appendChild(fon);

var p = document.createElement('div');
p.style.width = '100px';
p.style.zIndex=1000;
p.style.height = '79px';
p.style.backgroundImage = "url('p2.gif')";
p.style.position = 'absolute';
p.style.top = '50%';
p.style.left = '50%';
document.body.appendChild(p);

function povtor(){
var bunny = document.createElement('div');
bunny.style.width = '30px';
bunny.style.height = '30px';
bunny.style.backgroundImage = "url('z1.gif')";
bunny.style.position = 'absolute';
y = Math.random()*600;
x = Math.random()*1200;
bunny.style.top = y+'px';
bunny.style.left = x+'px';
bunny.onclick=function(event) {event.target.style.display='none';}
document.body.appendChild(bunny);
function move(event) {
var left =parseInt(bunny.style.left, 10);
function frame() {
if (left<683){left++;
bunny.style.left = left + 'px'}
else if (left <= 683) {
} else {
left--;
bunny.style.left = left + 'px'
}
bunny.style.left = left + 'px'

if (left == 683) {
clearInterval(timer1);
}
}
var timer1 = setInterval(frame, 10)

var top =parseInt(bunny.style.top, 10);
function frame2() {
if(top<360){top++;
bunny.style.top = top + 'px'}
else if(top>360){
top--;
bunny.style.top = top + 'px'
}

if (top == 360) {
clearInterval(timer2);
}
}
var timer2 = setInterval(frame2, 10)
}
setTimeout(move,1000);

}
setInterval(povtor,1000)
криво залито http://learn.javascript.ru/play/7VG9B

nub

18.11.2013, 23:22

чтоб по клику на bunny например в радиусе 30 пикселей исчезли остальные bunny как это реализовать на js

ksa

19.11.2013, 09:38

помогите сделать радиус порождения для оружия
...
чтоб по клику на bunny например в радиусе 30 пикселей исчезли остальные bunny как это реализовать
Дык (http://yandex.gik-team.com/?q=%D0%BF%D0%BE%D0%BF%D0%B0%D0%B4%D0%B0%D0%B5%D1%8 2+%D0%BB%D0%B8+%D1%82%D0%BE%D1%87%D0%BA%D0%B0+%D0% B2+%D0%BA%D1%80%D1%83%D0%B3)...

nub

19.11.2013, 12:41

ksa,
спасибо я искал как это реализовать на js не нашёл

ksa

19.11.2013, 13:02

я искал как это реализовать на js не нашёл
Не нашел как посчитать разность двух чисел и модуль числа? :blink:

nub

20.11.2013, 16:23

Не нашел как посчитать разность двух чисел и модуль числа? :blink:

сам смысл понятен но в плане кода не очень нужно выташити координаты из bunny и сравнивать с другими координатами bunny с этим проблема

ksa

20.11.2013, 16:40

нужно выташити координаты из bunny и сравнивать с другими координатами bunny с этим проблема
На то есть статейка! ;)
http://javascript.ru/ui/offset

nub

28.11.2013, 17:14

сделала массив из кроликов и определил координаты как теперь их состыковать?http://learn.javascript.ru/play/4kokh

рони

28.11.2013, 17:31

nub,
клик по кролику должен выдавать его координаты -- потом идти по массиву и смотреть какие ещё кролики лежать в радиусе 30 пикселей от этих координат

рони

28.11.2013, 21:35

nub,
Раз, два, три, четыре, пять, Вышел зайчик погулять, Вдруг охотник выбегает, Прямо в зайчика стреляет. Пиф - паф ой-ой-ой Умирает зайчик мой.
базука - радиус поражения 30, 100, 200
+ подсчёт тушек
зайцы размножаются бесконечно, но не более 25 штук на поле
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<style type="text/css">
body{
background: url(http://learn.javascript.ru/files/play/52/8a/528a0db7e024b.jpg) #008000;
color: #FFFFFF;
font-size: x-large;
}
</style>
</head>

<body>
<div id="ok">0</div>
<input type="radio" name="boom" value="30" id="boom30" checked="checked" ><label for="boom30">30</label>
<input type="radio" name="boom" value="100" id="boom100"><label for="boom100">100</label>
<input type="radio" name="boom" value="200" id="boom200"><label for="boom200">200</label>
<script>
var random = function (b) {
return Math.ceil(Math.random() * b)
}, rabbitsArray = [],
win = 0;

function unit() {
for (var b = rabbitsArray.length; 25 > b; b++) {
rabbitsArray[b] = [random(400), random(800)];
var c = rabbitsArray[b];
c.bunny = document.createElement("div");
var a = c.bunny;
a.style.width = "30px";
a.style.height = "30px";
a.style.backgroundImage = "url('http://learn.javascript.ru/files/play/52/8a/528a0db80b9f9.gif')";
a.style.backgroundPosition = "center center";
a.style.backgroundRepeat = "no-repeat";
a.style.position = "absolute";
a.style.top = c[0] + "px";
a.style.left = c[1] + "px";
document.body.appendChild(a)
}
}
unit();

function bum(b) {
var boom = document.querySelector(':checked').value;
for (var c = rabbitsArray.length - 1, a; a = rabbitsArray[c]; c--) {
var d = Math.pow(a[0] - (b[0] - 15), 2) + Math.pow(a[1] - (b[1] - 15), 2),
d = Math.sqrt(d);
boom > d && (win++, document.getElementById("ok").innerHTML = win, a.bunny.style.border = "#FF0000 1px solid", a = rabbitsArray.splice(c, 1), window.setTimeout(function (a) {
return function () {
document.body.removeChild(a)
}
}(a[0].bunny), 500))
}
unit()
}
document.onclick = function (b) {
b = b || event;
bum([b.clientY, b.clientX])
};
</script>
</body>

</html>

nub

28.11.2013, 22:11

гигантское спасибо рони, только будит ли работать если им движение задать?

рони

29.11.2013, 02:29

только будит ли работать если им движение задать?
:write:
на 10 спрятавшемся в кролчатнике игра заканчивается
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<style type="text/css">
body{
background: url(http://learn.javascript.ru/files/play/52/8a/528a0db7e024b.jpg) #008000;
color: #FFFFFF;
font-size: x-large;
}
</style>
</head>

<body>
<div id="ok">0</div> <div id="cl">0</div>
<input type="radio" name="boom" value="30" id="boom30" checked="checked" ><label for="boom30">30</label>
<input type="radio" name="boom" value="100" id="boom100"><label for="boom100">100</label>
<input type="radio" name="boom" value="200" id="boom200"><label for="boom200">200</label>
<script>
var p = document.createElement("div");
p.style.width = "100px";
p.style.zIndex = -1E3;
p.style.height = "79px";
p.style.backgroundImage = "url('http://learn.javascript.ru/files/play/52/8a/528a0db7774f9.gif')";
p.style.position = "absolute";
p.style.top = "155px";
p.style.left = "365px";
document.body.appendChild(p);
var random = function (b) {
return Math.ceil(Math.random() * b)
}, rabbitsArray = [],
win = 0,
cln = 0,
timer;

function unit() {
if (-10 >= cln) return !1;
for (var b = rabbitsArray.length; 10 > b; b++) {
rabbitsArray[b] = [random(400), random(800)];
var e = rabbitsArray[b];
e.start = (new Date).getTime();
e.duration = 5E3 + random(2E4);
e.bunny = document.createElement("div");
var a = e.bunny;
a.style.width = "30px";
a.style.height = "30px";
a.style.backgroundImage = "url('http://learn.javascript.ru/files/play/52/8a/528a0db80b9f9.gif')";
a.style.backgroundPosition = "center center";
a.style.backgroundRepeat = "no-repeat";
a.style.position = "absolute";
a.style.top = e[0] + "px";
a.style.left = e[1] + "px";
document.body.appendChild(a)
}
move()
}
unit();

function move() {
function b(a) {
if (0.3 > a) return 49.4 * Math.pow(a, 4);
if (0.4 > a) return 9 * a - 2.3;
if (0.5 > a) return -13 * a + 6.5;
if (0.6 > a) return 4 * a - 2;
if (0.7 > a) return 0.4;
if (0.75 > a) return 4 * a - 2.4;
if (0.8 > a) return -4 * a + 3.6;
if (0.8 <= a) return 1 - Math.sin(Math.acos(a))
}
if (-10 == cln) return !1;
window.clearTimeout(timer);
for (var e = 0; rabbitsArray.length > e; e++) {
var a = [200, 400],
c = rabbitsArray[e],
d = c.bunny,
f = ((new Date).getTime() - c.start) / c.duration,
g = (a[0] - c[0]) * b(f) + c[0];
d.style.top = g + "px";
g = (a[1] - c[1]) * f + c[1];
d.style.left = g + "px";
1 < f && (document.getElementById("cl").innerHTML = --cln, d.style.border = "#FFFF00 1px solid", d.style.top = a[0] + "px", d.style.left = a[1] + "px", d = rabbitsArray.splice(c, 1), window.setTimeout(function (a) {
return function () {
document.body.removeChild(a)
}
}(d[0].bunny), 1E3))
} - 10 < cln ? timer = window.setTimeout(move, 50) : alert("end")
}

function bum(b) {
for (var e = document.querySelector(":checked").value, a = rabbitsArray.length - 1, c; c = rabbitsArray[a]; a--) {
var d = parseInt(c.bunny.style.top, 10),
f = parseInt(c.bunny.style.left, 10),
d = Math.pow(d - (b[0] - 15), 2) + Math.pow(f - (b[1] - 15), 2),
d = Math.sqrt(d);
e > d && (win++, document.getElementById("ok").innerHTML = win, c.bunny.style.border = "#FF0000 1px solid", c = rabbitsArray.splice(a, 1), window.setTimeout(function (a) {
return function () {
document.body.removeChild(a)
}
}(c[0].bunny), 500))
}
window.setTimeout(unit, 1E3)
}
document.onclick = function (b) {
if (-10 >= cln) return !1;
b = b || event;
bum([b.clientY, b.clientX])
};
</script>
</body>

</html>

zerofx

11.01.2014, 14:29

Привет, извините - но может подскажете ... как реализовать игру про которую Вы вероятно слышали. А именно когда есть картинка 100х100рх и при подведении к нему курсора она от него убегает ?? может Вы подскажете как это реализовать, или где почитать.