佳礼资讯网

 找回密码
 注册

ADVERTISEMENT

查看: 2051|回复: 11

网上游戏

[复制链接]
发表于 11-6-2006 11:02 AM | 显示全部楼层 |阅读模式
怎么制做一个网页游戏啊?
像UTOPIA

http://games.swirve.com/utopia/
回复

使用道具 举报


ADVERTISEMENT

发表于 13-6-2006 01:10 AM | 显示全部楼层
你必须先学好 scripting langauge
我朋友的 Dota Homer 是一个很成功的例子
回复

使用道具 举报

发表于 21-7-2006 10:34 PM | 显示全部楼层
我想用javascript 写射击游戏,可以吗?
回复

使用道具 举报

发表于 22-7-2006 12:45 AM | 显示全部楼层
可以,有一个很好用的javascript game engine.

http://www.sean.co.uk/a/webdesig ... script_gamelib.shtm
回复

使用道具 举报

发表于 24-7-2006 04:43 PM | 显示全部楼层
写了之后有人愿意玩吗?。。
回复

使用道具 举报

发表于 24-7-2006 04:59 PM | 显示全部楼层
你愿意写,小章鱼就愿意玩
只是为何不用 Flash ?
回复

使用道具 举报

Follow Us
发表于 30-7-2006 08:14 PM | 显示全部楼层
我比较熟悉javascript.
回复

使用道具 举报

