Faces different directions
This commit is contained in:
parent
7e755bbc27
commit
52c5462b08
|
@ -12,9 +12,9 @@
|
|||
<div id="toolbar">
|
||||
<br>
|
||||
<select id="shape-selector">
|
||||
<option value="Larry">Larry</option>
|
||||
<option value="TestParent">Test Parent</option>
|
||||
<option value="PolyTwistColourWidth">PolyTwistColourWidth</option>
|
||||
<option value="Larry">Larry</option>
|
||||
<option value="Larry">Snails</option>
|
||||
<option value="Larry">Background</option>
|
||||
</select>
|
||||
|
|
|
@ -52,9 +52,9 @@ async function fetchConfig(className) {
|
|||
// Movement controls
|
||||
{
|
||||
type: "range",
|
||||
min: -360,
|
||||
min: 0,
|
||||
max: 360,
|
||||
defaultValue: 90,
|
||||
defaultValue: 1,
|
||||
property: "moveDirection"
|
||||
},
|
||||
{
|
||||
|
|
|
@ -53,8 +53,10 @@ class Larry extends BaseShape {
|
|||
this.headHeight = 24;
|
||||
this.headOffsetX = 54 - this.headWidth * this.magnitude / 2;
|
||||
this.headOffsetY = this.bodyHeight * this.magnitude - 7; // Bottom of the body minus 7 pixels
|
||||
this.globalX = Math.random() * 1500 + 400;
|
||||
this.globalY = Math.random()*centerY + centerY ;
|
||||
this.globalX = centerX;
|
||||
this.globalY = centerY;
|
||||
// this.globalX = Math.random() * 1500 + 400;
|
||||
// this.globalY = Math.random() * centerY + centerY;
|
||||
this.localX = 0;
|
||||
this.localY = 0;
|
||||
this.speedMultiplier = 100;
|
||||
|
@ -95,6 +97,9 @@ class Larry extends BaseShape {
|
|||
timestamp *= (this.speedMultiplier / 100);
|
||||
// console.log(timestamp - this.lastTimestamp)
|
||||
this.lastTimestamp = timestamp;
|
||||
|
||||
|
||||
|
||||
// Draw background
|
||||
if (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)
|
||||
const bodyX = this.globalX - (this.bodyWidth * this.magnitude / 2);
|
||||
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);
|
||||
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
|
||||
// const headX = bodyX + this.headOffsetX;
|
||||
// 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;
|
||||
|
||||
//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.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)
|
||||
// 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, !facingRight)
|
||||
// this.drawImage(this.headImage,headX,headY, this.headWidth * this.magnitude, this.headHeight * this.magnitude,undefined,true)
|
||||
// Draw hat if any
|
||||
if (this.hatImage.src) {
|
||||
this.drawCrosshair(headX, headY, 20);
|
||||
|
|
Loading…
Reference in New Issue