fork(1) download
copy 
  1.  
  2. <!doctype html>
  3. <html>
  4.   <head>
  5.     <style>
  6.       body {
  7.         height: 100%;
  8.       }
  9.       #background {
  10.         background-image: url("universe.jpg");
  11.         width: 100%;
  12.         height: 100%;
  13.         position: absolute;
  14.         left: 0px;
  15.         top: 0px;
  16.         display: block;
  17.       }
  18.       #ball {
  19.         position: absolute;
  20.         width: 30px;
  21.         height: 30px;
  22.         background-image: -webkit-radial-gradient(
  23.              74% 40%, circle cover, rgba(171, 166, 14, 1),
  24.              rgba(255, 0, 0, 1) 76%);
  25.         border-radius: 15px;
  26.         display: none;
  27.       }
  28.       @-webkit-keyframes rotate_kf {
  29.         from {
  30.           -webkit-transform: rotate(0deg);
  31.         }
  32.         to {
  33.           -webkit-transform: rotate(360deg);
  34.         }
  35.       }
  36.       #score {
  37.         float: right;
  38.       }
  39.       #blackhole {
  40.         position: absolute;
  41.         width: 60px;
  42.         height: 60px;
  43.         top: 370px;
  44.         left: 370px;
  45.         background-image: url('bhole.png');
  46.         -webkit-animation: rotate_kf 5s linear 0 infinite normal;
  47.       }
  48.       #restart {
  49.         background-color: yellow;
  50.         padding: 5px;
  51.       }
  52.       @-webkit-keyframes pulse_kf {
  53.         from {
  54.           font-size: 60px;
  55.         }
  56.         to {
  57.           font-size: 80px;
  58.         }
  59.       }
  60.       #gameover {
  61.         position: absolute;
  62.         top: 50%;
  63.         width: 100%;
  64.         text-align: center;
  65.         color: yellow;
  66.         -webkit-text-stroke: 1px #00ff00;
  67.         font-size: 40px;
  68.         display: none;
  69.         -webkit-animation: pulse_kf 1s linear 0 infinite alternate;
  70.       }
  71.     </style>
  72.     <script>
  73.       var ball = null;
  74.       var interval_handler = null;
  75.       var gameover = null;
  76.       var dir_up = 0.0;
  77.       var dir_down = 0.0;
  78.       var dir_left = 0.0;
  79.       var dir_right = 0.0;
  80.       var dirX = 0.0;
  81.       var dirY = 0.0;
  82.       var posX = 50.0;
  83.       var posY = 50.0;
  84.       var holeX = 400.0;
  85.       var holeY = 400.0;
  86.       var saveX = null;
  87.       var saveY = null;
  88.       var angX = null;
  89.       var angY = null;
  90.       var points = 0.0;
  91.       function start() {
  92.         ball = document.getElementById('ball');
  93.         draw_ball();
  94.         ball.style.left = "50px";
  95.         ball.style.top = "50px";
  96.         blackhole = document.getElementById('blackhole');
  97.         blackhole.style.left = holeX - 30 + "px";
  98.         blackhole.style.top = holeY - 30 + "px";
  99.         gameover = document.getElementById('gameover');
  100.         gameover.style.display = "none";
  101.         score = document.getElementById('score');
  102.         dirX = 0.0;
  103.         dirY = 0.0;
  104.         posX = 50.0;
  105.         posY = 50.0;
  106.         interval_handler = setTimeout(animate, 20);
  107.         ball.style.display = "block";
  108.         saveX = null;
  109.         saveY = null;
  110.         points = 0.0;
  111.       }
  112.       function draw_ball() {
  113.         ball.style.left = posX - 15 + "px";
  114.         ball.style.top = posY - 15 + "px";
  115.         score.innerHTML = Math.floor(100000 * points) + " points";
  116.       }
  117.       function animate() {
  118.         dirX += (dir_right - dir_left) - (angX / 100);
  119.         dirY += (dir_up - dir_down) + (angY / 100);
  120.         ACMAX = 5;
  121.         if (dirX > ACMAX) dirX = ACMAX;
  122.         if (dirX < -ACMAX) dirX = -ACMAX;
  123.         if (dirY > ACMAX) dirY = ACMAX;
  124.         if (dirY < -ACMAX) dirY = -ACMAX;
  125.         dfX = (holeX - posX);
  126.         dfY = (holeY - posY);
  127.         d2 = dfX * dfX + dfY * dfY;
  128.         d1 = Math.sqrt(d2) + 61;
  129.         dfX /= d1;
  130.         dfY /= d1;
  131.         K = 0.0000077;
  132.         dfX /= K * d2;
  133.         dfY /= K * d2;
  134.         posX += dirX + dfX;
  135.         posY += dirY + dfY;
  136.         add_points = 1 / d2;
  137.         if (add_points > 100) add_points = 100;
  138.         points += add_points;
  139.         draw_ball();
  140.         if (d1 < 100) {
  141.           do_gameover();
  142.         } else {
  143.           interval_handler = setTimeout(animate, 20);
  144.         }
  145.       }
  146.       function stop() {
  147.         clearTimeout(interval_handler);
  148.       }
  149.       function do_gameover() {
  150.         stop();
  151.         ball.style.display = "none";
  152.         gameover.style.display = "block";
  153.       }
  154.       function restart() {
  155.         stop();
  156.         start();
  157.       }
  158.       function tilt(axes) {
  159.         if (saveX == null) {
  160.           saveX = axes[0];
  161.           saveY = axes[1];
  162.         }
  163.         angX = axes[0] - saveX;
  164.         angY = axes[1] - saveY;
  165.       }
  166.  
  167.       function keydown_handler(e) {
  168.         if (e.keyCode == 65) {
  169.           dir_left = 1.0;
  170.         }
  171.         if (e.keyCode == 68) {
  172.           dir_right = 1.0;
  173.         }
  174.         if (e.keyCode == 83) {
  175.           dir_up = 1.0;
  176.         }
  177.         if (e.keyCode == 87) {
  178.           dir_down = 1.0;
  179.         }
  180.         return true;
  181.       }
  182.  
  183.       function keyup_handler(e) {
  184.         if (e.keyCode == 65) {
  185.           dir_left = 0.0;
  186.         }
  187.         if (e.keyCode == 68) {
  188.           dir_right = 0.0;
  189.         }
  190.         if (e.keyCode == 83) {
  191.           dir_up = 0.0;
  192.         }
  193.         if (e.keyCode == 87) {
  194.           dir_down = 0.0;
  195.         }
  196.        return true;
  197.       }
  198.  
  199.       if (window.DeviceOrientationEvent) {
  200.           window.addEventListener('deviceorientation', function(event) {
  201.               tilt([event.beta, event.gamma]);
  202.           }, true);
  203.       } else if (window.DeviceMotionEvent) {
  204.           window.addEventListener('devicemotion', function(event) {
  205.               tilt([event.acceleration.x * 2, event.acceleration.y * 2]);
  206.           }, true);
  207.       } else {
  208.           window.addEventListener('MozOrientation', function(orientation) {
  209.               tilt([orientation.x * 50, orientation.y * 50]);
  210.           }, true);
  211.       }
  212.  
  213.       document.onkeydown = keydown_handler;
  214.       document.onkeyup = keyup_handler;
  215.  
  216.     </script>
  217.   </head>
  218.  
  219.   <body onorientationchange = "update()">
  220.     <div id="background">
  221.       <div id="restart" onclick="restart()">Start
  222.         <div id="score">0 points</div>
  223.       </div>
  224.       <div id="blackhole"></div>
  225.     </div>
  226.     <div id="ball"></div>
  227.     <div id="gameover">Game Over</div>
  228.   </body>
  229.  
  230. </html>
  231.  
Not running #stdin #stdout 0s 0KB
comments ()
stdin
copy 
Standard input is empty
stdout
copy 
Standard output is empty
https://ideone.com/axEOd
language:
JavaScript (SMonkey 60.2.3)
created:
13 years ago
visibility:
public

Share or Embed source code

Discover > Sphere Engine API

The brand new service which powers Ideone!

Discover > IDE Widget

Widget for compiling and running the source code in a web browser!