发表于 30-7-2006 08:16 PM | 显示全部楼层
对不起火弧的用户。。这要用IE/maxthon 的。。



  1. <style>
  2. .bg
  3. {
  4.         background-color:#000000;
  5. }

  6. .info
  7. {
  8.         position:absolute;
  9.         color:#ffffff;
  10.         background-color:#000000;
  11.         font-size:5pt;
  12.         width:120px;
  13.         height:20px;
  14.         border-style:none;
  15. }

  16. .star
  17. {
  18.         color:#ffffff;
  19.         position:absolute;
  20.         left:34 ;
  21.         top:34;
  22.         font-size:1pt;
  23. }

  24. .player
  25. {
  26.         position:absolute;
  27.         color:#ffffff;
  28.         font-size:32pt;
  29.         font-family:Wingdings 3;
  30.        
  31. }

  32. .bullet
  33. {
  34.         position:absolute;
  35.         color:#ff0000;
  36.         font-size:12pt;
  37.        
  38. }

  39. .enemy
  40. {
  41.         position:absolute;
  42.         color:#775544;
  43.         font-family:Wingdings;
  44.         font-size:32pt;
  45. }

  46. .hpbar
  47. {
  48.         position:absolute;
  49.         left:20px;
  50.         top:520px;
  51.         height:5px;
  52.         width:200px;
  53.         background-color:#990000;
  54.         font-size:1pt;
  55. }

  56. .measurer
  57. {
  58.         position:absolute;
  59.         color:#0000ff;
  60.         z-index:100;
  61. }


  62. </style>


  63. <div class=bg id=bg />
  64. <input type=text id=info class=info />

  65. <div class=info style=left:20px;top:500px;font-size:10pt;>Score: </div>
  66. <input type=text id=score class=info style=left:120px;top:500px;font-size:10pt; value=0 />

  67. <div class=player id=player>Y</div>
  68. <div class=hpbar id=hpbar></div>
  69. <body style="background-color:#444455;"/>

  70. <div class=measurer id='m1'>.</div>
  71. <div  class=measurer id='m2'>.</div>


  72. <script>


  73. var bgwidth=1000,bgheight=520; //Background

  74. var starmax=20; //Star particle number
  75. var sx=new Array(); var sy=new Array(); //Star array

  76. var xmouse=250,ymouse=250; //Mouse position
  77. var px=250,py=250; //player position
  78. var vx=0.2,vy=0.2; // player velocity

  79. var bulletmax=9; //bullet number
  80. var bx=new Array(); var by=new Array(); //Bullet array
  81. var firingindex=0;

  82. var enemymax=20; //enemy number
  83. var ex=new Array(); var ey=new Array(); //enemy array
  84. var egethit=new Array();


  85. var score=0;
  86. var currentlevel=1;
  87. var hp=200;
  88. var gettinghit=0;

  89. var timecounter=0;var timecounter2=0;

  90. var timer1=setInterval("movestar()",41);
  91. var timer2=setInterval("movetarget()",9);
  92. var timer3;
  93. var timer4=setInterval("animateenemy()",10);
  94. var timer5;
  95. var timer6;



  96. initialize();

  97. function initialize()
  98. {

  99.         //Star
  100.         for (var i=0;i<starmax;i++)
  101.         {
  102.                 document.write("<div class=star id=star"+i+" >.</div>" );
  103.         }
  104.        
  105.         //Bullet
  106.         for (var i=0;i<bulletmax;i++)
  107.         {
  108.                 document.write("<div class=bullet id=bullet"+i+" style=top:-50px>|</div>" );
  109.                 bx[i]=0; by[i]=0;
  110.         }
  111.        
  112.         //Enemy
  113.         for (var i=0;i<enemymax;i++)
  114.         {
  115.                 document.write("<div class=enemy id=enemy"+i+" style=top:-50px>i</div>" );
  116.                 ex[i]=Math.random()*bgwidth;
  117.                 ey[i]=((Math.random()*bgheight)/5) - 150;
  118.                 egethit[i]=0;
  119.                
  120.         }

  121.        
  122.         document.getElementById('bg').style.width=bgwidth;
  123.         document.getElementById('bg').style.height=bgheight;
  124.         distributestar();
  125.        
  126. }

  127. function distributestar()
  128. {
  129.         for (var i=0;i<starmax;i++)
  130.         {
  131.                 sx[i]=Math.random()*bgwidth;
  132.                 sy[i]=Math.random()*bgheight;
  133.                
  134.                 var obj=document.getElementById('star'+i);
  135.                 obj.style.left = sx[i];
  136.                 obj.style.top = sy[i];
  137.         }
  138. }


  139. function movestar()
  140. {
  141.        
  142.         for (var i=0;i<starmax;i++)
  143.         {
  144.                
  145.                 sy[i]+=i % 5+1;
  146.                
  147.                 if (sy[i]>bgheight)
  148.                 {
  149.                         sx[i]=Math.random()*bgwidth;
  150.                         sy[i]=0;
  151.                 }
  152.                                
  153.                 var obj=document.getElementById('star'+i);
  154.                 obj.style.left = sx[i];
  155.                 obj.style.top =sy[i];
  156.                                
  157.         }
  158. }


  159. function collision(x1,x2,y1,y2, r1,r2)
  160. {
  161.         if (  (x1+r1)>(x2-r2)   &&  (x1-r1)<(x2+r2)  &&   (y1+r1)>(y2-r2)   &&  (y1-r1)<(y2+r2)  )
  162.         {
  163.                 return 1;
  164.         }
  165.         return 0;
  166. }



  167. function movebullet()
  168. {
  169.         for (var i=0;i<bulletmax;i++)
  170.         {
  171.                 if (by[i]>-15)
  172.                 {
  173.                         by[i]-=5;
  174.                         var obj=document.getElementById('bullet'+i);
  175.                         obj.style.left = bx[i];
  176.                         obj.style.top =by[i];
  177.                        
  178.                        
  179.                         for( j=0;j<enemymax;j++)
  180.                         {
  181.                                 if  (collision(bx[i],ex[j],by[i],ey[j],5,25) &&!egethit[j] ) //bullet hit enemy
  182.                                 {
  183.                                         egethit[j]=1;
  184.                                         enemygethit(j,i);
  185.                                        
  186.                                 }

  187.                         }
  188.                        
  189.                 }
  190.         }
  191.        
  192.         if (by[firingindex-1]<=-15)
  193.         {
  194.                 clearInterval(timer3);
  195.                 firingindex=0;
  196.         }
  197. }       



  198. function fire()
  199. {
  200.         if (firingindex==0)
  201.         {
  202.           clearInterval(timer3);
  203.            timer3=setInterval("movebullet()",4);
  204.         }
  205.        
  206.         bx[firingindex]=px;
  207.         by[firingindex]=py;

  208.         var obj=document.getElementById('bullet'+firingindex);
  209.         obj.style.left = bx[firingindex];
  210.         obj.style.top =by[firingindex];
  211.         firingindex+=1;
  212.         firingindex=firingindex%bulletmax;

  213. }

  214. function getxy()
  215. {
  216.      
  217.     var p=event.clientX + " " +event.clientY;
  218.    
  219.    
  220.      document.getElementById('info').value=p;
  221.      
  222.       xmouse=event.clientX;
  223.         ymouse=event.clientY;
  224. }


  225. function movetarget()
  226. {
  227.          

  228.             vx-=(px-xmouse)/(bgwidth);
  229.              vy-=(py-ymouse)/(bgheight);
  230.             
  231.             vx*=0.97;
  232.             vy*=0.97;
  233.                          
  234.          
  235.          px+=vx;
  236.          py+=vy;
  237.           
  238.              
  239.     var player=document.getElementById('player');
  240.     player.style.left=px-15;
  241.     player.style.top=py-15;
  242.                  
  243. }





  244. function animateenemy()
  245. {
  246.        
  247.         if (currentlevel==1)
  248.         {  
  249.            enemymax=5;
  250.       }
  251.       else if (currentlevel==2)
  252.       {
  253.                   enemymax=10;
  254.       }
  255.       
  256.        
  257.        
  258.         for (var i=0;i<enemymax;i++)
  259.         {
  260.                
  261.                 ey[i]+=3;
  262.                 ex[i]+=Math.random()*4-2;
  263.                
  264.                 if (ey[i]>bgheight)
  265.                 {
  266.                         ex[i]=Math.random()*bgwidth;
  267.                         ey[i]=0;
  268.                 }
  269.                                
  270.                 //Collision with enemy player
  271.                 if  (collision(ex[i],px,ey[i],py,15,15) && !gettinghit )
  272.                 {
  273.                         gettinghit=1;
  274.                         timer5 = setInterval("playergethit()",50);
  275.                 }
  276.                
  277.                
  278.                 var obj=document.getElementById('enemy'+i);
  279.                 obj.style.left = ex[i]-15;
  280.                 obj.style.top =ey[i]-10;
  281.                
  282.                        
  283.         }
  284.        
  285.                
  286. }

  287. function playergethit()
  288. {
  289.         timecounter+=1;
  290.         if (timecounter % 2 ==0)
  291.         {
  292.                 document.getElementById('player').style.color="#ff0000"
  293.                 hp-=5;

  294.         }
  295.         else
  296.         {
  297.                 document.getElementById('player').style.color="#ffffff"
  298.         }
  299.        
  300.         if (timecounter>10)
  301.         {
  302.                 timecounter=0;
  303.                 clearInterval(timer5);
  304.                 gettinghit=0;
  305.                
  306.         }
  307.        
  308.         if (hp<=0)
  309.         {
  310.                 clearInterval(timer5);
  311.                 gameover();

  312.         }
  313.         else
  314.         {
  315.                 document.getElementById("hpbar").style.width=hp;
  316.                

  317.         }
  318.        
  319. }


  320. function enemygethit(eindex,bindex)
  321. {
  322.                                
  323.                 timecounter2=0;
  324.                 clearInterval(timer6);
  325.                 egethit[eindex]=0;
  326.                 by[bindex]=-11;
  327.                 ex[eindex]=Math.random()*bgwidth;
  328.                 ey[eindex]=-50;
  329.        
  330.                 document.getElementById('bullet'+bindex).style.top=by[bindex];
  331.                        
  332. }



  333. function gameover()
  334. {
  335.         alert("Game OVER!!");
  336.         gettinghit=0;
  337.         document.getElementById('player').style.color="#ffffff"
  338. }

  339. document.onmouseup = fire;
  340. document.onmousemove=getxy;

  341. </script>
