Pong - A JavaScript Game by robertmacdonald

View this thread on: hive.blog | peakd.com | ecency.com

programming · @robertmacdonald · Feb 1 '17 (edited)

$0.04

Pong - A JavaScript Game

<html>
<p>So I've recently gotten into JavaScript programming and I decided to make a little simple game... or so I thought... I eagerly began making the paddles as its the easiest object, it only goes up and down on the screen, after about 5-10 minutes I have the basic paddle engine working with the up and down arrows/W and S buttons depending on the player. Now comes the fun part I thought to myself, the ball! I quickly made a ball.js file and made the basic parameters thinking "well the ball needs an x and a y so I can keep track of the position, and a velocity in the x and y-direction to make it move." I made some basic functions and then proceeded to watch the ball fly across the screen and through my paddle... I probably stared at my ball.hit function for an hour before getting annoyed closing my IDE and going to bed. The next day I got a little help from a friend and he fixed my small little syntax error (rooky mistake) and the ball now bounced back and forth between the two paddles, success!! Well until I had to come up with a way to make it bounce at an angle..... so I came up with a little simple trigonometry algorithm to solve this issue and confidently ran my index.html to watch the ball and all my hopes and dreams bounce off the paddle and into the infinite void of the bottom of the screen.. I realized I didn't take into account the top and bottom of the screen. I threw together some code that I figured was logical, just reverse the y velocity as it reaches or exceeds the boundaries of the screen, 5 = -5, 10 = -10. I cannot tell you how many times I tried this method without success finally I got frustrated and went to bed. In bed, I just kept thinking about it until I thought "If I'm just going to stay up thinking about it I might as well get up and code it." so I changed what I had to two functions called this.hitTop() and this.hitBottom() and put either this.ballVy += (-2 * this.ballVy); or this.ballVy -= (2 * this.ballVy); instead of this.ballVy * -1; both ways technically change 5 to -5 and -5 to 5 but for some reason, this way worked and the other didn't. So this pretty much concludes my JavaScript journey to make Pong, I hope you enjoyed!</p>
<p><br></p>
<p><img src="https://lh3.ggpht.com/BnwplGa64eYvmoOMSSuK26UOyQXuPrcv09LKUbG_CsPGI2e4mX7MEbL5O46tqiUgotQ=w300" width="300" height="300"/></p>
<p><br></p>
<p>Github link for those interested in seeing my ugly code:</p>
<p>https://github.com/robert-macdonald/Personal-Web/tree/master/Pong</p>
</html>

👍 abit, wang, naquoya, good-karma, dunia, unipsycho, skeptic, masteryoda, sqube, naq1, bola, robotev, dennis1, mysteem, thebatchman, robertmacdonald, crazyhorselady, finleyexp, xeleos, happyphoenix, thebatchman1, meanpeoplesuck, tipoil17

`author`	robertmacdonald
`permlink`	pong-a-javascript-game
`category`	programming
`json_metadata`	{"tags":["programming","games","creativity"],"links":["https://github.com/robert-macdonald/Personal-Web/tree/master/Pong"],"app":"steemit/0.1","format":"html","image":["https://lh3.ggpht.com/BnwplGa64eYvmoOMSSuK26UOyQXuPrcv09LKUbG_CsPGI2e4mX7MEbL5O46tqiUgotQ=w300"]}
`created`	2017-02-01 05:45:30
`last_update`	2017-02-01 05:46:39
`depth`	0
`children`	4
`last_payout`	2017-03-04 15:45:30
`cashout_time`	1969-12-31 23:59:59
`total_payout_value`	0.034 HBD
`curator_payout_value`	0.009 HBD
`pending_payout_value`	0.000 HBD
`promoted`	0.000 HBD
`body_length`	2,509
`author_reputation`	2,496,882,375,498
`root_title`	"Pong - A JavaScript Game"
`beneficiaries`	`[]`
`max_accepted_payout`	1,000,000.000 HBD
`percent_hbd`	0
`post_id`	2,394,424
`net_rshares`	1,225,621,439,081
`author_curate_reward`	""

properties (23)vote details (23)

voter	rshares	pct
abit	618,150,151,297	1%
wang	303,241,570,940	56%
masteryoda	8,481,138,164	1%
thebatchman	1,119,213,684	3%
good-karma	67,971,952,210	43%
thebatchman1	69,193,169	3%
bola	3,327,502,047	5%
mysteem	1,949,181,475	43%
happyphoenix	174,859,047	12.9%
naquoya	96,327,091,474	100%
skeptic	12,124,653,784	100%
finleyexp	404,869,109	43%
robotev	2,525,417,175	20%
meanpeoplesuck	50,300,330	100%
unipsycho	41,758,226,407	100%
sqube	5,909,643,006	3%
dennis1	2,041,287,790	100%
crazyhorselady	930,857,318	100%
robertmacdonald	983,521,199	100%
dunia	52,594,546,420	25%
naq1	5,121,674,895	100%
xeleos	364,588,141	100%
tipoil17	0	100%

