fork download
copy 
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  5. <style>
  6. canvas {
  7.     border:1px solid #d3d3d3;
  8.     background-color: #f1f1f1;
  9. }
  10. </style>
  11. </head>
  12. <body onkeypress="myFunction(event)" onload="startGame()" >
  13. <script>
  14.  
  15. var myGamePiece;
  16. var myObstacle;
  17.  
  18. function startGame() {
  19.     myGamePiece = new component(30, 30, "red", 10, 120);
  20.     myObstacle  = new component(10, 200, "green", 300, 120);    
  21.     myGameArea.start();
  22. }
  23.  
  24. var myGameArea = {
  25.     canvas : document.createElement("canvas"),
  26.     start : function() {
  27.         this.canvas.width = 480;
  28.         this.canvas.height = 270;
  29.         this.context = this.canvas.getContext("2d");
  30.         document.body.insertBefore(this.canvas, document.body.childNodes[0]);
  31.         this.interval = setInterval(updateGameArea, 20);
  32.     },
  33.     clear : function() {
  34.         this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
  35.     }
  36. }
  37.  
  38. function component(width, height, color, x, y) {
  39.     this.width = width;
  40.     this.height = height;
  41.     this.speedX = 0;
  42.     this.speedY = 0;    
  43.     this.x = x;
  44.     this.y = y;    
  45.     this.update = function() {
  46.         ctx = myGameArea.context;
  47.         ctx.fillStyle = color;
  48.         ctx.fillRect(this.x, this.y, this.width, this.height);
  49.     }
  50.     this.newPos = function() {
  51.         this.x += this.speedX;
  52.         this.y += this.speedY;        
  53.     }    
  54. }
  55.  
  56. function updateGameArea() {
  57.     myGameArea.clear();
  58.     myObstacle.update();
  59.     myGamePiece.newPos();    
  60.     myGamePiece.update();
  61. }
  62.  
  63. function moveup() {
  64.     myGamePiece.speedY = -1; 
  65. }
  66.  
  67. function movedown() {
  68.     myGamePiece.speedY = 1; 
  69. }
  70.  
  71. function moveleft() {
  72.     myGamePiece.speedX = -1; 
  73. }
  74.  
  75. function moveright() {
  76.     myGamePiece.speedX = 1; 
  77. }
  78.  
  79. function clearmove() {
  80.     myGamePiece.speedX = 0; 
  81.     myGamePiece.speedY = 0; 
  82. }
  83.  
  84. function myFunction(event)
  85. {
  86. 	switch(event.which || event.keyCode)
  87. 	{
  88. 	case 117: //Up
  89. 		moveup();
  90. 		break;
  91. 	case 106: //Down
  92. 		movedown();
  93. 		break;
  94. 	case 104: //Left
  95. 		moveleft();
  96. 		break;
  97. 	case 107: //Right
  98. 		moveright();
  99. 		break;
  100. 	}
  101. }
  102. </script>
  103. <div style="text-align:center;width:480px;">
  104.   <button onmousedown="moveup()" onmouseup="clearmove()" ontouchstart="moveup()">UP</button><br><br>
  105.   <button onmousedown="moveleft()" onmouseup="clearmove()" ontouchstart="moveleft()">LEFT</button>
  106.   <button onmousedown="moveright()" onmouseup="clearmove()" ontouchstart="moveright()">RIGHT</button><br><br>
  107.   <button onmousedown="movedown()" onmouseup="clearmove()" ontouchstart="movedown()">DOWN</button>
  108. </div>
  109. <p>Now there is an obstacle in our gaming area, but still nothing happens when the red square hit it.</p>
  110. </body>
  111. </html>
  112.  
Success #stdin #stdout 0.01s 82880KB
comments (?)
stdin
copy 
Standard input is empty
stdout
copy 
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<style>
canvas {
    border:1px solid #d3d3d3;
    background-color: #f1f1f1;
}
</style>
</head>
<body onkeypress="myFunction(event)" onload="startGame()" >
<script>

var myGamePiece;
var myObstacle;

function startGame() {
    myGamePiece = new component(30, 30, "red", 10, 120);
    myObstacle  = new component(10, 200, "green", 300, 120);    
    myGameArea.start();
}

var myGameArea = {
    canvas : document.createElement("canvas"),
    start : function() {
        this.canvas.width = 480;
        this.canvas.height = 270;
        this.context = this.canvas.getContext("2d");
        document.body.insertBefore(this.canvas, document.body.childNodes[0]);
        this.interval = setInterval(updateGameArea, 20);
    },
    clear : function() {
        this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
    }
}

function component(width, height, color, x, y) {
    this.width = width;
    this.height = height;
    this.speedX = 0;
    this.speedY = 0;    
    this.x = x;
    this.y = y;    
    this.update = function() {
        ctx = myGameArea.context;
        ctx.fillStyle = color;
        ctx.fillRect(this.x, this.y, this.width, this.height);
    }
    this.newPos = function() {
        this.x += this.speedX;
        this.y += this.speedY;        
    }    
}

function updateGameArea() {
    myGameArea.clear();
    myObstacle.update();
    myGamePiece.newPos();    
    myGamePiece.update();
}

function moveup() {
    myGamePiece.speedY = -1; 
}

function movedown() {
    myGamePiece.speedY = 1; 
}

function moveleft() {
    myGamePiece.speedX = -1; 
}

function moveright() {
    myGamePiece.speedX = 1; 
}

function clearmove() {
    myGamePiece.speedX = 0; 
    myGamePiece.speedY = 0; 
}

function myFunction(event)
{
	switch(event.which || event.keyCode)
	{
	case 117: //Up
		moveup();
		break;
	case 106: //Down
		movedown();
		break;
	case 104: //Left
		moveleft();
		break;
	case 107: //Right
		moveright();
		break;
	}
}
</script>
<div style="text-align:center;width:480px;">
  <button onmousedown="moveup()" onmouseup="clearmove()" ontouchstart="moveup()">UP</button><br><br>
  <button onmousedown="moveleft()" onmouseup="clearmove()" ontouchstart="moveleft()">LEFT</button>
  <button onmousedown="moveright()" onmouseup="clearmove()" ontouchstart="moveright()">RIGHT</button><br><br>
  <button onmousedown="movedown()" onmouseup="clearmove()" ontouchstart="movedown()">DOWN</button>
</div>
<p>Now there is an obstacle in our gaming area, but still nothing happens when the red square hit it.</p>
</body>
</html>
https://ideone.com/MpzDoy
language:
PHP (php 7.3.5)
created:
7 years ago
visibility:
secret

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!