directory

  • preface
  • Results the preview
  • Material source
  • Pit record + Skill Summary (MVC)
  • The source code in

One, foreword

I have been learning the front end for some time. Recently I reviewed CSS and MVC pattern. Found that there are still a lot of shortcomings. I thought, I’ll just use CSS to draw something. And then simply use MVC to implement a player

I wonder if there is a chance to be your pikachu, lift high, hug ~

This is what a stud should see (DOge)

Second, effect preview

Gitee preview

Warm tip: click pikachu’s nose can move

  • PC

  • Mobile terminal

Third, material sources

CodePen

Search pikachu

Iv. Pit Records and Skills summary (MVC)

In fact, drawing pikachu as a whole is very simple, the use of JS is very few, the most or CSS code. Although there is no CSS file in the source code, the string is full of CSS code. JS just implements a player using MVC pattern.

1.border-radius

It is possible to achieve curved whiskers and overlay colors with pseudo-elements. The most difficult part of painting pikachu is probably the curved beard.

.mouth .up .lip.left {
  transform: rotate(-20deg);
  border-bottom-left-radius: 40px 50px;
}

.mouth .up .lip::after {
  content: "";
  display: block;
  width: 50px;
  height: 30px;
  position: absolute;
  top: -5px;
  left: 70px;
  background-color: #ffe600;
}

.mouth .up .lip.right {
  top: -30px;
  left: 100px;
  border-bottom-right-radius: 40px 50px;
  transform: rotate(20deg);
}

.mouth .up .lip.right::after {
  top: -5px;
  left: -30px;
}
Copy the code

2,Player to player

When JS is writing a player, MVC mode is used to think and optimize the code. Techniques used:

  • Table driver programming binding events
events: {
	'.pause':'pauseevent'.'.play':'playevent'.'.replay': 'replayevent'.'.slow':'slowevent'.'.middle': 'middleevent'.'.fast':'fastevent'
    },
bindevets: () = > {
	for (let key in player.events) {
		if (player.events.hasOwnProperty(key)) {
			document.querySelector(key).addEventListener('click', player[player.events[key]]); }}},Copy the code
  • The page automatically appears code —The timer
playStart:() = > {
	player.id = setInterval(() = > {
		if(player.i>string.length) {
			clearInterval(player.id);
		}
		else {
			player.ui.demo2.innerText=string.substring(0,player.i);
			player.ui.demo1.innerHTML = string.substring(0,player.i);
			player.ui.demo2.scrollTop=player.ui.demo2.scrollHeight;
			player.i++;
		}
	},player.setTime)
},
Copy the code

Five, the source code

Gitee

github