HotRod Module Examples

Size: px

Start display at page:

Download "HotRod Module Examples"

Logan Rogers
6 years ago
Views:

1 HotRod Module Examples 2016 Skybuilder.net Skybuilder.net HotRod Module 1

It can be copied and pasted as-is into the respective fields in the Customise HotRod screen.

2 This is for illustrating how the HotRod module works, and the way to modify scripts you find on the Internet. Full Working Example 1 The following is the source code for a fully working, very simple Breakout style game. It can be copied and pasted as-is into the respective fields in the Customise HotRod screen. Insert into HTML field: <canvas id="mycanvas" width="480" height="320"></canvas> CSS: There is no CSS and this can be left empty. Insert into JavaScript field: var canvas = document.getelementbyid("mycanvas"); var ctx = canvas.getcontext("2d"); var ballradius = 10; var x = canvas.width/2; var y = canvas.height-30; var dx = 2; var dy = -2; var paddleheight = 10; var paddlewidth = 75; var paddlex = (canvas.width-paddlewidth)/2; var rightpressed = false; Skybuilder.net HotRod Module 2

3 var leftpressed = false; var brickrowcount = 5; var brickcolumncount = 3; var brickwidth = 70; var brickheight = 20; var brickpadding = 10; var brickoffsettop = 30; var brickoffsetleft = 30; var score = 0; var lives = 3; var bricks = []; for(c=0; c<brickcolumncount; c++) { bricks[c] = []; for(r=0; r<brickrowcount; r++) { bricks[c][r] = { x: 0, y: 0, status: 1 ; document.addeventlistener("keydown", keydownhandler, false); document.addeventlistener("keyup", keyuphandler, false); document.addeventlistener("mousemove", mousemovehandler, false); function keydownhandler(e) { if(e.keycode == 39) { rightpressed = true; else if(e.keycode == 37) { leftpressed = true; function keyuphandler(e) { if(e.keycode == 39) { rightpressed = false; else if(e.keycode == 37) { leftpressed = false; function mousemovehandler(e) { var relativex = e.clientx - canvas.offsetleft; if(relativex > 0 && relativex < canvas.width) { paddlex = relativex - paddlewidth/2; Skybuilder.net HotRod Module 3

4 function collisiondetection() { for(c=0; c<brickcolumncount; c++) { for(r=0; r<brickrowcount; r++) { var b = bricks[c][r]; if(b.status == 1) { if(x > b.x && x < b.x+brickwidth && y > b.y && y < b.y+brickheight) { dy = -dy; b.status = 0; score++; if(score == brickrowcount*brickcolumncount) { alert("you WIN, CONGRATS!"); document.location.reload(); function drawball() { ctx.beginpath(); ctx.arc(x, y, ballradius, 0, Math.PI*2); ctx.fillstyle = "#0095DD"; ctx.fill(); ctx.closepath(); function drawpaddle() { ctx.beginpath(); ctx.rect(paddlex, canvas.height-paddleheight, paddlewidth, paddleheight); ctx.fillstyle = "#0095DD"; ctx.fill(); ctx.closepath(); function drawbricks() { for(c=0; c<brickcolumncount; c++) { for(r=0; r<brickrowcount; r++) { if(bricks[c][r].status == 1) { var brickx = (r*(brickwidth+brickpadding))+brickoffsetleft; var bricky = (c*(brickheight+brickpadding))+brickoffsettop; Skybuilder.net HotRod Module 4

5 brickheight); bricks[c][r].x = brickx; bricks[c][r].y = bricky; ctx.beginpath(); ctx.rect(brickx, bricky, brickwidth, ctx.fillstyle = "#0095DD"; ctx.fill(); ctx.closepath(); function drawscore() { ctx.font = "16px Arial"; ctx.fillstyle = "#0095DD"; ctx.filltext("score: "+score, 8, 20); function drawlives() { ctx.font = "16px Arial"; ctx.fillstyle = "#0095DD"; ctx.filltext("lives: "+lives, canvas.width-65, 20); function draw() { ctx.clearrect(0, 0, canvas.width, canvas.height); drawbricks(); drawball(); drawpaddle(); drawscore(); drawlives(); collisiondetection(); if(x + dx > canvas.width-ballradius x + dx < ballradius) { dx = -dx; if(y + dy < ballradius) { dy = -dy; else if(y + dy > canvas.height-ballradius) { if(x > paddlex && x < paddlex + paddlewidth) { dy = -dy; else { lives--; if(!lives) { Skybuilder.net HotRod Module 5

6 //alert("game OVER"); document.location.reload(); else { x = canvas.width/2; y = canvas.height-30; dx = 3; dy = -3; paddlex = (canvas.width-paddlewidth)/2; { if(rightpressed && paddlex < canvas.width-paddlewidth) paddlex += 7; else if(leftpressed && paddlex > 0) { paddlex -= 7; x += dx; y += dy; requestanimationframe(draw); draw(); Skybuilder.net HotRod Module 6

Full Working Example 2 (with required modifications) Here is a working sample of a script requiring slight modifications in order for it to work correctly in the HotRod module.

Note: the doesnothing() function does, well, nothing but it serves as an example for a function that is called only within the JavaScript itself (i.e. within the HotRod module's own scope), and therefore does not need attaching to the window.

7 Full Working Example 2 (with required modifications) Here is a working sample of a script requiring slight modifications in order for it to work correctly in the HotRod module. The original function version and corresponding changes are highlighted in red (original) and blue (changes). Note: the doesnothing() function does, well, nothing but it serves as an example for a function that is called only within the JavaScript itself (i.e. within the HotRod module's own scope), and therefore does not need attaching to the window.skybuilder.hotrod object. ORIGINAL HTML (that required modification): <FORM name="live"> Please enter your age::<input TYPE="text" NAME="age" VALUE="" SIZE=20> Example: (november 1,1966) <BR><BR><BR> <INPUT TYPE="button" NAME="start" VALUE="Start Timer" ONCLICK="lifetimer(this.form)"> <INPUT TYPE="reset" NAME="resetb" VALUE="Reset Age"> <BR><BR> <TABLE border=0> <TR><TD>You are days old:</td> <TD> <INPUT TYPE="text" NAME="time1" VALUE="" size=8> </TD> <TR><TD>Plus hours old:</td> Skybuilder.net HotRod Module 7

8 <TD> <INPUT TYPE="text" NAME="time2" VALUE="" size=8> </TD> <TR><TD>Plus minutes old:</td> <TD><INPUT TYPE="text" NAME="time3" VALUE="" size=8></td> </TABLE> </FORM> ORIGINAL JavaScript (change requirements in red): function lifetimer() { today = new Date(); BirthDay = new Date(document.live.age.value); timeold = (today.gettime() - BirthDay.getTime()); sectimeold = timeold / 1000; secondsold = Math.floor(sectimeold); msperday = 24 * 60 * 60 * 1000 ; timeold = (today.gettime() - BirthDay.getTime()); e_daysold = timeold / msperday; daysold = Math.floor(e_daysold); e_hrsold = (e_daysold - daysold)*24; hrsold = Math.floor(e_hrsold); minsold = Math.floor((e_hrsold - hrsold)*60); document.live.time1.value = daysold; document.live.time2.value = hrsold; document.live.time3.value = minsold; window.status = "Well at the moment you are " + secondsold + "... seconds old."; timerid = settimeout("lifetimer()",1000); doesnothing(); function doesnothing() { //does nothing but only called within the Javascript //so does not need to be placed in the //window.skybuilder.hotrod object Skybuilder.net HotRod Module 8

9 MODIFIED HTML (changes in blue): <FORM name="live"> Please enter your age::<input TYPE="text" NAME="age" VALUE="" SIZE=20> Example: (november 1,1966) <BR><BR><BR> <INPUT TYPE="button" NAME="start" VALUE="Start Timer" ONCLICK="window.SkyBuilder.hotrod.lifetimer(this.form)"> <INPUT TYPE="reset" NAME="resetb" VALUE="Reset Age"> <BR><BR> <TABLE border=0> <TR><TD>You are days old:</td> <TD> <INPUT TYPE="text" NAME="time1" VALUE="" size=8> </TD> <TR><TD>Plus hours old:</td> <TD> <INPUT TYPE="text" NAME="time2" VALUE="" size=8> </TD> <TR><TD>Plus minutes old:</td> <TD><INPUT TYPE="text" NAME="time3" VALUE="" size=8></td> </TABLE> </FORM> MODIFIED JavaScript (modifications in blue): window.skybuilder.hotrod.lifetimer = function() { today = new Date(); BirthDay = new Date(document.live.age.value); timeold = (today.gettime() - BirthDay.getTime()); sectimeold = timeold / 1000; secondsold = Math.floor(sectimeold); msperday = 24 * 60 * 60 * 1000 ; timeold = (today.gettime() - BirthDay.getTime()); e_daysold = timeold / msperday; daysold = Math.floor(e_daysold); e_hrsold = (e_daysold - daysold)*24; hrsold = Math.floor(e_hrsold); minsold = Math.floor((e_hrsold - hrsold)*60); Skybuilder.net HotRod Module 9

10 document.live.time1.value = daysold; document.live.time2.value = hrsold; document.live.time3.value = minsold; window.status = "Well at the moment you are " + secondsold + "... seconds old."; timerid = settimeout("window.skybuilder.hotrod.lifetimer()",1000); doesnothing(); function doesnothing() { //does nothing but only called within the Javascript //so does not need to be placed in the //window.skybuilder.hotrod object Skybuilder.net HotRod Module 10

<script type="text/javascript" src="breakout.js"> </script>