@naquoya · Feb 1 '17

Well done on persevering.

👍 fyrstikken, robertmacdonald, seraph, pfunk10
👎 asshole

`author`	naquoya
`permlink`	re-robertmacdonald-pong-a-javascript-game-20170201t063226260z
`category`	programming
`json_metadata`	{"tags":["programming"],"app":"steemit/0.1"}
`created`	2017-02-01 06:32:30
`last_update`	2017-02-01 06:32:30
`depth`	1
`children`	1
`last_payout`	2017-03-04 15:45:30
`cashout_time`	1969-12-31 23:59:59
`total_payout_value`	0.000 HBD
`curator_payout_value`	0.000 HBD
`pending_payout_value`	0.000 HBD
`promoted`	0.000 HBD
`body_length`	25
`author_reputation`	49,473,351,596,458
`root_title`	"Pong - A JavaScript Game"
`beneficiaries`	`[]`
`max_accepted_payout`	1,000,000.000 HBD
`percent_hbd`	10,000
`post_id`	2,394,629
`net_rshares`	57,396,864,347
`author_curate_reward`	""

properties (23)vote details (5)

voter	rshares	pct
pfunk10	136,741,145	1%
fyrstikken	56,272,760,548	1%
seraph	212,609,987	1%
robertmacdonald	983,521,199	100%
asshole	-208,768,532	-1%

@robertmacdonald · Feb 1 '17

Thanks, a lot comes from following through with what you set out to do.

👍 seraph, pfunk10
👎 asshole

`author`	robertmacdonald
`permlink`	re-naquoya-re-robertmacdonald-pong-a-javascript-game-20170201t153500186z
`category`	programming
`json_metadata`	{"tags":["programming"],"app":"steemit/0.1"}
`created`	2017-02-01 15:35:00
`last_update`	2017-02-01 15:35:00
`depth`	2
`children`	0
`last_payout`	2017-03-04 15:45:30
`cashout_time`	1969-12-31 23:59:59
`total_payout_value`	0.000 HBD
`curator_payout_value`	0.000 HBD
`pending_payout_value`	0.000 HBD
`promoted`	0.000 HBD
`body_length`	71
`author_reputation`	2,496,882,375,498
`root_title`	"Pong - A JavaScript Game"
`beneficiaries`	`[]`
`max_accepted_payout`	1,000,000.000 HBD
`percent_hbd`	10,000
`post_id`	2,397,255
`net_rshares`	140,583,017
`author_curate_reward`	""

properties (23)vote details (3)

voter	rshares	pct
pfunk10	136,741,145	1%
seraph	212,610,404	1%
asshole	-208,768,532	-1%

@xeleos · Feb 16 '17

Awesome, you're more fluent in JavaScript than I am, still don't know how to use Canvases yet lol, probably will learn some time. This is cool :3

properties (22)

`author`	xeleos
`permlink`	re-robertmacdonald-pong-a-javascript-game-2017215t19579596z
`category`	programming
`json_metadata`	{"tags":"programming","app":"esteem/1.3.8","format":"markdown+html"}
`created`	2017-02-16 00:57:12
`last_update`	2017-02-16 00:57:12
`depth`	1
`children`	1
`last_payout`	2017-03-04 15:45:30
`cashout_time`	1969-12-31 23:59:59
`total_payout_value`	0.000 HBD
`curator_payout_value`	0.000 HBD
`pending_payout_value`	0.000 HBD
`promoted`	0.000 HBD
`body_length`	145
`author_reputation`	269,068,919,450
`root_title`	"Pong - A JavaScript Game"
`beneficiaries`	`[]`
`max_accepted_payout`	1,000,000.000 HBD
`percent_hbd`	10,000
`post_id`	2,518,459
`net_rshares`	0

@robertmacdonald · Feb 16 '17

The createCanvas function is actually part of the p5js library.  The draw and setup are also from that library. I am better at javascript than I am at java, but I'm getting there.

👍 xeleos

`author`	robertmacdonald
`permlink`	re-xeleos-re-robertmacdonald-pong-a-javascript-game-2017215t19579596z-20170216t014225367z
`category`	programming
`json_metadata`	{"tags":["programming"],"app":"steemit/0.1"}
`created`	2017-02-16 01:42:24
`last_update`	2017-02-16 01:42:24
`depth`	2
`children`	0
`last_payout`	2017-03-04 15:45:30
`cashout_time`	1969-12-31 23:59:59
`total_payout_value`	0.000 HBD
`curator_payout_value`	0.000 HBD
`pending_payout_value`	0.000 HBD
`promoted`	0.000 HBD
`body_length`	179
`author_reputation`	2,496,882,375,498
`root_title`	"Pong - A JavaScript Game"
`beneficiaries`	`[]`
`max_accepted_payout`	1,000,000.000 HBD
`percent_hbd`	10,000
`post_id`	2,518,754
`net_rshares`	364,588,141
`author_curate_reward`	""

properties (23)vote details (1)

voter	weight	wgt%	rshares	pct	time
xeleos	0 B		364,588,141	100%