technicalkiwi
/
animate
mirror of https://github.com/SamEyeBam/animate.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Faces different directions

This commit is contained in:
Sam 2024-09-29 16:40:00 +13:00
parent 7e755bbc27
commit 52c5462b08
3 changed files with 65 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
Larry the snail/index.html
View File

@ -12,9 +12,9 @@
<div id="toolbar"> <div id="toolbar">
<br> <br>
<select id="shape-selector"> <select id="shape-selector">
<option value="Larry">Larry</option>
<option value="TestParent">Test Parent</option> <option value="TestParent">Test Parent</option>
<option value="PolyTwistColourWidth">PolyTwistColourWidth</option> <option value="PolyTwistColourWidth">PolyTwistColourWidth</option>
<option value="Larry">Larry</option>
<option value="Larry">Snails</option> <option value="Larry">Snails</option>
<option value="Larry">Background</option> <option value="Larry">Background</option>
</select> </select>

4
Larry the snail/js/helper.js
View File

@ -52,9 +52,9 @@ async function fetchConfig(className) {
// Movement controls // Movement controls
{ {
type: "range", type: "range",
min: -360, min: 0,
max: 360, max: 360,
defaultValue: 90, defaultValue: 1,
property: "moveDirection" property: "moveDirection"
}, },
{ {

26
Larry the snail/js/objects.js
View File

@ -53,8 +53,10 @@ class Larry extends BaseShape {
this.headHeight = 24; this.headHeight = 24;
this.headOffsetX = 54 - this.headWidth * this.magnitude / 2; this.headOffsetX = 54 - this.headWidth * this.magnitude / 2;
this.headOffsetY = this.bodyHeight * this.magnitude - 7; // Bottom of the body minus 7 pixels this.headOffsetY = this.bodyHeight * this.magnitude - 7; // Bottom of the body minus 7 pixels
this.globalX = Math.random() * 1500 + 400; this.globalX = centerX;
this.globalY = Math.random()*centerY + centerY ; this.globalY = centerY;
// this.globalX = Math.random() * 1500 + 400;
// this.globalY = Math.random() * centerY + centerY;
this.localX = 0; this.localX = 0;
this.localY = 0; this.localY = 0;
this.speedMultiplier = 100; this.speedMultiplier = 100;
@ -95,6 +97,9 @@ class Larry extends BaseShape {
timestamp *= (this.speedMultiplier / 100); timestamp *= (this.speedMultiplier / 100);
// console.log(timestamp - this.lastTimestamp) // console.log(timestamp - this.lastTimestamp)
this.lastTimestamp = timestamp; this.lastTimestamp = timestamp;
// Draw background // Draw background
if (this.backgroundImage.src) { if (this.backgroundImage.src) {
// console.log("drawing background: " + this.backgroundImage.src) // console.log("drawing background: " + this.backgroundImage.src)
@ -104,13 +109,21 @@ class Larry extends BaseShape {
// Draw body at its anchor point (center-bottom) // Draw body at its anchor point (center-bottom)
const bodyX = this.globalX - (this.bodyWidth * this.magnitude / 2); const bodyX = this.globalX - (this.bodyWidth * this.magnitude / 2);
const bodyY = this.globalY - this.bodyHeight * this.magnitude; const bodyY = this.globalY - this.bodyHeight * this.magnitude;
let facingRight = false
if (this.moveDirection <= 90 || this.moveDirection > 270) {
facingRight = true;
}
// ctx.drawImage(this.bodyImage, bodyX, bodyY, this.bodyWidth * this.magnitude, this.bodyHeight * this.magnitude); // ctx.drawImage(this.bodyImage, bodyX, bodyY, this.bodyWidth * this.magnitude, this.bodyHeight * this.magnitude);
this.drawImage(this.bodyImage,bodyX,bodyY,this.bodyWidth*this.magnitude,this.bodyHeight*this.magnitude,undefined,true) this.drawImage(this.bodyImage, bodyX, bodyY, this.bodyWidth * this.magnitude, this.bodyHeight * this.magnitude, undefined, !facingRight)
console.log(this.bodyWidth * this.magnitude * this.moveDirection)
// Draw head aligned with body // Draw head aligned with body
// const headX = bodyX + this.headOffsetX; // const headX = bodyX + this.headOffsetX;
// let headY = bodyY + this.headOffsetY - this.headHeight; // let headY = bodyY + this.headOffsetY - this.headHeight;
const headX = bodyX + (53.5 * this.magnitude - this.headWidth * this.magnitude / 2); // const headX = bodyX + (53.5 * this.magnitude - this.headWidth * this.magnitude / 2);
const headX = facingRight? bodyX + (53.5 * this.magnitude - this.headWidth * this.magnitude / 2): bodyX
let headY = bodyY + (this.bodyHeight * this.magnitude - 7 * this.magnitude) - this.headHeight * this.magnitude; let headY = bodyY + (this.bodyHeight * this.magnitude - 7 * this.magnitude) - this.headHeight * this.magnitude;
//eating //eating
@ -138,8 +151,9 @@ class Larry extends BaseShape {
// ctx.drawImage(this.foodImage, bodyX + this.foodXoffset, bodyY + this.foodYoffset, this.foodImage.width * this.foodSizeMuliplier, this.foodImage.height * this.foodSizeMuliplier) // ctx.drawImage(this.foodImage, bodyX + this.foodXoffset, bodyY + this.foodYoffset, this.foodImage.width * this.foodSizeMuliplier, this.foodImage.height * this.foodSizeMuliplier)
} }
ctx.drawImage(this.headImage, headX, headY, this.headWidth * this.magnitude, this.headHeight * this.magnitude); // ctx.drawImage(this.headImage, headX, headY, this.headWidth * this.magnitude, this.headHeight * this.magnitude);
this.drawImage(this.headImage,headX,headY, this.headWidth * this.magnitude, this.headHeight * this.magnitude,undefined,true) this.drawImage(this.headImage, headX, headY, this.headWidth * this.magnitude, this.headHeight * this.magnitude, undefined, !facingRight)
// this.drawImage(this.headImage,headX,headY, this.headWidth * this.magnitude, this.headHeight * this.magnitude,undefined,true)
// Draw hat if any // Draw hat if any
if (this.hatImage.src) { if (this.hatImage.src) {
this.drawCrosshair(headX, headY, 20); this.drawCrosshair(headX, headY, 20);