DEV Community: Shai Angress

One hour Game jam experience

Shai Angress — Wed, 10 Feb 2021 22:02:14 +0000

A short story about my experience with one hour game jam.

What is one hour game jam?
One hour game jam, or in short 1hgj, is a great way to improve your skills in game design and development, You will be amazed by what you can achieve in just one hour. The concept is straight forward, you have one hour to design, develop and publish a game related to the random subject which is revealed when the jam starts.

First Experience
I had the chance to participate in 1hgj 2 times by the time writing this post; The first time the subject was “one hard minute”, so I came up with some sort of a “maze” game where you have one minute to complete it; From this game I created a full web game “fukaso”, inspired by this jam, you can see the value that 1hgj gives you, it makes you a better game designer and also gives you inspiration for your creations.

FTOHGJ! by ꗟḫߥï 𝚫ᥰგ𝖗𝟈ʂʂ

Play the final version for free

Second jam
On the second jam the subject was “limit”, and I had a hard time to find an idea for a game about limit, a game that is simple enough to create in one hour…eventually after about 20 minutes of just thinking and listening to my girlfriend’s ideas as well I came up with a goofy little game that you need to keep the weight-limit for your hippo; And the reactions was surprising and made me feel good about that game.

Play Hippo Limit

Live stream of the published games
In 1hgj, at the end of the jam, they sometimes stream a live session (on their website) playing all the games submitted to the jam, this is an amazing experience by it self! It gives you a small shot of adrenaline and also the opportunity to see an experienced person’s reaction for your game live!

In conclusion
I recommend this jam for all game designers, experienced and noobs :)
It makes you realize what are the important parts about game design and focus on them.
The jam is taking place every Saturday night and you can see the exact hour on their website;
so go crazy! go and do stuff, it will make you laugh.

Links:
1hgj website
My 1hgj page

Embed dev.to articles in your Vue app

Shai Angress — Wed, 03 Feb 2021 17:50:51 +0000

I was looking for a way to show posts from dev.to on my website and I found this post by comscience who made exactly that in React, so I made a Vue version with Vuetify.
Here you go:

You can also install it via npm:
npm i dev-to-embed-vue

And then import the component in your app:

import DevToEmbed from 'dev-to-embed-vue/src/DevToEmbed'

And use it in your template:

<DevToEmbed userName="venatus"/>

Source code:

sangress / dev-to-embed-vue

Embed dev.to posts in your website

dev_to_embed

Project setup

npm install

Compiles and hot-reloads for development

npm run serve

Compiles and minifies for production

npm run build

Lints and fixes files

npm run lint

Customize configuration

See Configuration Reference.

View on GitHub

Tutorial: Make an Heart "clicker" with vue.js and firebase

Shai Angress — Sat, 30 Jan 2021 17:42:55 +0000

Hi!
In this tutorial you will learn how to make a "heart clicker" interaction/game!

This tutorial can be a good practice for anyone who want to learn javascript, vue, web-development, it can also fit experience developers who needs a little refreshment.
To make this tutorial work for your best, please prepare the following, I'll be waiting here:

- Vue app (you can use vue-cli).
- firebase project and App (we'll setup it later).

Ok good, now we're ready to start.

Part 1 - Create the heart
In this part we'll focus on drawing the heart using javascript canvas element.
Create a new component, name it HeartClicker and replace all the App.vue template with this component, so your app template should look like follow:

<template>
  <div id="app">
    <HeartClicker />
  </div>
</template>

Add a canvas element to your template, you can wrap it with a div for later use.

<template>
  <div>
    <canvas 
      id="heart" 
      :width="width" 
      :height="height"></canvas>
  </div>
</template>

Now, define the width and height properties for the heart in your component's data:

data() {
  return {
    width: 150,
    height: 150
  }
}

Drawing the heart will be done in the mounted method, which will be called after view is rendered, according to Vue documentation:

Called after the instance has been mounted, where el is replaced by the newly created vm.$el. If the root instance is mounted to an in-document element, vm.$el will also be in-document when mounted is called.

Grabbing the html canvas to draw the heart:

const canvas = this.$el.querySelector('#heart');
if (canvas.getContext) {
    const ctx = canvas.getContext('2d');
    ctx.beginPath();
    ctx.moveTo(75, 40);
    ctx.bezierCurveTo(75, 37, 70, 25, 50, 25);
    ctx.bezierCurveTo(20, 25, 20, 62.5, 20, 62.5);
    ctx.bezierCurveTo(20, 80, 40, 102, 75, 120);
    ctx.bezierCurveTo(110, 102, 130, 80, 130, 62.5);
    ctx.bezierCurveTo(130, 62.5, 130, 25, 100, 25);
    ctx.bezierCurveTo(85, 25, 75, 37, 75, 40);
    ctx.fillStyle = '#FF0000'; // heart color
    ctx.fill(); // fill the shape we draw
}

Check your browser, it should display a heart:

Part 2 - firebase setup
Add a realtime database in test mode for now (you can change it later).
Create a field name 'count' with value of zero:

Now add firebase to your project with npm or yarn:

npm i firebase

In the src folder create a new folder services and add a file ClickCountManager.js.
Separating the logic for firebase is a good practice, you can use this script in other projects that are not vue.
ClickCountManager.js:

import firebase from 'firebase';

const firebaseConfig = {
    ...
};

firebase.initializeApp(firebaseConfig);
const db = firebase.database();
const firebaseCountRef = db.ref('/count');

const registerToCounts = (onValue) => {
     firebaseCountRef.on('value', snapshot => onValue(snapshot.val()));
}

const addClick = () => {
    firebaseCountRef.transaction(function(count) {
        return count + 1;
    })
}

export {addClick, registerToCounts}

Copy the firebaseConfig from firebase settings under 'your apps'

Let's analyze the script.
First we initialize the firebase app using firebase.initializeApp(firebaseConfig) function, then we reference to firebase database and the count field that we created earlier in our realtime database:

const db = firebase.database();
const firebaseCountRef = db.ref('/count');

registerToCounts function will be used to get updates to the global counter that we save in firebase.
addClick function adds and save a new click to our count field.
We export these functions to use in our HeartClicker component.

Part 3 - use firebase in our component
Now that we have firebase ready and set we can use it in our HeartClicker component.
Go back to the HeartClicker component, import ClickCountManager methods:

import {addClick, registerToCounts} from '../services/ClickCountManager';

Add a new globalClicks field to our data:

data() {
    ...
    globalClicks: 0,
}

then add a new 'onClick' handler method in HeartClicker component:

methods: {
    onClick(e) {
        addClick();
    }

Attach the method to the canvas element:

<template>
  <div>
    <canvas 
        id="heart" 
        :width="width" 
        :height="height" 
        @click="onClick"></canvas>
    <p>{{globalClicks}}</p>
  </div>
</template>

And lastly, register to count updates in the created function of your component:

created() {
    registerToCounts(globalClicks => {
        this.globalClicks = globalClicks;
    })
},

I register to counts in the [created] lifecycle hook (https://vuejs.org/v2/api/#created) so we'll have that data before the component mounts. I recommend to have a look at Vue lifecycle diagram.

Open the browser and click the heart, you should see the count field in firebase and the globalCount property update.

Summary
What you've learned:

Create a Vue component
Use data in a Vue component
Vue lifecycle
Use and integrate firebase realtime database I hope you enjoyed this tutorial, please write your thoughts/feedback in the discussion below.

Bonus Level! - add "juice"
If you want to spice things up, you can continue to the bonus level where you will learn how to add "juice" to your heart by using some simple css and canvas particles.
The bonus level is in another post:

Bonus Level - vue.js and firebase "Heart Click"

Shai Angress ・ Jan 30 '21

#javascript #html #vue #firebase

You can grab the source here:

sangress / vue_heart_clicker

Heart "clicker" with vue.js and firebase

Bonus Level - vue.js and firebase "Heart Click"

Shai Angress — Sat, 30 Jan 2021 17:42:21 +0000

This is a bonus part for the "Heart Clicker" with vue.js and firebase, you can find it here:

Tutorial: Make an Heart "clicker" with vue.js and firebase

Shai Angress ・ Jan 30 '21

#javascript #html #firebase #vue

In this bonus part we'll add some juice to our heart with a little effort, just by adding particles and some css.
I recommend to take the tutorial, but if you are here just for the particles that's fine too Passepartout ;)

Part 1 - css
Let's start with the css code, it's short and simple.
First let's make it clear for the user that the heart is clickable.
In your tag add define cursor: pointer to our heart, as follow:

<style lang="scss" scoped>
  canvas#heart {
    cursor: pointer;
  }    
</style>

Much better.
Now let's add a little animation and resize (optional) our heart, you can play around with the animation to get the nice feeling that you are looking for, I went for a simple width scale using css cubic-bezier timing function.
Add the following code to your css:

canvas#heart {
  cursor: pointer;
  width: 50px;
  transition: width 0.3s;
  transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);

  &:hover {
    width: 55px;
  }
  &:active {
    width: 50px;
  }
}

Part 2 - Particles!
For the effect of the particles I used a colorful circles that explode from the back of the heart.
First, add a canvas element beneath our heart canvas element and set the id to particles:

<canvas
  id="particles"
  :width="particlesWidth"
  :height="particlesHeight"></canvas>

And this css:

canvas#particles {
  position: absolute;
  left: 0;
  z-index: -1;
}

We'll use a "function class", which is essentially just a function that we instantiate to create an object, a representation of an object if you like.
There are few properties in our class that you can play with and change the behavior of the particles;

maxLife - how much time will the particle "live".
radius - size of the circle.
color - the particle's color.
randomness of the particle starting point.

Add 3 constants and a function outside of your vue component's definition, inside the script tag:

// a simple util function we'll use later
const random = (min, max) => {
    return Math.random() * ( max - min ) + min;
}

const PARTICLES_NUMBER = 150;
const MIN_LIFE = 50;
const MAX_LIFE = 150;

In your vue component methods, add a new method and call it Particle, it takes 4 arguments:

x - the start X position on the canvas.
y - the start Y position on the canvas.
radius - the circle radius.
index - current index to use as unique id for the particle.
self - the vue "this"

In the Particle method that you created add the following properties at the top:

this.x = x;
this.y = y;
this.dx = Math.random()*10-5;
this.dy = Math.random()*10-5;
this.gravity = 0;
this.radius = radius;

this.id = index;
this.life = 0;
this.maxLife = random(MIN_LIFE, MAX_LIFE);
this.color = self.colors[Math.floor(Math.random()*self.colors.length)];

To draw the circle in our Particle class we'll add a draw function which will be part of the Particle instance, that's why we add it to the Particle's this, we'll use this function later in our update function.
Add the draw function beneath the properties inside the Particle:

this.draw = () => {
  self.ctx.beginPath();              
  self.ctx.arc(this.x,this.y,this.radius,0,Math.PI*2, false);
  self.ctx.strokeStyle = this.color;
  self.ctx.lineWidth = 4;
  self.ctx.stroke();
}

That's the drawing part, now we want to animate the particle so we'll add an update function to our Particle:

this.update = () => {
    if (this.x + this.radius > self.particlesWidth || this.x - this.radius < 0){
    this.dx = -this.dx;
    }
    if (this.y + this.radius > self.particlesHeight || this.y - this.radius < 0){
    this.dy = -this.dy;
    }
    this.life++;
    if (this.life >= this.maxLife) {
        delete self.particles[this.id];

    }
    this.x+=this.dx;
    this.y+=this.dy;
    this.dy += this.gravity;
    this.draw();

}

The update function moves the particle each time it's called according to its current position and checks if it passed the maximum life time, if so, it deletes the particle from the particles array that we'll add to our component.

Part 3 - draw particles on component's canvas
Now we want to use the Particle class that we created in our vue component.
Add the following properties to the component's data:

particlesWidth: 1000,
particlesHeight: 1000,
particles: [],
ctx: null,
colors: ['rgba(243,82,92,0.8)','rgba(0,103,76,0.5)','rgba(149,178,58,0.5)','rgba(252,206,68,0.8)','rgba(245,127,79,0.5)']

We'll add 3 new methods:

init - will be called every time we want to make an explosion.
animateParticle - animate the particle each frame (see requestAnimationFrame).
resizeCanvas - a function to adjust the canvas size to the screen.

init(x, y) {
  this.particles = (new Array(PARTICLES_NUMBER)).fill(null)
    .map((v, i) => new this.Particle(x, y, 0.5, i, this));

},

animateParticle() {
    requestAnimationFrame(this.animateParticle);
    // COOLNESS: if we don't clear rect it becomes a cool random drawing tool!
    this.ctx.clearRect(0, 0, this.particlesWidth, this.particlesHeight);
    this.particles.forEach(part => part.update());
},

resizeCanvas(canvas) {
    canvas.width = this.particlesWidth = window.innerWidth;
    canvas.height = this.particlesHeight = window.innerHeight;
}

2 things left:

Call the init function when user clicks the heart.
Activate the animation for the particles.

Add the following line to our onClick method:

this.init(e.clientX, e.clientY);

In the component's mounted hook add the following code:

const particlesCanvas = this.$el.querySelector('#particles');
this.resizeCanvas(particlesCanvas);
window.addEventListener('resize', () => this.resizeCanvas(particlesCanvas));

if (particlesCanvas.getContext) {
  this.ctx = particlesCanvas.getContext('2d');
  this.animateParticle();
}

Congratulations! you finished the bonus level! kudos to you!

Summary
You've learned on this tutorial how to add some juice to your work using javascript and little css, I urge you to play around with the effect, go crazy, and share your results ;).
Thanks for taking this tutorial, I hope you enjoyed and learned something new and practical. 🖤