Mini-Game 1: Pong

Developer
Feng
Size
2,469 Kb
Views
8,096
  1. Mini-Game 1: Pong Previews
  2. Mini-Game 1: Pong HTML Codes
  3. Mini-Game 1: Pong JS Codes

How do I make an mini-game 1: pong?

Creating Pong. What is a mini-game 1: pong? How do you make a mini-game 1: pong? This script and codes were developed by Feng on 07 January 2023, Saturday.

Mini-Game 1: Pong Previews
IQ Test

Mini-Game 1: Pong - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Mini-Game 1: Pong</title>
</head>
<body> <canvas tabindex="1" width="640" height="480"></canvas> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Mini-Game 1: Pong - Script Codes JS Codes

// Game Engine
function Game(canvas) { var self = this; this.context = canvas.getContext('2d'); this.width = canvas.width; this.height = canvas.height; // Keep track of key states - game.keyPressed - up this.keyPressed = {}; $(canvas).on('keydown keyup', function (e) { var keyName = Game.keys[e.which]; if (keyName) { self.keyPressed[keyName] = e.type === 'keydown'; e.preventDefault(); } });
}
Game.keys = { 32: 'space', 37: 'left', 38: 'up', 39: 'right', 40: 'down'
}
Game.prototype.start = function() { var self = this; var fps = 60; var interval = 1000 / fps; setInterval(function() { self.update(); self.draw(); }, interval)
}
Game.prototype.update = function() { this.entities.forEach(function(entity) { if (entity.update) entity.update(); })
}
Game.prototype.draw = function() { var self = this; this.entities.forEach(function(entity) { if (entity.draw) entity.draw(self.context); })
}
// Game Code
var canvas = $('canvas')[0];
var game = new Game(canvas);
game.entities = [ new Background(), new Ball(), new Paddle()
];
game.start();
// Each time you start the game, the can focus your keystrokes to the canvas
// Commented out - otherwise I cannot code!
// canvas.focus();
// Game Elements
function Background() {
}
Background.prototype.draw = function(context) { context.fillStyle = '#000'; context.fillRect(0, 0, game.width, game.height);
}
// A game is composed of entities
function Entity() { this.x = 0; this.y = 0; this.width = 0; this.height = 0; this.xVelocity = 0; this.yVelocity = 0;
}
Entity.prototype.update = function() { this.x += this.xVelocity; this.y += this.yVelocity;
}
Entity.prototype.draw = function(context) { context.fillStyle = '#fff'; context.fillRect(this.x, this.y, this.width, this.height)
}
Entity.prototype.intersect = function(other) { return this.y + this.height > other.y && this.y < other.y + other.height && this.x + this.width > other.x && this.x < other.x + other.width;
}
function Ball() { Entity.call(this); this.width = 50; this.height = 50; this.x = game.width / 2 - this.width; this.y = game.height / 2 - this.height; this.yVelocity = 10;
}
Ball.prototype = Object.create(Entity.prototype);
Ball.prototype.constructor = Ball;
Ball.prototype.update = function() { Entity.prototype.update.apply(this, arguments); // super if (this.y > game.height - this.height || this.y < 0 + this.height) { this.yVelocity *= -1 }
}
function Paddle() { Entity.call(this); this.width = 20; this.height = 100; this.x = 20; this.y = game.height / 2 - this.height / 2;
}
Paddle.prototype = Object.create(Entity.prototype);
Paddle.prototype.constructor = Paddle;
Paddlle.prototype.update = function() { Entity.prototype.update.apply(this, arguments) var speed = 15; if (game.keyPressed.up) { this.yVelocity = -speed; } else if (game.keyPressed.down) { this.yVelocity = speed; } else { this.yVelocity = 0; } this.y = Math.min(Math.max(this.y, 0), game.height - this.height)
function Player() { Paddle.call(this)
}
Player.prototype = Object.create(paddle.prototype)
Mini-Game 1: Pong - Script Codes
Mini-Game 1: Pong - Script Codes
Home Page Home
Developer Feng
Username felixfeng
Uploaded January 07, 2023
Rating 3
Size 2,469 Kb
Views 8,096
Do you need developer help for Mini-Game 1: Pong?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Feng (felixfeng) Script Codes
Name
Test Photo Gallery
A Pen by Feng
Practice - Connect 4
Test - ScrollSpy
Test Slides
Test Redux Counter
Lights Out Game
Test Pen
Create amazing sales emails with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!