API tools faq
paste
Advertisement
TermSpar

2D Game Attempt

TermSpar
Nov 8th, 2018
330
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
JavaScript 7.80 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <head>
  5.   <style>
  6.  
  7.     a:link{
  8.       color: white;
  9.     }
  10.  
  11.     a:visited{
  12.       color: white;
  13.     }
  14.  
  15.     .bg-1{
  16.       background-color: #882190;
  17.       color: #ffffff;
  18.     }
  19.    
  20.     .bg-2{
  21.       width: 60%;
  22.       height: 40%;
  23.       margin: auto;
  24.       background-color: #3882CB;
  25.       color: #ffffff;
  26.     }
  27.    
  28.     .container-canvas {
  29.       margin-top: 25px;
  30.       margin-bottom: 25px;
  31.       margin-right: auto;
  32.       margin-left: auto;
  33.       width: 900px;
  34.     }
  35.    
  36.     canvas{
  37.       background: #A2C9F0;
  38.     }
  39.   </style>
  40.  
  41.   <meta charset="utf-8">
  42.   <meta name="viewport" content="width=device-width, initial-scale=1">
  43.   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  44.   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  45.   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  46. </head>
  47.  
  48. <body>
  49.  
  50.   <div class="container-fluid bg-1 text-center">
  51.     <h1>JumpCubes in JavaScript</h1>
  52.     <p>Made by Ben Bollinger</p>
  53.   </div>
  54.  
  55.   <div class="container-canvas">
  56.     <canvas id="ctx" tabindex=0 width=900 height=500 style="border:1px solid #000000;" onkeypress="movePlayer(event)" onkeyup="keyUp(event)"></canvas>
  57.   </div>
  58.  
  59.   <div class="container-fluid bg-2 text-center">
  60.     <a href="https://benbcompsci.wordpress.com/">My Main Website</a>
  61.   </div>
  62.  
  63. <script>
  64.  
  65. var canvas = document.getElementById("ctx");
  66. var ctx = canvas.getContext("2d");
  67. canvas.setAttribute('tabindex', 0);
  68. canvas.focus();
  69. canvas.addEventListener("keydown", movePlayer);
  70.  
  71. //Maybe I can get a class working?
  72.  
  73. class Coin {
  74.   constructor(x, y){
  75.     this.xPos = x;
  76.     this.yPos = y
  77.     this.xSize = 10;
  78.  
  79.     this.initialX = x;
  80.     this.initialY = y;
  81.   }
  82.  
  83.   render() {
  84.    ctx.save()
  85.    ctx.fillStyle = "blue";
  86.    ctx.fillRect(this.xPos, this.yPos, this.xSize, 10);
  87.    ctx.restore()
  88.  }
  89.  
  90.   get getX() {
  91.     return this.xPos;
  92.   }
  93.   get getY() {
  94.     return this.yPos;
  95.   }
  96.   get getxSize(){
  97.     return this.xSize;
  98.   }
  99.  
  100.   remove(){
  101.     this.xPos = 10000;
  102.     this.yPos = 10000;
  103.   }
  104.  
  105.   recreate(){
  106.     this.xPos = this.initialX;
  107.     this.yPos = this.initialY;
  108.   }
  109. }
  110.  
  111. //Coins:
  112. coin1 = new Coin(800, 450);
  113. coin2 = new Coin(450, 260);
  114. var coinArray = [];
  115.  
  116. class Platform {
  117.   constructor(x, y, xS, yS, moveBool) {
  118.     this.xPos = x;
  119.     this.yPos = y;
  120.     this.xSize = xS;
  121.     this.ySize = yS;
  122.  
  123.     this.moveable = moveBool;
  124.   }
  125.  
  126.   render() {
  127.    ctx.save()
  128.    ctx.fillStyle = "red";
  129.    ctx.fillRect(this.xPos, this.yPos, this.xSize, this.ySize);
  130.    ctx.restore()
  131.  }
  132.  
  133.   get getX() {
  134.     return this.xPos;
  135.   }
  136.   get getY() {
  137.     return this.yPos;
  138.   }
  139.   get getxSize() {
  140.     return this.xSize;
  141.   }
  142.   get getySize() {
  143.     return this.ySize;
  144.   }
  145.   get getMoveable() {
  146.     return this.moveable;
  147.   }
  148. }
  149.  
  150. //Platform array:
  151. var platformArray = [];
  152.  
  153. //Vars:
  154.  
  155. var x_new = 50;
  156. var y_new = 50;
  157.  
  158. var isJumping = false;
  159. var isColliding = false;
  160.  
  161. //Movement vars:
  162. var speed = 10;
  163. var jump = 0;
  164. var maxJump = 23;
  165. var shouldJump = true;
  166. var leftOrRight = "";
  167.  
  168. //Moving platform vars:
  169. var plat1X = 0;
  170. var direction = '';
  171.  
  172. var keys = {
  173.     up: false,
  174.     right: false,
  175.     left: false
  176. };
  177.  
  178. function movePlayer(event) {
  179.     switch(event.keyCode){
  180.       //Right key down:
  181.       case 39:
  182.         keys["right"] = true;
  183.         leftOrRight = "right";
  184.         break;
  185.       //Left key down:
  186.       case 37:
  187.         keys["left"] = true;
  188.         leftOrRight = "left";
  189.         break;
  190.       //Up key down:
  191.       case 38:
  192.         keys["up"] = true;
  193.         isJumping = true;
  194.         break;
  195.     }
  196. }
  197.  
  198. function keyUp(event){
  199.   switch(event.keyCode){
  200.     //Up key up:
  201.     case 38:
  202.       isJumping = false;
  203.       keys["up"] = false;
  204.       break;
  205.     //Right key up:
  206.     case 39:
  207.       keys["right"] = false;
  208.       break;
  209.     //Left key up:
  210.     case 37:
  211.       keys["left"] = false;
  212.       break;
  213.   }
  214.  
  215. }
  216.  
  217.  
  218. //Intersection function:
  219. function boundsIntersect(x1,y1,x2,y2, xSize){
  220.   if(x1 > x2-50 && x1 < x2+xSize && y1 < y2 && y1 > y2-50){
  221.     return true;
  222.   }
  223.   return false;
  224. }
  225.  
  226. //Scoring:
  227. var score = 0;
  228.  
  229. function resetGame(){
  230.   //Reset Position:
  231.   x_new = 5;
  232.   y_new = 430;
  233.   //Reset score and coins:
  234.   score = 0;
  235.   coinArray.forEach(function(coin){
  236.     coin.recreate();
  237.   });
  238. }
  239.  
  240. var gravitySpeed = 10;
  241.  
  242. function update(){
  243.  
  244.   //Draw player:
  245.   window.requestAnimationFrame(update);
  246.   ctx.clearRect(0,0,900,500);
  247.   ctx.fillStyle = "black";
  248.   ctx.beginPath();
  249.   ctx.fillRect(x_new,y_new,50,50);
  250.  
  251.   //Draw ground:
  252.   ctx.beginPath();
  253.   ctx.rect(0,490,900,10);
  254.   ctx.fillStyle = "green";
  255.   ctx.fill();
  256.  
  257.   //PLayer movement:
  258.   if(keys["up"] && !keys["right"] && !keys["left"] && shouldJump){
  259.     y_new-=speed;
  260.     jump++;
  261.     leftOrRight = "";
  262.   } else if(keys["right"] && !keys["up"]){
  263.     x_new+=speed;
  264.   } else if(keys["left"] && !keys["up"]){
  265.     x_new-=speed;
  266.   } else if(keys["up"] && keys["right"] && shouldJump){
  267.     y_new-=speed;
  268.     x_new+=speed;
  269.     jump++;
  270.   } else if(keys["up"] && keys["left"] && shouldJump){
  271.     y_new-=speed;
  272.     x_new-=speed;
  273.     jump++;
  274.   }
  275.  
  276.   //Gravity
  277.   if(y_new < 440 && !isJumping && !isColliding){
  278.     y_new+=gravitySpeed;
  279.   }
  280.  
  281.   //If the player is jumping more than is allowed, make them fall:
  282.   if(jump >= maxJump){
  283.     shouldJump = false;
  284.     isJumping = false;
  285.     if(leftOrRight == "right"){
  286.       x_new+=speed/2;
  287.     } else if(leftOrRight == "left"){
  288.       x_new-=speed/2;
  289.     }
  290.   }
  291.  
  292.   //If the player is on the ground, allow them to jump:
  293.   if(y_new >= 440){
  294.     jump = 0;
  295.     shouldJump = true;
  296.   }
  297.  
  298.   //Coins:
  299.   coinArray = [];
  300.   coinArray.push(coin1);
  301.   coinArray.push(coin2);
  302.  
  303.   //Coin scoring:
  304.   coinArray.forEach(function(coin){
  305.     if(boundsIntersect(x_new, y_new, coin.getX, coin.getY, coin.getxSize)){
  306.       coin.remove();
  307.       score++;
  308.     }
  309.   });
  310.  
  311.   //Render score:
  312.   ctx.font="20px Times New Roman";
  313.   ctx.fillStyle = "black";
  314.   ctx.fillText("Score: " + score, 10, 20);
  315.  
  316.   //Render coins:
  317.   coinArray.forEach(function(coin){
  318.     coin.render()
  319.   });
  320.  
  321.   platformArray = [];
  322.  
  323.   //Platforms:
  324.   platform1 = new Platform(plat1X,350,200,10, true);
  325.   platformArray.push(platform1);
  326.  
  327.   platform2 = new Platform(300,200,200,10, false);
  328.   platformArray.push(platform2);
  329.  
  330.   platform3 = new Platform(400,300,200,10, false);
  331.   platformArray.push(platform3);
  332.  
  333.   //Move platforms:
  334.   platformArray.forEach(function(platform) {
  335.     if (platform.getMoveable) {
  336.       if (platform.getX >= 400) {
  337.         direction = 'left'
  338.       } else if (platform.getX <= 0) {
  339.         direction = 'right';
  340.         plat1X += 1;
  341.       }
  342.  
  343.       if(platform.getX > 0 && platform.getY < 400){
  344.         if (direction == 'right') {
  345.           plat1X += 10;
  346.         } else if(direction == 'left'){
  347.           plat1X -= 10;
  348.         }
  349.       }
  350.     }
  351.   });
  352.  
  353.   // render platforms
  354.    platformArray.forEach(function (platform) {
  355.      platform.render()
  356.    });
  357.  
  358.   //Platform intersections:
  359.   platformArray.forEach(function(platform){
  360.     if(boundsIntersect(x_new,y_new,platform.getX, platform.getY, platform.getxSize) && !isJumping){
  361.       isColliding = true;
  362.       y_new -= 10;
  363.       //Allow the player to jump:
  364.       jump = 0;
  365.       shouldJump = true;
  366.     } else if(boundsIntersect(x_new,y_new,platform.getX, platform.getY, platform.getxSize) && isJumping){
  367.       isJumping = false;
  368.       resetGame();
  369.       isColliding = true;
  370.     } else {
  371.       isColliding = false;
  372.     }
  373.   });
  374.  
  375.   //Keep player in bounds:
  376.   if(x_new+50 > 900){
  377.     x_new = 849;
  378.   } else if(x_new < 0){
  379.     x_new = 1;
  380.   } else if(y_new < 0){
  381.     y_new = 1;
  382.     isJumping = false;
  383.   }
  384. }
  385.  
  386. window.requestAnimationFrame(update);
  387.  
  388. </script>
  389.  
  390. </body>
  391. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!