Skip to content

Instantly share code, notes, and snippets.

@kevinkid

kevinkid/index.html

Created September 18, 2015 15:05
Show Gist options
  • Save kevinkid/e1ac284cee2ea905aa53 to your computer and use it in GitHub Desktop.
Save kevinkid/e1ac284cee2ea905aa53 to your computer and use it in GitHub Desktop.
Download ZIP
rOeQLL
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>Programming Game </title>
<!--external javascript dependancies-->
</head>
<body>
<div class="content">
<canvas id="canvas">
<!--animated background of the game goes here-->
canvas not supported
</canvas>
</div>
</body>
</html>
Raw
script.js
window.onload = getme;
function getme() {
//______________________ objects declarations __________
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d"),
ctx2 = canvas.getContext("2d"),
ctx2b = canvas.getContext("2d"),
ctx3 = canvas.getContext("2d"),
ctx4 = canvas.getContext("2d"),
ctx5 = canvas.getContext("2d"),
ctx6 = canvas.getContext("2d"),
ctx7 = canvas.getContext("2d");
//================== end canvas objects ==============
var s = 1,
sz = 1,
i = 1,
size = 100,
size2 = 90,
size3 = 80,
size4 = 70.7,
rx,
ry,
rw,
rh,
trial = 50,
trial2 = 50,
move = 0;
var height = window.innerHeight;
var width = window.innerWidth;
canvas.height = height;
canvas.width = width;
function maker() {
var s = Math.floor(Math.random() * 100),
xpos = Math.floor(Math.random() * width), // width is same as x coordinates
ypos = Math.floor(Math.random() * height), // height same as y coordinates
w = Math.floor(Math.random() * width),
h = Math.floor(Math.random() * height),
op = Math.floor(Math.random());
var s1 = Math.floor(Math.random() * 100),
xpos1 = Math.floor(Math.random() * width), // width is same as x coordinates
ypos1 = Math.floor(Math.random() * height), // height same as y coordinates
w1 = Math.floor(Math.random() * width),
h1 = Math.floor(Math.random() * height),
op1 = Math.floor(Math.random());
var s2 = Math.floor(Math.random() * 100),
xpos2 = Math.floor(Math.random() * width), // width is same as x coordinates
ypos2 = Math.floor(Math.random() * height), // height same as y coordinates
w2 = Math.floor(Math.random() * width),
h2 = Math.floor(Math.random() * height),
op2 = Math.floor(Math.random());
var s3 = Math.floor(Math.random() * 100),
xpos3 = Math.floor(Math.random() * width), // width is same as x coordinates
ypos3 = Math.floor(Math.random() * height), // height same as y coordinates
w3 = Math.floor(Math.random() * width),
h3 = Math.floor(Math.random() * height),
op3 = Math.floor(Math.random());
var s4 = Math.floor(Math.random() * 100),
xpos4 = Math.floor(Math.random() * width), // width is same as x coordinates
ypos4 = Math.floor(Math.random() * height), // height same as y coordinates
w4 = Math.floor(Math.random() * width),
h4 = Math.floor(Math.random() * height),
op4 = Math.floor(Math.random());
var s5 = Math.floor(Math.random() * 100),
xpos5 = Math.floor(Math.random() * width), // width is same as x coordinates
ypos5 = Math.floor(Math.random() * height), // height same as y coordinates
w5 = Math.floor(Math.random() * width),
h5 = Math.floor(Math.random() * height),
op5 = Math.floor(Math.random());
var s6 = Math.floor(Math.random() * 100),
xpos6 = Math.floor(Math.random() * width), // width is same as x coordinates
ypos6 = Math.floor(Math.random() * height), // height same as y coordinates
w6 = Math.floor(Math.random() * width),
h6 = Math.floor(Math.random() * height),
op6 = Math.floor(Math.random());
var s7 = Math.floor(Math.random() * 100),
xpos7 = Math.floor(Math.random() * width), // width is same as x coordinates
ypos7 = Math.floor(Math.random() * height), // height same as y coordinates
w7 = Math.floor(Math.random() * width),
h7 = Math.floor(Math.random() * height),
op7 = Math.floor(Math.random());
//____ rect one
ctx.strokeRect(xpos, ypos, w, h);
ctx.strokeStyle = 'rgba(182, 255, 0, 0.94)';
//____ rect two
ctx2.strokeRect(xpos1, ypos1, w1, h1);
ctx2.strokeStyle = 'rgba(255, 106, 0, 0.92)';
//____ rect three
ctx2b.strokeRect(xpos2, ypos2, w2, h2);
ctx2b.strokeStyle = 'rgba(255, 0, 0, 0.95)';
//__ rect four
ctx3.strokeRect(xpos3, ypos3, w3, h3);
ctx3.strokeStyle = 'rgba(36, 237, 157, 0.80)';
//__ rect five
ctx3.strokeRect(xpos3, ypos3, w3, h3);
ctx3.strokeStyle = 'rgba(36, 237, 157, 0.80)';
ctx4.strokeRect(xpos4, ypos4, w4, h4);
ctx4.strokeStyle = 'rgba(255, 216, 0, 0.96)';
ctx5.strokeRect(xpos5, ypos5, w5, h5);
ctx5.strokeStyle = 'rgba(65, 0, 255, 0.86)';
ctx6.strokeRect(xpos6, ypos6, w6, h6);
ctx6.strokeStyle = 'rgba(255, 0, 242, 0.96)';
ctx7.strokeRect(xpos7, ypos7, w7, h7);
ctx7.strokeStyle = 'rgba(255, 0, 109, 0.96)';
function clear_c() {
setInterval(function () {
ctx3.clearRect(0, 0, width, height);
}, 2990);
}
clear_c();
}
function maker_r() {
setInterval(function () {
maker();
}, 3000);
}
maker_r();
//_____________ checking how many times an interval was called
var num = 0;
function call(event) {
return setInterval(function () {
alert('interval stated');// still going to be called
//add();
console.log(parseInt(num++));// returns undefined 1st time
tell();
}, 10000); // ten seconds is alot
}
var add = function () {
alert('add called');
return parseInt(num++);
}
function tell() {
// __________________ checks how many times an interval has been called ____________
// useful if you want to control when to actually call a clear function and when to save a canvas state
if (num == 0 || num == undefined) {
call();
}
else if (num < 9) {
alert('keep going strong ');
}
else {
alert('Nice ! , interval exceeded three times another function will be called');
}
}
function restore_ctx2() {
ctx2.save(); // Save the context on a stack
//you can save and restore if you want to only remove the last drawn canvas element
ctx2.restore();
}
}
Raw
style.css
html {
/* background-image: -webkit-radial-gradient(70% 120%, 1600px, rgba(33, 39, 80, 1) 10%, #020409 100%); */
background-image: radial-gradient(900px at 250% 300%, #000 1%,rgba(0, 92, 98, 0.98) 50%);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment