Игра на js

Relike

Как сделать чтобы объект рандомно появляющийся исчезал при наезде на него?
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script type="text/javascript">
    var Wp, Hp;
    var dL = dU = dR = dB = 0;
var L = 123; T = 234; S = 15; 
var nL = false, nT = false;
 
onload = function ()
{
    var CW = document.body.clientWidth;
    Wp = .8 * CW, Hp = .75 * Wp;
    document.getElementById ('pole').style.width = Wp + 'px';
    document.getElementById ('pole').style.height = Hp + 'px';
document.body.onkeydown = function (ev)
   {
   var e = window.event || ev, K = e.keyCode;
        if (K == 37) dL = -S;
   else if (K == 38) dU = -S; 
   else if (K == 39) dR =  S;
   else if (K == 40) dB =  S;
   }
 
document.body.******* = function (ev)
   {
   var e = window.event || ev, K = e.keyCode;
        if (K == 37) dL = 0;
   else if (K == 38) dU = 0; 
   else if (K == 39) dR = 0;
   else if (K == 40) dB = 0;
   }
 
function move1 ()
   {
   var p = 'px', O = document.getElementById ('img').style;
   L += dL + dR, T += dU + dB;
if (L < 0) L = 0; if (L > (Wp - 60)) L = Wp - 60;
if (T < 0) T = 0; if (T > (Hp - 60)) T = Hp - 60;
O.left = L + p; O.top = T + p;
   setTimeout (move1, 100);
   }
 
function coin() {
            var B = document.getElementById('coin').style;
            var Lk=Math.random()*Wp-30, Tk=Math.random()*Hp-30;
            B.left = Lk + 'px';
            B.top = Tk + 'px';
            B.visibility = 'visible';
                setTimeout(coin, 6000);
                setTimeout(hide, 3000);
                if(Tk == T|| Tk - 40 == T || Lk == L || Lk - 24 == L) {hide(1); alert('я тута!'); coin();}
            function hide(n) {                
                n=n||10;
                if (n==1) { B.visibility='hidden';return;}
                n--;
                B.visibility = B.visibility=='hidden'?'visible':'hidden';
                setTimeout(function() {hide(n);},200);
            }
        }
   
coin ();
move1 ();
}
</script>
</head>
<body>
<div id="pole" style="width : 400px; height : 300px; position : relative; background : #e5e5e5; border : 5px solid #000;">
    <div id="img" style="position: absolute; z-index: 999; left: 123px; top: 234px; width : 60px; height : 60px; background: black;"></div>
    <div id="coin" style="position: absolute; z-index: 99; left: 123px; top: 234px; visibility : hidden;  width : 30px; height : 30px; background: gray;"></div>
</div>
</body>
</html>
2 ответа

Relike

извиняюсь, был очень занят держите код
Кликните здесь для просмотра всего текста
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Игра "Собери кристаллы"</title>
<style>
html, body {height: 100%; margin: 0; padding: 0; overflow: hidden; background-color: #fff}
td         {font-weight: 900; font-size: 16px; font-family: monospace; text-align: right; color: #aaa}
div        {position: relative; border: 2px solid #aaa; background-color: #fafafa}
img        {position: absolute}
</style>
<script>
onload = function ()
{
var tbl = document.createElement ('TABLE');
    tbl.cellSpacing = tbl.cellPadding = 0; tbl.align = 'center';
    tbl.style.marginTop = tbl.style.marginBottom = '10px';
 
var ro = tbl.insertRow (-1),
   ce = ro.insertCell (-1); ce.appendChild (document.createTextNode ('Выпало кристаллов:'));
   ce = ro.insertCell (-1); ce.style.width = '4ex'; ce.appendChild (document.createTextNode (0));
   ce = ro.insertCell (-1); ce.rowSpan = 2; ce.innerHTML = '&nbsp;';
   ce = ro.insertCell (-1); ce.rowSpan = 2; ce.appendChild (document.createTextNode ('01:00'));
   with (ce.style) color = '#fff', padding = '0 5px', fontSize = '28px', backgroundColor = '#aaa';
ro = tbl.insertRow (-1);
   ce = ro.insertCell (-1); ce.appendChild (document.createTextNode ('Собрано кристаллов:'));
   ce = ro.insertCell (-1); ce.style.width = '4ex'; ce.appendChild (document.createTextNode (0));
 
MyTable = document.body.appendChild (tbl);
 
var th = MyTable.offsetHeight + 20,
    bw = document.body.clientWidth  - th * 2,
    bh = document.body.clientHeight - th * 2;
with (MyTable.rows [0])
   cells [2].style.width = (bw - cells [0].offsetWidth - cells [1].offsetWidth - cells [3].offsetWidth) + 'px';
 
var dv = document.createElement ('DIV');
with (dv.style) width = (bw - 4) + 'px', height = bh + 'px', marginLeft = th + 'px';
 
GameZone = document.body.appendChild (dv);
 
alert ('Начать игру.');
 
var im1 = document.createElement ('IMG');
with (im1.style) width = height = '20px', backgroundColor = '#888';
 
Picker = GameZone.appendChild (im1);
 
var im2 = document.createElement ('IMG');
with (im2.style) width = height = '25px', backgroundColor = 'gold';
with (im2.style) zIndex = 4, visibility = 'hidden';
 
Crystal = GameZone.appendChild (im2);
 
document.body.onkeydown = function (ev)
   {
   var e = window.event || ev, k = e.keyCode;
        if (k == 37) delLeft   = -Speed;
   else if (k == 38) delUp     = -Speed; 
   else if (k == 39) delRight  =  Speed;
   else if (k == 40) delBottom =  Speed;
   }
 
document.body.******* = function (ev)
   {
   var e = window.event || ev, k = e.keyCode;
        if (k == 37) delLeft   = 0;
   else if (k == 38) delUp     = 0; 
   else if (k == 39) delRight  = 0;
   else if (k == 40) delBottom = 0;
   }
 
BRS = (navigator.userAgent.indexOf ('MSIE') >= 0);
 
F_Start ();
}
 
function F_Start ()
{
LeftPicker = F_Rand (0, parseInt (GameZone.style.width ) - Picker.offsetWidth ),
TopPicker  = F_Rand (0, parseInt (GameZone.style.height) - Picker.offsetHeight);
with (Picker.style) left = LeftPicker + 'px', top = TopPicker + 'px', zIndex = 5;
 
Speed = 5, MyTimeOut = 20, Eff = 1,
delLeft = delUp = delRight = delBottom = PartOfSecond = 0;
 
F_Process ();
}
 
function F_Rand (mi, ma) {return parseInt ((ma - mi) * Math.random () + mi)}
 
function F_Process ()
{
if (self.TMR) clearTimeout (TMR);
var ad0 = function (x) {return (((x < 10) ? '0' : '') + x)}
 
PartOfSecond += MyTimeOut;
if (PartOfSecond == 1000)
   {
   PartOfSecond = 0;
   var tx = MyTable.rows [0].cells [3].innerHTML.split (':'),
       tm = parseInt (tx [0] * 60, 10) + parseInt (tx [1], 10)  - 1;
   MyTable.rows [0].cells [3].innerHTML = '0' + Math.floor (tm / 60) + ':' + ad0 (tm % 60);
   if (!tm)
      {
      var proc = Math.floor (MyTable.rows [1].cells [1].innerHTML / MyTable.rows [0].cells [1].innerHTML * 100);
      if (confirm ('Вы собрали ' + proc + '% выпавших кристаллов.\n\nЖелаете сыграть ещё раз?'))
         {
         MyTable.rows [1].cells [1].innerHTML = MyTable.rows [0].cells [1].innerHTML = 0;
         MyTable.rows [0].cells [3].innerHTML = '01:00';
         Crystal.style.visibility = 'hidden';
         F_Start ();
         }
      return;
      }
   }
var wC = Crystal.offsetWidth, hC = Crystal.offsetHeight,
    wP = Picker.offsetWidth , hP = Picker.offsetHeight,
    wGZ = parseInt (GameZone.style.width),
    hGZ = parseInt (GameZone.style.height),
    lMax = wGZ - wP,
    tMax = hGZ - hP;
LeftPicker += delLeft + delRight ,
TopPicker  += delUp   + delBottom;
if (LeftPicker < 0) LeftPicker = 0; if (LeftPicker > lMax) LeftPicker = lMax;
if (TopPicker  < 0) TopPicker  = 0; if (TopPicker  > tMax) TopPicker  = tMax;
with (Picker.style) left = LeftPicker + 'px', top = TopPicker + 'px';
if (Eff) --Eff; if (!Eff) MyTable.style.backgroundColor = '#fff';
if (Crystal.style.visibility == 'hidden')
   {
   var lMin = LeftPicker - 3 * Picker.offsetWidth; if (lMin < 0  ) lMin = 0;
   var lMax = LeftPicker + 4 * Picker.offsetWidth; if (lMax > wGZ) lMin = wGZ;
   var tMin = TopPicker - 3 * Picker.offsetHeight; if (tMin < 0  ) tMin = 0;
   var tMax = TopPicker + 4 * Picker.offsetHeight; if (tMax > hGZ) tMax = hGZ;
   
   do {
      LeftCrystal = F_Rand (0, parseInt (GameZone.style.width ) - Crystal.offsetWidth ),
      TopCrystal  = F_Rand (0, parseInt (GameZone.style.height) - Crystal.offsetHeight);
      }
   while ((LeftCrystal >= lMin && LeftCrystal <= lMax && TopCrystal >= tMin && TopCrystal <= tMax)
       || (LeftCrystal + wC >= lMin && LeftCrystal + wC <= lMax && TopCrystal >= tMin && TopCrystal <= tMax)
       || (LeftCrystal + wC >= lMin && LeftCrystal + wC <= lMax && TopCrystal + hC >= tMin && TopCrystal + hC <= tMax)
       || (LeftCrystal >= lMin && LeftCrystal <= lMax && TopCrystal + hC >= tMin && TopCrystal + hC <= tMax));
 
   with (Crystal.style) visibility = 'visible', left = LeftCrystal + 'px', top = TopCrystal + 'px';
   MyTable.rows [0].cells [1].innerHTML = parseInt (MyTable.rows [0].cells [1].innerHTML) + 1;
 
   var dL = LeftPicker - LeftCrystal, dT = TopPicker - TopCrystal;
   TimeCrystalCurrent = TimeCrystalMax = parseInt (Math.sqrt (dL * dL + dT * dT) * 1.5 / Speed);
   }
else
   {
   var op = parseInt (--TimeCrystalCurrent / TimeCrystalMax * 100);
   if (BRS) Crystal.style.filter = 'alpha(opacity=' + op + ')'; else Crystal.style.opacity = .01 * op;
   if (op <= 10) Crystal.style.visibility = 'hidden';
   else if ((LeftPicker > LeftCrystal && LeftPicker < LeftCrystal + wC && TopPicker > TopCrystal && TopPicker < TopCrystal + hC)
        || (LeftPicker + wP > LeftCrystal && LeftPicker + wP < LeftCrystal + wC && TopPicker > TopCrystal && TopPicker < TopCrystal + hC)
        || (LeftPicker + wP > LeftCrystal && LeftPicker + wP < LeftCrystal + wC && TopPicker + hP > TopCrystal && TopPicker + hP < TopCrystal + hC)
        || (LeftPicker > LeftCrystal && LeftPicker < LeftCrystal + wC && TopPicker + hP > TopCrystal && TopPicker + hP < TopCrystal + hC))
      {
      Crystal.style.visibility = 'hidden';
      MyTable.style.backgroundColor = 'gold'; Eff = 10;
      MyTable.rows [1].cells [1].innerHTML = parseInt (MyTable.rows [1].cells [1].innerHTML) + 1;
      }
   }
TMR = setTimeout (F_Process, MyTimeOut);
}
</script>
</head>
<body></body>
</html>
чтобы вставить картинки (для "сундучка" и "кристалла"), надо: а) вместо строки #45 написать б) вместо строки #50 написать im2.src = 'адрес_картинки_кристалла';вопросы будут - спрашивайте


Relike

kalabuni, Да ничего страшного. А нельзя с моим кодом что-то наделать?kalabuni, Но блин, игра бесподобна) Но мне как-то нужно это всё очень хорошо понять и объяснить.....kalabuni, и код слишком велик. Можно обойтись добавив в мой функцию исчезновения объекта при наезде))) Просто мне всё это дело описывать и объяснять... Да и препод ругается если кода много