Game using HTML and Javscript

Submitted by jaredgwapo on Tuesday, January 12, 2016 - 14:55.
Language
JavaScript
In this tutorial, I am going to teach you how to create a simple html5 game using javascript. Just follow the instructions below and download the source code.

INSTRUCTIONS

Creating our index.php

  1. <!DOCTYPE html>
  4. <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  6. canvas {
  7.     border:1px solid #d3d3d3;
  8.     background-color: #f1f1f1;
  9. }
  11. </head>
  12. <body onload="startGame()">
  13. <?php include('script.php') ?>
  14. <div style="text-align:center;width:480px;">
  15.   <button onmousedown="moveup()" onmouseup="clearmove()" ontouchstart="moveup()">UP</button><br><br>
  16.   <button onmousedown="moveleft()" onmouseup="clearmove()" ontouchstart="moveleft()">LEFT</button>
  17.   <button onmousedown="moveright()" onmouseup="clearmove()" ontouchstart="moveright()">RIGHT</button><br><br>
  18.   <button onmousedown="movedown()" onmouseup="clearmove()" ontouchstart="movedown()">DOWN</button>
  19. </div>
  20. </body>
  21. </html>

Creating our javascript code and name it as script.php

  1. <script>
  2.  
  3. var myGamePiece;
  4. var myObstacles = [];
  5. var mySound;
  6.  
  7. function startGame() {
  8.     myGamePiece = new component(30, 30, "blue", 10, 120);
  9.     mySound = new sound("bounce.mp3");
  10.     myGameArea.start();
  11. }
  12.  
  13. var myGameArea = {
  14.     canvas : document.createElement("canvas"),
  15.     start : function() {
  16.         this.canvas.width = 480;
  17.         this.canvas.height = 270;
  18.         this.context = this.canvas.getContext("2d");
  19.         document.body.insertBefore(this.canvas, document.body.childNodes[0]);
  20.         this.frameNo = 0;
  21.         this.interval = setInterval(updateGameArea, 20);
  22.     },
  23.     stop : function() {
  24.         clearInterval(this.interval);
  25.     },    
  26.     clear : function() {
  27.         this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
  28.     }
  29. }
  30.  
  31. function component(width, height, color, x, y) {
  32.     this.width = width;
  33.     this.height = height;
  34.     this.speedX = 0;
  35.     this.speedY = 0;    
  36.     this.x = x;
  37.     this.y = y;    
  38.     this.update = function() {
  39.         ctx = myGameArea.context;
  40.         ctx.fillStyle = color;
  41.         ctx.fillRect(this.x, this.y, this.width, this.height);
  42.     }
  43.     this.newPos = function() {
  44.         this.x += this.speedX;
  45.         this.y += this.speedY;        
  46.     }    
  47.     this.crashWith = function(otherobj) {
  48.         var myleft = this.x;
  49.         var myright = this.x + (this.width);
  50.         var mytop = this.y;
  51.         var mybottom = this.y + (this.height);
  52.         var otherleft = otherobj.x;
  53.         var otherright = otherobj.x + (otherobj.width);
  54.         var othertop = otherobj.y;
  55.         var otherbottom = otherobj.y + (otherobj.height);
  56.         var crash = true;
  57.         if ((mybottom < othertop) || (mytop > otherbottom) || (myright < otherleft) || (myleft > otherright)) {
  58.             crash = false;
  59.         }
  60.         return crash;
  61.     }
  62. }
  63.  
  64. function updateGameArea() {
  65.     var x, height, gap, minHeight, maxHeight, minGap, maxGap;
  66.     for (i = 0; i < myObstacles.length; i += 1) {
  67.         if (myGamePiece.crashWith(myObstacles[i])) {
  68.             mySound.play();
  69.             myGameArea.stop();
  70.             return;
  71.         }
  72.     }
  73.     myGameArea.clear();
  74.     myGameArea.frameNo += 1;
  75.     if (myGameArea.frameNo == 1 || everyinterval(150)) {
  76.         x = myGameArea.canvas.width;
  77.         minHeight = 20;
  78.         maxHeight = 200;
  79.         height = Math.floor(Math.random()*(maxHeight-minHeight+1)+minHeight);
  80.         minGap = 50;
  81.         maxGap = 200;
  82.         gap = Math.floor(Math.random()*(maxGap-minGap+1)+minGap);
  83.         myObstacles.push(new component(10, height, "black", x, 0));
  84.         myObstacles.push(new component(10, x - height - gap, "black", x, height + gap));
  85.     }
  86.     for (i = 0; i < myObstacles.length; i += 1) {
  87.         myObstacles[i].x -= 1;
  88.         myObstacles[i].update();
  89.     }
  90.     myGamePiece.newPos();
  91.     myGamePiece.update();
  92. }
  93.  
  94. function sound(src) {
  95.     this.sound = document.createElement("audio");
  96.     this.sound.src = src;
  97.     this.sound.setAttribute("preload", "auto");
  98.     this.sound.setAttribute("controls", "none");
  99.     this.sound.style.display = "none";
  100.     document.body.appendChild(this.sound);
  101.     this.play = function(){
  102.         this.sound.play();
  103.     }
  104.     this.stop = function(){
  105.         this.sound.pause();
  106.     }    
  107. }
  108.  
  109. function everyinterval(n) {
  110.     if ((myGameArea.frameNo / n) % 1 == 0) {return true;}
  111.     return false;
  112. }
  113.  
  114. function moveup() {
  115.     myGamePiece.speedY = -1;
  116. }
  117.  
  118. function movedown() {
  119.     myGamePiece.speedY = 1;
  120. }
  121.  
  122. function moveleft() {
  123.     myGamePiece.speedX = -1;
  124. }
  125.  
  126. function moveright() {
  127.     myGamePiece.speedX = 1;
  128. }
  129.  
  130. function clearmove() {
  131.     myGamePiece.speedX = 0;
  132.     myGamePiece.speedY = 0;
  133. }
  134. </script>

Note: Due to the size or complexity of this submission, the author has submitted it as a .zip file to shorten your download time. After downloading it, you will need a program like Winzip to decompress it.

Virus note: All files are scanned once-a-day by SourceCodester.com for viruses, but new viruses come out every day, so no prevention program can catch 100% of them.

FOR YOUR OWN SAFETY, PLEASE:

1. Re-scan downloaded files using your personal virus checker before using it.
2. NEVER, EVER run compiled files (.exe's, .ocx's, .dll's etc.)--only run source code.

Tags
html game
javscript game
game

Add new comment

About text formats
  • 658 views