A Pen by Saminou yengue kizidi.

A-Pen-by-Saminou-yengue-kizidi.markdown

A Pen by Saminou yengue kizidi

A Pen by Saminou yengue kizidi on CodePen.

License.

index.html

<canvas width="500" height="200" id="js-canvas"></canvas>
<div id="js-variable-changer-container" class="container"></div>

script.js

// The VariableChanger helps to quickly create a rangeslider to
// adjust variables of an object.

// This is a demo for my variableChanger-function. I am using it 
// to adjust background-positions and player-speed in a game I am 
// currently making.  



// A simple object-constructor for the small box we are making.
function ExampleConstructor() {
  this.x = 100;
  this.y = 50;
  this.w = 20;
  this.h = 20;
  this.color = "#abcdef";
}

// The variable-changer-function needs getter and setter functions
// for all variables you want to change via the rangeslider.
ExampleConstructor.prototype.getX = function() {
  return this.x;
}

ExampleConstructor.prototype.setX = function(_sliderValue) {
  this.x = _sliderValue;
}

ExampleConstructor.prototype.getH = function() {
  return this.h;
}

ExampleConstructor.prototype.setH = function(_sliderValue) {
  this.h = _sliderValue;
}


// This is the actual function.
// The arguments it takes are:
// * The object that contains the variable you want to change (in our case: exampleObject) 
// * The setter-function (e.g. exampleObject.getX)
// * The getter-function (e.g. exampleObject.setX)
// * A string for the rangeslider-caption (e.g. "X-Position")
// * The minimum value
// * The maximum value
// * The step (e.g. 5 makes the slider change the value in steps of 5)
  
function makeVariableChanger(_object, _setterFunction, _getterFunction, _title, _min, _max, _step) {

  //creating the HTML-elements for adding to the container
  var _controlElementContainer = document.createElement("div");
	var _controlElementHeadline = document.createElement("div");
	var _controlElementCaption = document.createElement("label");
	var _controlElementRangeSlider = document.createElement("input");

  //get the current value of the variable
	var _currentValue = _getterFunction.call(_object);

  //set the options for the rangeslider
  _controlElementRangeSlider.type = "range"; 
  _controlElementRangeSlider.min = _min; 
  _controlElementRangeSlider.max = _max; 
  _controlElementRangeSlider.step = 1; 
  _controlElementRangeSlider.value = _currentValue; 

  //set the headline and current-value-display
  _controlElementHeadline.innerHTML = _title;
	_controlElementCaption.innerHTML = _currentValue;

  //append everything to the container
	_controlElementContainer.appendChild(_controlElementHeadline);
	_controlElementContainer.appendChild(_controlElementCaption);
	_controlElementContainer.appendChild(_controlElementRangeSlider);

  //this is the container all the sliders will be added to
	var _controlElementParent = document.getElementById("js-variable-changer-container");

  //append all elements
  _controlElementParent.appendChild(_controlElementContainer);

  //start listening to changes of the slider
	_controlElementRangeSlider.addEventListener("change", function() {

    // set the slider's caption and the actual variable to the newly set rangeslider-value
  	_controlElementCaption.innerHTML = _controlElementRangeSlider.value;
	  _setterFunction.call(_object, parseInt(_controlElementRangeSlider.value));

});

}

// create canvas, context and an instance of our example-object
var canvas = document.getElementById('js-canvas');
var ctx = canvas.getContext('2d');
var exampleObject = new ExampleConstructor();



function canvasDrawLoop() {
  
  ctx.clearRect(0,0,canvas.width, canvas.height);
  ctx.fillStyle = exampleObject.color;
  ctx.fillRect(exampleObject.x, exampleObject.y, exampleObject.w, exampleObject.h);              
  setTimeout(canvasDrawLoop, 30);

}

//on document-load, create the sliders for the X- and the height-value of our box and start the drawing-loop   
window.onload = function() {
  makeVariableChanger(exampleObject, exampleObject.setX, exampleObject.getX, "Box-X-Position", 0, 400, 5);
  makeVariableChanger(exampleObject, exampleObject.setH, exampleObject.getH, "Box-Height", -100, 100, 1);
  canvasDrawLoop();
};

style.css

body {background:black; font-family:monospace}
canvas {background:white;}
.container {background:grey; width:480px; padding:10px;}
.container * {display:block; text-align:center; width:100%;}