HTML5 14
Robot Guest on 6th November 2020 01:48:04 AM
  1.  
  2. <!DOCTYPE html>
  3.         <title>Robot Tank</title>
  4.     <script src="//cdn.jsdelivr.net/phaser/2.5.0/phaser.min.js"></script>
  5.     <style>
  6.             body {
  7.                     background: black;
  8.                    
  9.             }
  10.           canvas{  
  11.                padding-left: 0;
  12.     padding-right: 0;
  13.     margin-left: auto;
  14.     margin-right: auto;
  15.     display: block;
  16.     width: 2560px;
  17.     }
  18.            
  19.            </style>
  20. </head>
  21.     <script>
  22.            
  23.            function randomN(min,max) {
  24.                    
  25.                    var rnd = Math.floor(Math.random() * max) + min;
  26.         //         console.log(rnd);
  27.                    return rnd;
  28.                    
  29.            }
  30.            
  31.         // Our robots
  32.     var robots = [
  33.  
  34.             robot1 = {
  35.                     msg         : "    BRIAN",
  36.                     model       : "robotBubble"
  37.             },
  38.             robot2 = {
  39.                     msg         : "       TIM",
  40.                     model       : "robotSub"           
  41.             },
  42.             robot3 = {
  43.                     msg         : "    BETTY",
  44.                     model       : "robotBubble"    
  45.             },
  46.             robot7 = {
  47.                     msg         : "    SARAH",
  48.                     model       : "robotHead"      
  49.             },
  50.                 robot4 = {
  51.                     msg         : "    JUDY",
  52.                     model       : "robotTube"      
  53.             },
  54.             robot5 = {
  55.                     msg         : "     LEAH",
  56.                     model       : "robotTube"      
  57.             },
  58.                 robot6 = {
  59.                     msg         : "   ROBERT",
  60.                     model       : "robotSub"       
  61.             },
  62.                 robot8 = {
  63.                     msg         : "      DAN",
  64.                     model       : "robotHead"      
  65.             }
  66.         ];
  67.        
  68.         var topBound,rightBound,bottomBound,leftBound;
  69.         var bounds = [topBound,rightBound,bottomBound,leftBound],
  70.                 boundsAtts = [
  71.                         topAtts = {
  72.                                 xPos    : 0,
  73.                                 yPos    : 30,
  74.                                 sprite  : 'bounds'
  75.                         },
  76.                         rightAtts = {
  77.                                 xPos    : 2484,
  78.                                 yPos    : 169,
  79.                                 sprite  : 'sideBound'
  80.                         },
  81.                         bottomAtts = {
  82.                                 xPos    : 0,
  83.                                 yPos    : 1375,
  84.                                 sprite  : 'bounds'
  85.                         },
  86.                         leftAtts = {
  87.                                 xPos    : 0,
  88.                                 yPos    : 169,
  89.                                 sprite  : 'sideBound'
  90.                         }
  91.                        
  92.                 ];
  93.        
  94.    
  95.     //initialize the game, set canvas size to 2400 pixels x 1240 pixels (size of the tank pic)
  96.     var game = new Phaser.Game(2560, 1440, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create, update: update}),
  97.                 robotGroup;
  98.  
  99.     function preload() {
  100.            
  101.            // game.load.atlasXML('robots', 'resources/robots.png', 'resources/robots.xml');
  102.          //   game.load.spritesheet('newRobot', 'resources/robot.png', 579, 322);
  103.            
  104.             //load the images
  105.             game.load.image('robot', 'resources/robot-02.png');
  106.             game.load.image('bounds', 'resources/platform.png');
  107.             game.load.image('sideBound', 'resources/side-bound.png');
  108.  
  109.                 game.load.image('tank', 'resources/tank.png');
  110.                 game.load.spritesheet('robotBubble', 'resources/robot-bubble.png', 324, 180);
  111.                 game.load.spritesheet('robotTube', 'resources/robot-tubes.png', 297, 180);
  112.                 game.load.spritesheet('robotSub', 'resources/robot-sub.png', 463, 150);
  113.                 game.load.spritesheet('robotHead', 'resources/robot-head.png', 230, 213);
  114.  
  115.     }
  116.    
  117.     function create() {
  118.         //set physics for the animation (allow robot to move at a specic speed)
  119.         game.physics.startSystem(Phaser.Physics.ARCADE);
  120.    
  121.         game.add.image(0, 0, 'tank'); //create the background
  122.  
  123.         //create a grouping to hold each robot. Allow easier event handling
  124.                 robotGroup = new Phaser.Group(game)
  125.  
  126.              // Loop through our bounds and create them
  127.             for (var i = 0; i < bounds.length;i++) {
  128.                    
  129.                         bounds[i] = game.add.sprite(boundsAtts[i].xPos,boundsAtts[i].yPos,boundsAtts[i].sprite);
  130.                         game.physics.enable(bounds[i], Phaser.Physics.ARCADE);
  131.                         bounds[i].body.immovable = true; //make sure the bound doesn't move
  132.                         bounds[i].alpha = 0; //make the bound transparent
  133.                    
  134.                 }
  135.                
  136.            
  137.            
  138.             // Loop through our robots and create them
  139.             for (var i = 0; i < robots.length;i++) {
  140.                    
  141.                         createRobot(robots[i]);
  142.                    
  143.                 }    
  144. /*             
  145.                 // Create a special one with new sprite
  146.            robotNew = game.add.sprite(670,20,'newRobot');
  147.            robotNew.frame = 0;
  148.             //  In the texture atlas the jellyfish uses the frame names blueJellyfish0000 to blueJellyfish0032
  149.    //  So we can use the handy generateFrameNames function to create this for us.
  150.  //  robotNew.animations.add('swim', Phaser.Animation.generateFrameNames('robot', 0, 6, '', 4), 30, true);
  151.  //  robotNew.animations.play('swim');
  152.     game.physics.enable(robotNew, Phaser.Physics.ARCADE);
  153.        robotNew.body.velocity.setTo(10, 15); //how fast the robot is moving (x direction, y direction)
  154.          //robot.body.velocity.setTo(-200, -100); //how fast the robot is moving (x direction, y direction)
  155.         //      robotNew.frame = (10 > 0) ? 0 : 1;// Frame to use (and therfore direction) depends if x velocity is negative or positive.
  156.         robotNew.body.bounce.set(1); //robot can bounce back after hitting the bounds
  157.         robotNew.body.collideWorldBounds = true;
  158.         robotNew.body.allowGravity = true;
  159.         robotNew.body.gravity.setTo(-3);
  160.                 robotNew.body.acceleration.set(3);
  161. */             
  162.                  }
  163.  
  164.         function createBounds(bound,boundAtts){
  165.                
  166.                 bound = game.add.sprite(boundAtts.xPos,boundAtts.yPos,boundAtts.sprite);
  167.  
  168.         game.physics.enable(bound, Phaser.Physics.ARCADE);
  169.         bound.body.immovable = true; //make sure the bound doesn't move
  170.         bound.alpha = 0; //make the bound transparent
  171.  
  172.         }
  173.  
  174.     function createRobot(robotAtts) {
  175.        
  176.         var xPos = randomN(100,1600), // between 100 and 900
  177.                 yPos = randomN(160,800),
  178.                 yVel = randomN(-10,20),// between -10 and 10
  179.                 xVel = (randomN(1,10) <= 5) ? randomN(20,30) : randomN(-20,-30);
  180.                
  181.                 console.log('X velocity is: ' +xVel);
  182.                 console.log('Y velocity is: ' +yVel);
  183.        // Create a robot, adding to the group,setting its start coordinates
  184.        robot = robotGroup.create(xPos,yPos,robotAtts.model);
  185.      
  186.        game.physics.enable(robot, Phaser.Physics.ARCADE);
  187.        robot.body.velocity.setTo(xVel, yVel); //how fast the robot is moving (x direction, y direction)
  188.          //robot.body.velocity.setTo(-200, -100); //how fast the robot is moving (x direction, y direction)
  189.                 robot.frame = (xVel > 0) ? 0 : 5;// Frame to use (and therfore direction) depends if x velocity is negative or positive.
  190.         robot.body.bounce.set(1); //robot can bounce back after hitting the bounds
  191.         robot.body.collideWorldBounds = true;
  192.         robot.body.allowGravity = true;
  193.         robot.body.gravity.setTo(-3);
  194.                 robot.body.acceleration.set(3);
  195.        
  196.         //make the robot clickable
  197.         robot.inputEnabled = true;
  198.         //when it's clicked, call the function "display"
  199.         robot.events.onInputDown.add(display,this);
  200.            
  201.         var style = { font: "18px Arial", fill: "#ffffff", wordWrap: false, wordWrapWidth: robot.width, align: "center"};
  202.         //create the name of the sponsor
  203.        
  204.              //  robot.text.anchor.set(0.5);
  205.                 //style for the name
  206.                  var thisTextR,thisTextL;
  207.                 switch (robotAtts.model) {
  208.                        
  209.                         case 'robotBubble':
  210.                                
  211.                                 thisTextR = game.add.text(130,132,robotAtts.msg,style);
  212.                                 thisTextL = game.add.text(92,132,robotAtts.msg,style);
  213.                        
  214.                         break;
  215.                        
  216.                         case 'robotSub':
  217.                                
  218.                                 thisTextR = game.add.text(185,83,robotAtts.msg,style);
  219.                                 thisTextL = game.add.text(172,83,robotAtts.msg,style);
  220.  
  221.                         break;
  222.                        
  223.                         case 'robotTube':
  224.                        
  225.                                 thisTextR = game.add.text(125,155,robotAtts.msg,style);
  226.                                 thisTextL = game.add.text(82,155,robotAtts.msg,style);
  227.  
  228.                         break;
  229.                        
  230.                         case 'robotHead':
  231.                        
  232.                                 thisTextR = game.add.text(61,103,robotAtts.msg,style);
  233.                                 thisTextL = game.add.text(67,103,robotAtts.msg,style);
  234.  
  235.                         break;
  236.                        
  237.                        
  238.                 }
  239.                
  240.  
  241.         robot.addChild(thisTextR);
  242.         robot.addChild(thisTextL);
  243.        
  244.       //   robot.getChildAt(1).alpha = 0;
  245.  
  246.      //   robot.text.alpha = 1;//initialize it as transparent
  247.  
  248.                 robot.animations.add('left', [5, 4, 3], 8, true);
  249.        
  250.         robot.animations.add('right', [0, 1, 2], 8, true);
  251.                  
  252.         //        robot.getChildAt(0).alpha = 0;
  253.             //     robot.getChildAt(1).alpha = 0;
  254.  
  255.         if (xVel > 0) {
  256.                  robot.animations.play('right');
  257.                  robot.getChildAt(1).alpha = 0;
  258.               } else {
  259.                       robot.animations.play('left');
  260.                       robot.getChildAt(0).alpha = 0;
  261.  
  262.                    }
  263.  
  264.    
  265.    }
  266.         // Called constatnly be game, checking for collisions and what not.
  267.     function update() {
  268.         //console.log(typeof(topBound))
  269.         //make the robot collide with the top bound we created
  270.         game.physics.arcade.collide(robotGroup,bounds[0],topCollision,null,this);
  271.        game.physics.arcade.collide(robotGroup,bounds[2],bottomCollision,null,this);
  272.      
  273.         game.physics.arcade.collide(robotGroup,bounds[1],sideCollision,null,this);
  274.         game.physics.arcade.collide(robotGroup,bounds[3],sideCollision,null,this);
  275. //
  276.        
  277.         //call the function to make the text follow the robot
  278.         //      robotGroup.forEach(follow);
  279.    
  280.     }
  281.    
  282.     function bottomCollision(game,robot){
  283.  
  284.             // When colliding with the top border, switch frame of sprite to make it 'change' direction.
  285.         //    robot.frame = (robot.frame == 1) ? 0 : 1;
  286.            
  287.     }
  288.    
  289.       function topCollision(game,robot){
  290.  
  291.             // When colliding with the top border, switch frame of sprite to make it 'change' direction.
  292.         //    robot.frame = (robot.frame == 1) ? 0 : 1;
  293.            
  294.     }
  295.    
  296.      function sideCollision(game,robot){
  297.  
  298.             // When colliding with the top border, switch frame of sprite to make it 'change' direction.
  299.          //  robot.frame = (robot.frame == 1) ? 0 : 1;
  300.            robot.animations.stop();
  301.          
  302.           (robot.animations.name == 'left') ? robot.animations.play('right') : robot.animations.play('left');
  303.  
  304.         //  (robot.animations.name == 'left') ? robot.getChildAt(0).x = 0 : robot.getChildAt(0).x = 100;
  305.           (robot.getChildAt(1).alpha == 0) ? robot.getChildAt(1).alpha = 1: robot.getChildAt(1).alpha = 0;
  306.  
  307.            (robot.getChildAt(0).alpha == 0) ? robot.getChildAt(0).alpha = 1: robot.getChildAt(0).alpha = 0;
  308.  
  309.     }
  310.    
  311.  
  312.  
  313.     function display (robot){
  314.         //if the robot is clicked...
  315.        
  316.         if (robot.text.alpha == 0){
  317.             //if the name is not shown, show the name
  318.             robot.text.alpha = 1;
  319.         }
  320.         else{
  321.             //if the name is shown, hide the name
  322.             robot.text.alpha = 0;
  323.         }
  324.      
  325.     }
  326.    
  327.     function follow(robot){
  328.         //this function make the name follow the robot
  329.         robot.text.x = Math.floor(robot.x + robot.width / 2);
  330.         robot.text.y = Math.floor(robot.y + robot.height / 2);
  331.     }
  332.     </script>
  333.  
  334. </body>
  335. </html>

Paste is for source code and general debugging text.

Login or Register to edit, delete and keep track of your pastes and more.

Raw Paste

Login or Register to edit or fork this paste. It's free.