Source commit
This commit is contained in:
parent
7413721697
commit
3eff3fec65
12 changed files with 194 additions and 2 deletions
|
|
@ -1,3 +1,3 @@
|
|||
# fa-strip-tutorial
|
||||
# HTML5 Canvass Tutorial
|
||||
|
||||
From https://www.furaffinity.net/gallery/blueballs/folder/408099/HTML5-Canvas-Tutorial
|
||||
This is taken directly from Blueball's [HTML5 Canvass Tutorial](https://www.furaffinity.net/gallery/blueballs/folder/408099/HTML5-Canvas-Tutorial) on FA for reference. The ``/public`` directly is used for local static server hosting.
|
||||
|
|
|
|||
BIN
public/belly.png
Normal file
BIN
public/belly.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 37 KiB |
BIN
public/blink.png
Normal file
BIN
public/blink.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 43 KiB |
BIN
public/head.png
Normal file
BIN
public/head.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 45 KiB |
13
public/index.html
Normal file
13
public/index.html
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Tutorial Game</title>
|
||||
<script type='text/javascript' src='tutorial.js'></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="load" >Loading...</div>
|
||||
<canvas id="viewport"></canvas>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
BIN
public/pants.png
Normal file
BIN
public/pants.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 61 KiB |
BIN
public/penis.png
Normal file
BIN
public/penis.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
BIN
public/shirt.png
Normal file
BIN
public/shirt.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 58 KiB |
179
public/tutorial.js
Normal file
179
public/tutorial.js
Normal file
|
|
@ -0,0 +1,179 @@
|
|||
window.onload = function() {
|
||||
// Get the canvas and context
|
||||
var canvas = document.getElementById("viewport");
|
||||
var context = canvas.getContext("2d");
|
||||
|
||||
context.canvas.width = 856;
|
||||
context.canvas.height = 1193;
|
||||
|
||||
var images = ["wolfnaked.png", "belly.png", "head.png", "penis.png", "undies.png", "shirt.png", "pants.png", "blink.png"];
|
||||
var loadedimages = [];
|
||||
|
||||
var wearing_shirt = true;
|
||||
var wearing_jeans = true;
|
||||
var wearing_underwear = true;
|
||||
var blinktimer = 0;
|
||||
var breathtimer = 0;
|
||||
var speechtimer = 0;
|
||||
var quote = "";
|
||||
|
||||
buttons = [{ //Shirt
|
||||
x: 300,
|
||||
y: 200,
|
||||
width: 250,
|
||||
height: 350
|
||||
}, { //Pants
|
||||
x: 270,
|
||||
y: 600,
|
||||
width: 400,
|
||||
height: 450
|
||||
}, { //Underwear
|
||||
x: 300,
|
||||
y: 520,
|
||||
width: 300,
|
||||
height: 200
|
||||
}];
|
||||
|
||||
function loadImages(imageindex) {
|
||||
if (imageindex < images.length) {
|
||||
var newimage = new Image();
|
||||
newimage.onload = function() {
|
||||
loadedimages.push(newimage);
|
||||
imageindex++;
|
||||
loadImages(imageindex);
|
||||
}
|
||||
newimage.src = images[imageindex];
|
||||
} else {
|
||||
init();
|
||||
}
|
||||
};
|
||||
|
||||
function init() {
|
||||
document.getElementById("load").style.display = "none";
|
||||
canvas.addEventListener("mousedown", onMouseDown);
|
||||
doTheRest();
|
||||
};
|
||||
|
||||
function calculatebellyrise() {
|
||||
return Math.sin(breathtimer / 50);
|
||||
};
|
||||
|
||||
function drawBubble() {
|
||||
context.font = "20pt Verdana";
|
||||
|
||||
var x = 300;
|
||||
var y = 350;
|
||||
var w = context.measureText(quote).width + 10;
|
||||
var h = parseInt(context.font) + 10;
|
||||
var radius = 10;
|
||||
if (speechtimer) {
|
||||
var r = x + w;
|
||||
var b = y + h;
|
||||
context.beginPath();
|
||||
context.strokeStyle = "black";
|
||||
context.lineWidth = "2";
|
||||
context.moveTo(x + radius, y);
|
||||
context.lineTo(x + radius / 2, y - 10);
|
||||
context.lineTo(x + radius * 2, y);
|
||||
context.lineTo(r - radius, y);
|
||||
context.quadraticCurveTo(r, y, r, y + radius);
|
||||
context.lineTo(r, y + h - radius);
|
||||
context.quadraticCurveTo(r, b, r - radius, b);
|
||||
context.lineTo(x + radius, b);
|
||||
context.quadraticCurveTo(x, b, x, b - radius);
|
||||
context.lineTo(x, y + radius);
|
||||
context.quadraticCurveTo(x, y, x + radius, y);
|
||||
context.fillStyle = "#ffffff";
|
||||
context.fill();
|
||||
context.stroke();
|
||||
|
||||
context.fillStyle = "black";
|
||||
context.fillText(quote, x + 5, y + h - 5);
|
||||
}
|
||||
};
|
||||
|
||||
function doTheRest() {
|
||||
window.requestAnimationFrame(doTheRest);
|
||||
|
||||
breathtimer++;
|
||||
blinktimer++;
|
||||
if (blinktimer > 200) {
|
||||
blinktimer = 0;
|
||||
}
|
||||
|
||||
speechtimer--;
|
||||
if (speechtimer < 0) {
|
||||
speechtimer = 0;
|
||||
}
|
||||
|
||||
context.globalAlpha = 1;
|
||||
context.fillStyle = "lightblue";
|
||||
context.fillRect(0, 0, canvas.width, canvas.height);
|
||||
context.drawImage(loadedimages[0], 0, 0, canvas.width, canvas.height);
|
||||
|
||||
var amount_to_raise = calculatebellyrise() * 2;
|
||||
context.drawImage(loadedimages[1], 0, 0 + amount_to_raise, canvas.width, canvas.height);
|
||||
if (blinktimer > 190) {
|
||||
context.drawImage(loadedimages[7], 0, 0, canvas.width, canvas.height);
|
||||
} else {
|
||||
context.drawImage(loadedimages[2], 0, 0, canvas.width, canvas.height);
|
||||
}
|
||||
|
||||
|
||||
if (!wearing_underwear && !wearing_jeans) {
|
||||
context.drawImage(loadedimages[3], 0, 0, canvas.width, canvas.height);
|
||||
}
|
||||
if (wearing_underwear && !wearing_jeans) {
|
||||
context.drawImage(loadedimages[4], 0, 0, canvas.width, canvas.height);
|
||||
}
|
||||
if (wearing_shirt) {
|
||||
context.drawImage(loadedimages[5], 0, 0 + amount_to_raise, canvas.width, canvas.height);
|
||||
}
|
||||
if (wearing_jeans) {
|
||||
context.drawImage(loadedimages[6], 0, 0, canvas.width, canvas.height);
|
||||
}
|
||||
|
||||
drawBubble();
|
||||
|
||||
// context.fillStyle = "black";
|
||||
// context.globalAlpha = 0.8;
|
||||
// for (var i = 0; i < buttons.length; i++) {
|
||||
// context.fillRect(buttons[i].x, buttons[i].y, buttons[i].width, buttons[i].height);
|
||||
// }
|
||||
};
|
||||
|
||||
function getMousePos(canvas, e) {
|
||||
var rect = canvas.getBoundingClientRect();
|
||||
return {
|
||||
x: Math.round((e.clientX - rect.left) / (rect.right - rect.left) * canvas.width),
|
||||
y: Math.round((e.clientY - rect.top) / (rect.bottom - rect.top) * canvas.height)
|
||||
};
|
||||
}
|
||||
|
||||
function onMouseDown(e) {
|
||||
var pos = getMousePos(canvas, e);
|
||||
for (var i = 0; i < buttons.length; i++) {
|
||||
if (pos.x >= buttons[i].x && pos.x < buttons[i].x + buttons[i].width &&
|
||||
pos.y >= buttons[i].y && pos.y < buttons[i].y + buttons[i].height) {
|
||||
|
||||
if (i == 0) { //Shirt
|
||||
wearing_shirt = false;
|
||||
quote = "I have very soft chest fur!";
|
||||
speechtimer = 50;
|
||||
break;
|
||||
}
|
||||
if (i == 1 && wearing_jeans) { //Pants
|
||||
wearing_jeans = false;
|
||||
break;
|
||||
}
|
||||
if (i == 2 && !wearing_jeans) { //Underwear - but only if the pants are off
|
||||
wearing_underwear = false;
|
||||
break;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
loadImages(0);
|
||||
};
|
||||
BIN
public/undies.png
Normal file
BIN
public/undies.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 35 KiB |
BIN
public/wolfnaked.png
Normal file
BIN
public/wolfnaked.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 116 KiB |
BIN
public/wolfnaked1.png
Normal file
BIN
public/wolfnaked1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 175 KiB |
Reference in a new issue