Game using HTML and Javscript

Language

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

Add new comment