复制代码

[ 本帖最后由 tensaix2j 于 30-7-2006 08:19 PM 编辑 ]
回复

使用道具 举报


ADVERTISEMENT

发表于 2-8-2006 09:56 PM | 显示全部楼层
tensaix2j 赞!很有速度感。
小章鱼自愧不如……

可是分数遗漏了吧?呵呵
回复

使用道具 举报

发表于 9-3-2007 04:35 PM | 显示全部楼层

huh?

原帖由 tensaix2j 于 30-7-2006 08:16 PM 发表
对不起火弧的用户。。这要用IE/maxthon 的。。



<style>
.bg
{
        background-color:#000000;
}

.info
{
        position:absolute;
        color:#ffffff;
        background-color:#000000;
        font-size:5 ...



这个能CONNECT LAN 的吗?小妹需要做一个别NETWORKING PROJECT, 各位有甚么IDEA吗?
回复

使用道具 举报

发表于 29-6-2007 11:03 PM | 显示全部楼层
原帖由 tensaix2j 于 30-7-2006 08:16 PM 发表
对不起火弧的用户。。这要用IE/maxthon 的。。




.bg
{
        background-color:#000000;
}

.info
{
        position:absolute;
        color:#ffffff;
        background-color:#000000;
        font-size:5pt;
        width:1 ...

这个很棒, 用Flash还做得出, Javascripti的话 。。。 真的是高手。。。尤其是用Mouse来控制箭头的“手感”真的非常好, 媲美街机飞行游戏的手感。
回复

使用道具 举报

发表于 29-6-2007 11:25 PM | 显示全部楼层
原帖由 exiang 于 13-6-2006 01:10 AM 发表
你必须先学好 scripting langauge
我朋友的 Dota Homer 是一个很成功的例子

Dota Homer? 有没有Screen Shot ?? 没办法加入玩。

最近看了一个简单的Online Game, 用Web Browser玩的。是一个不错的Web Base游戏。
travian.com

[ 本帖最后由 belon_cfy 于 29-6-2007 11:30 PM 编辑 ]
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

 

ADVERTISEMENT



ADVERTISEMENT



ADVERTISEMENT

ADVERTISEMENT


版权所有 © 1996-2023 Cari Internet Sdn Bhd (483575-W)|IPSERVERONE 提供云主机|广告刊登|关于我们|私隐权|免控|投诉|联络|脸书|佳礼资讯网

GMT+8, 12-9-2025 04:51 PM , Processed in 0.128478 second(s), 21 queries , Gzip On.

Powered by Discuz! X3.4

Copyright © 2001-2021, Tencent Cloud.

快速回复 返回顶部 返回列表