Skip to content

Instantly share code, notes, and snippets.

@austinrtn

austinrtn/index.html

Created February 23, 2020 01:41
Show Gist options
  • Save austinrtn/77820f89ec3f92fa1ed199530903ec1e to your computer and use it in GitHub Desktop.
Save austinrtn/77820f89ec3f92fa1ed199530903ec1e to your computer and use it in GitHub Desktop.
Download ZIP
// source https://jsbin.com
Raw
index.html
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<link rel="stylesheet" href="./styles.css" />
<meta charset="utf-8" />
<title></title>
<style id="jsbin-css">
canvas {
width: 500px;
height: 300px;
border: 3px solid black;
}
.slider {
-webkit-appearance: none;
width: 25%;
height: 25px;
background: #d3d3d3;
outline: none;
opacity: 0.7;
-webkit-transition: 0.2s;
transition: opacity 0.2s;
}
.slider:hover {
opacity: 1;
}
.slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 25px;
height: 25px;
background: #4caf50;
cursor: pointer;
}
.slider::-moz-range-thumb {
width: 25px;
height: 25px;
background: #4caf50;
cursor: pointer;
}
.select {
width: 25%;
height: 25px;
font-size: 20px;
border-radius: 6px;
opacity: .7;
}
.select:hover{
opacity: 1;
}
.red{
color: #FF0000;
}
.green{
color: #02e628;
}
.blue{
color: #1a12ff;
}
h1{
display: inline;
}
</style>
</head>
<body>
<div align="center">
<canvas id="canvas"></canvas>
</div>
<br /><br />
<h1>Speed:</h1>
<input
type="range"
id="speed"
class="slider"
value="6"
min="1"
max="15"
onchange="changeSpeed();"
/> <br><br>
<h1>Color: </h1>
<select class="select" id="color" onchange="changeColor();">
<option class='red' value='#FF0000'>Red</option>
<option class='green' value='#02e628'>Green</option>
<option class='blue' value="#1a12ff">Blue</option>
</select> <br><br>
<script src="./src.js"></script>
<h1 id='xCord'>X Cord: </h1><br>
<h1 id='yCord'>y Cord: </h1><br><br>
<button onclick="alert('Move: WASD \nGrow: 2 \nShrink: 1');">Instructions</button>
<script id="jsbin-javascript">
/**********
CANVAS
**********/
const c = document.getElementById("canvas");
const ctx = c.getContext("2d");
const WIDTH = c.width;
const HEIGHT = c.height;
/////////////////////////////////////////////////////
/**********
RECT OBJ
**********/
class Rect {
constructor(x, y, width, height, acc, color) {
this.x = x;
this.y = y;
this.width = width;
this.height = height;
this.acc = acc;
this.color = color;
this.speed = 1;
}
draw() {
ctx.beginPath();
ctx.fillStyle = this.color;
ctx.fillRect(this.x, this.y, this.width, this.height);
}
move(e){
if (this.speed <= player.acc) this.speed++;
if (e.keyCode === 87) player.y -= this.speed;
else if (e.keyCode === 65) player.x -= this.speed;
else if (e.keyCode === 83) player.y += this.speed;
else if (e.keyCode === 68) player.x += this.speed;
}
double(e){
if(e.keyCode === 50){
this.width *= 2;
this.height *= 2;
} else if(e.keyCode === 49){
this.width /= 2;
this.height /=2;
}
}
}
let player = new Rect(10, 10, 25, 25, 6, "#FF0000");
var objs = [player];
///////////////////////////////////////////////////////////////
/**********
GAMELOOP
**********/
setInterval(gameLoop, 33);
function gameLoop() {
ctx.clearRect(0, 0, WIDTH, HEIGHT);
for (var obj of objs) obj.draw();
document.getElementById("xCord").innerHTML = "X: " + player.x;
document.getElementById("yCord").innerHTML = "Y: " + player.y;
}
//////////////////////////////////////////////
/**********
CONTROLLER
**********/
function changeSpeed() {
player.acc = document.getElementById("speed").value;
}
function changeColor(){
player.color = document.getElementById("color").value;
console.log(player.color)
}
document.addEventListener("keydown", function(e) {
player.move(e);
player.double(e);
});
document.addEventListener("keyup", function(e) {
player.speed = 1;
});
</script>
<script id="jsbin-source-html" type="text/html"><!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<link rel="stylesheet" href="./styles.css" />
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div align="center">
<canvas id="canvas"></canvas>
</div>
<br /><br />
<h1>Speed:</h1>
<input
type="range"
id="speed"
class="slider"
value="6"
min="1"
max="15"
onchange="changeSpeed();"
/> <br><br>
<h1>Color: </h1>
<select class="select" id="color" onchange="changeColor();">
<option class='red' value='#FF0000'>Red</option>
<option class='green' value='#02e628'>Green</option>
<option class='blue' value="#1a12ff">Blue</option>
</select> <br><br>
<script src="./src.js"><\/script>
<h1 id='xCord'>X Cord: </h1><br>
<h1 id='yCord'>y Cord: </h1><br><br>
<button onclick="alert('Move: WASD \nGrow: 2 \nShrink: 1');">Instructions</button>
</body>
</html>
</script>
<script id="jsbin-source-css" type="text/css">canvas {
width: 500px;
height: 300px;
border: 3px solid black;
}
.slider {
-webkit-appearance: none;
width: 25%;
height: 25px;
background: #d3d3d3;
outline: none;
opacity: 0.7;
-webkit-transition: 0.2s;
transition: opacity 0.2s;
}
.slider:hover {
opacity: 1;
}
.slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 25px;
height: 25px;
background: #4caf50;
cursor: pointer;
}
.slider::-moz-range-thumb {
width: 25px;
height: 25px;
background: #4caf50;
cursor: pointer;
}
.select {
width: 25%;
height: 25px;
font-size: 20px;
border-radius: 6px;
opacity: .7;
}
.select:hover{
opacity: 1;
}
.red{
color: #FF0000;
}
.green{
color: #02e628;
}
.blue{
color: #1a12ff;
}
h1{
display: inline;
}
</script>
<script id="jsbin-source-javascript" type="text/javascript">/**********
CANVAS
**********/
const c = document.getElementById("canvas");
const ctx = c.getContext("2d");
const WIDTH = c.width;
const HEIGHT = c.height;
/////////////////////////////////////////////////////
/**********
RECT OBJ
**********/
class Rect {
constructor(x, y, width, height, acc, color) {
this.x = x;
this.y = y;
this.width = width;
this.height = height;
this.acc = acc;
this.color = color;
this.speed = 1;
}
draw() {
ctx.beginPath();
ctx.fillStyle = this.color;
ctx.fillRect(this.x, this.y, this.width, this.height);
}
move(e){
if (this.speed <= player.acc) this.speed++;
if (e.keyCode === 87) player.y -= this.speed;
else if (e.keyCode === 65) player.x -= this.speed;
else if (e.keyCode === 83) player.y += this.speed;
else if (e.keyCode === 68) player.x += this.speed;
}
double(e){
if(e.keyCode === 50){
this.width *= 2;
this.height *= 2;
} else if(e.keyCode === 49){
this.width /= 2;
this.height /=2;
}
}
}
let player = new Rect(10, 10, 25, 25, 6, "#FF0000");
var objs = [player];
///////////////////////////////////////////////////////////////
/**********
GAMELOOP
**********/
setInterval(gameLoop, 33);
function gameLoop() {
ctx.clearRect(0, 0, WIDTH, HEIGHT);
for (var obj of objs) obj.draw();
document.getElementById("xCord").innerHTML = "X: " + player.x;
document.getElementById("yCord").innerHTML = "Y: " + player.y;
}
//////////////////////////////////////////////
/**********
CONTROLLER
**********/
function changeSpeed() {
player.acc = document.getElementById("speed").value;
}
function changeColor(){
player.color = document.getElementById("color").value;
console.log(player.color)
}
document.addEventListener("keydown", function(e) {
player.move(e);
player.double(e);
});
document.addEventListener("keyup", function(e) {
player.speed = 1;
});
</script></body>
</html>
Raw
jsbin.untitled.css
canvas {
width: 500px;
height: 300px;
border: 3px solid black;
}
.slider {
-webkit-appearance: none;
width: 25%;
height: 25px;
background: #d3d3d3;
outline: none;
opacity: 0.7;
-webkit-transition: 0.2s;
transition: opacity 0.2s;
}
.slider:hover {
opacity: 1;
}
.slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 25px;
height: 25px;
background: #4caf50;
cursor: pointer;
}
.slider::-moz-range-thumb {
width: 25px;
height: 25px;
background: #4caf50;
cursor: pointer;
}
.select {
width: 25%;
height: 25px;
font-size: 20px;
border-radius: 6px;
opacity: .7;
}
.select:hover{
opacity: 1;
}
.red{
color: #FF0000;
}
.green{
color: #02e628;
}
.blue{
color: #1a12ff;
}
h1{
display: inline;
}
Raw
jsbin.untitled.js
/**********
CANVAS
**********/
const c = document.getElementById("canvas");
const ctx = c.getContext("2d");
const WIDTH = c.width;
const HEIGHT = c.height;
/////////////////////////////////////////////////////
/**********
RECT OBJ
**********/
class Rect {
constructor(x, y, width, height, acc, color) {
this.x = x;
this.y = y;
this.width = width;
this.height = height;
this.acc = acc;
this.color = color;
this.speed = 1;
}
draw() {
ctx.beginPath();
ctx.fillStyle = this.color;
ctx.fillRect(this.x, this.y, this.width, this.height);
}
move(e){
if (this.speed <= player.acc) this.speed++;
if (e.keyCode === 87) player.y -= this.speed;
else if (e.keyCode === 65) player.x -= this.speed;
else if (e.keyCode === 83) player.y += this.speed;
else if (e.keyCode === 68) player.x += this.speed;
}
double(e){
if(e.keyCode === 50){
this.width *= 2;
this.height *= 2;
} else if(e.keyCode === 49){
this.width /= 2;
this.height /=2;
}
}
}
let player = new Rect(10, 10, 25, 25, 6, "#FF0000");
var objs = [player];
///////////////////////////////////////////////////////////////
/**********
GAMELOOP
**********/
setInterval(gameLoop, 33);
function gameLoop() {
ctx.clearRect(0, 0, WIDTH, HEIGHT);
for (var obj of objs) obj.draw();
document.getElementById("xCord").innerHTML = "X: " + player.x;
document.getElementById("yCord").innerHTML = "Y: " + player.y;
}
//////////////////////////////////////////////
/**********
CONTROLLER
**********/
function changeSpeed() {
player.acc = document.getElementById("speed").value;
}
function changeColor(){
player.color = document.getElementById("color").value;
console.log(player.color)
}
document.addEventListener("keydown", function(e) {
player.move(e);
player.double(e);
});
document.addEventListener("keyup", function(e) {
player.speed = 1;
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment