Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html>
- <head>
- <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
- <style>
- canvas {
- border:5px solid #d3d3d3;
- background-color: #f1f1f1;
- }
- </style>
- </head>
- <body onload="startGame()">
- <script>
- var myGamePiece;
- function startGame() {
- myGameArea.start();
- myGamePiece = new component(100, 100, "black", 100, 100);
- }
- var myGameArea = {
- canvas : document.createElement("canvas"),
- start : function() {
- this.canvas.width = 500;
- this.canvas.height = 500;
- this.context = this.canvas.getContext("2d");
- document.body.insertBefore(this.canvas, document.body.childNodes[0]);
- this.interval = setInterval(updateGameArea, 20);
- window.addEventListener('keydown', function (e) {
- myGameArea.key = e.keyCode;
- })
- window.addEventListener('keyup', function (e) {
- myGameArea.key = false;
- })
- },
- clear : function(){
- this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
- }
- }
- function component(width, height, color, x, y) {
- this.gamearea = myGameArea;
- 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;
- if(this.x<0) this.x = 0;
- if(this.x > 500 - this.width) this.x = 500 - this.width;
- this.y += this.speedY;
- if (this.y<0) this.x = 0;
- if(this.y > 500 - this.width) this.y = 500 - this.width;
- }
- }
- function updateGameArea() {
- myGameArea.clear();
- myGamePiece.speedX = 0;
- myGamePiece.speedY = 0;
- if (myGameArea.key && myGameArea.key == 37) {myGamePiece.speedX = -1; }
- if (myGameArea.key && myGameArea.key == 39) {myGamePiece.speedX = 1; }
- if (myGameArea.key && myGameArea.key == 38) {myGamePiece.speedY = -1; }
- if (myGameArea.key && myGameArea.key == 40) {myGamePiece.speedY = 1; }
- myGamePiece.newPos();
- myGamePiece.update();
- }
- </script>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement