SkyWire clone

by enbette

HTML

<!doctype html>
<html>
  <head>
    <style>
    
    </style>
  </head>

  <body id='mybody' onload="Game.start()">
    <!--Placeholder credit amount-->
    <span class="credits" hidden = true><a href="/financial/creditcharge"> 1.071</a></span>
    <canvas id="gameScreen" height="500" width="688" style="image-rendering: smooth;"></canvas>
  
    <script type="text/javascript">
      let realT = 0;
      let isPlaying = false;
      let isInvincible = false;
      let invisT = 1;
      let invis = 1;
      let cabinOpacity = 1;
      let obstacles = [];
      let renderOutro = false;
      let speed = 1;
      class Pumpkin{
        constructor(x,y,newX,Jheight){
          this.x = x;
          this.y = y;
          this.startX = x;
          this.startY = y;
          this.size = {x:55,y:55}
          this.newX = newX;
          this.Jheight = Jheight;
          this.texture = document.getElementById('pumpkin');
          this.dx = newX-x;
          this.tSleep = 20;
          this.t = 0;
          this.direction = true;
          obstacles.push(this);
        }
        draw(ctx){
          ctx.drawImage(this.texture,this.x - cabin.x*v - 80, this.y+cabin.y*v - 80,160,160);
        }
        tick(){
          if (this.tSleep>0){
            this.tSleep-=0.2;
          }
          else if (this.direction){
            this.t+=0.2;
            this.x = this.startX + (2*this.t)*5;
            this.y = this.startY + ((1/8)*(this.t-20)*(this.t-20)+50)*5 - 500;
            if (this.t>40){
              this.direction = false;
              this.tSleep = 24;
            }
          }
          else{
            this.t-=0.2;
            this.x = this.startX + 2*this.t*5;
            this.y = this.startY + ((1/8)*(this.t-20)*(this.t-20)+50)*5 - 500;
            if (this.t<0){
              this.direction = true;
              this.tSleep = 24;
            }
          }
          
        }
      }
      class CircleShit{
        constructor(x,y,radius,speed){
         ...

CSS

#gameScreen {
        background-color: #f1f1f1; ;
      } #mybody{width:688px;height:500px; }