• H TML5 之 (6)下雨效果


    在对HTML5进行研究之后,有了一点想法,思考出游戏其实感觉就是四个步骤

    1.创建一个你需要的对象,赋予属性(一些影响方法的属性),方法(运动,叫....)

    2.实例化这个对象,让它成为一个或者多个个体

    3.画图方法,画出你所需要画出的对象的外形

    4.调用画图方法,将实例化后的对象传进去,一个对象实例化后的外形就出来了,剩下的就是思考该在合适显示这个外形,

    就达到游戏的基本思想了,

    <!DOCTYPE HTML>
    <html>
    <head>
    <title>Shot</title>
    <meta charset="gbk" />
    <link  type="text/css" href="canvas.css" rel="stylesheet"/>
    </head>
    <body onkeydown="getCommand();">
        <canvas id="canvas" width="880" height="400" style="background:black">
        您的浏览器不支持眮E��薹�吹交�?
        </canvas>
    </body>
    <script > 
      var canvas = document.getElementById("canvas");
      var cxt = canvas.getContext("2d");
     //创建一个对象
      function Shot(x,y,speed){
        this.x = x;
        this.y = y;
        this.speed = speed;
        this.move = function (){
            if(this.y > 400){
             this.y = 40
            }    
            this.y +=speed;    
        }      
      }
      //实例化对象,放入数组中
      var shots = new Array();
      for(var i =1;i<50;i++){
         var shot = new Shot(i*50*Math.random(),i*50*Math.random(),i);
         shots[i] = shot;
      }
      //画子弹的方法
       function drawShot(tank){
                  cxt.fillStyle = "#ded284";
                  cxt.beginPath();
                  cxt.fillRect(tank.x,tank.y,5,5);      
                  cxt.closePath();
      }
      //调用子弹的画出的方法
    function run(){
        cxt.clearRect(0,0,880,400);
        for(var i =1;i<50;i++){
            shots[i].move();        
            drawShot(shots[i]);
        }    
    }  
    window.setInterval("run()",100);
    
        </script>
    </html>
  • 相关阅读:
    Unity-WIKI 之 AllocationStats(内存分配)
    Unity-WIKI 之 DebugLine
    Unity-WIKI 之 DebugConsole
    Unity-WIKI 之 DrawArrow
    Unity 2D Sprite Lighting
    Unity 2D Touch Movement
    [Unity2D]2D Mobile Joystick
    DragRigidbody2D
    Finger Gestures 3.1
    2D Skeletal Animation Ready
  • 原文地址:https://www.cnblogs.com/sunxun/p/3826186.html
Copyright © 2020-2023  润新知