Game jump: frontend introduction #1
-
Upload
sebastian-pozoga -
Category
Technology
-
view
104 -
download
0
description
Transcript of Game jump: frontend introduction #1
![Page 2: Game jump: frontend introduction #1](https://reader034.fdocuments.in/reader034/viewer/2022051515/54c79f0d4a7959551f8b45f7/html5/thumbnails/2.jpg)
Introduction● HTML● Web Style Sheets
○ CSS○ SASS
● JavaScript○ jquery○ requirejs
● First game
![Page 3: Game jump: frontend introduction #1](https://reader034.fdocuments.in/reader034/viewer/2022051515/54c79f0d4a7959551f8b45f7/html5/thumbnails/3.jpg)
HTML5
![Page 4: Game jump: frontend introduction #1](https://reader034.fdocuments.in/reader034/viewer/2022051515/54c79f0d4a7959551f8b45f7/html5/thumbnails/4.jpg)
HTML
![Page 5: Game jump: frontend introduction #1](https://reader034.fdocuments.in/reader034/viewer/2022051515/54c79f0d4a7959551f8b45f7/html5/thumbnails/5.jpg)
Head
![Page 6: Game jump: frontend introduction #1](https://reader034.fdocuments.in/reader034/viewer/2022051515/54c79f0d4a7959551f8b45f7/html5/thumbnails/6.jpg)
Body #html tags
![Page 7: Game jump: frontend introduction #1](https://reader034.fdocuments.in/reader034/viewer/2022051515/54c79f0d4a7959551f8b45f7/html5/thumbnails/7.jpg)
Body #own tagsCreate own tag & attribute:
<mytagname attributeName=”attributeValue” />
Examples:jQuery MobileAngularJS
![Page 8: Game jump: frontend introduction #1](https://reader034.fdocuments.in/reader034/viewer/2022051515/54c79f0d4a7959551f8b45f7/html5/thumbnails/8.jpg)
Web Style Sheets
![Page 9: Game jump: frontend introduction #1](https://reader034.fdocuments.in/reader034/viewer/2022051515/54c79f0d4a7959551f8b45f7/html5/thumbnails/9.jpg)
CSS #What is CSS?
“Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g., fonts, colors, spacing) to Web documents”
by W3C
![Page 10: Game jump: frontend introduction #1](https://reader034.fdocuments.in/reader034/viewer/2022051515/54c79f0d4a7959551f8b45f7/html5/thumbnails/10.jpg)
CSS #selectors*{...}E{...}E F{...}E > F{...}E:first-child{...}E#id{...}
E.class{...}a:visited{...}E + F{...}E[foo="warning"]{...}E[foo~="warning"]{...}E[lang|="en"]{...}
![Page 11: Game jump: frontend introduction #1](https://reader034.fdocuments.in/reader034/viewer/2022051515/54c79f0d4a7959551f8b45f7/html5/thumbnails/11.jpg)
CSS #combining selectors
div.car.destroyed .wheel,span.motor.destroyed .wheel{...}
#id ul li:first-child,#id ul li:nth-child(3n){...}
![Page 12: Game jump: frontend introduction #1](https://reader034.fdocuments.in/reader034/viewer/2022051515/54c79f0d4a7959551f8b45f7/html5/thumbnails/12.jpg)
CSS #propertiesdisplay: block;float: left;background-color: red;width: 300px;color: black;font-weight: bold;font: 1em Helvetica, sans-serif;
-webkit-border-radius: 10px;-moz-border-radius: 10px;-ms-border-radius: 10px;-o-border-radius: 10px;border-radius: 10px;
![Page 13: Game jump: frontend introduction #1](https://reader034.fdocuments.in/reader034/viewer/2022051515/54c79f0d4a7959551f8b45f7/html5/thumbnails/13.jpg)
SASS
![Page 14: Game jump: frontend introduction #1](https://reader034.fdocuments.in/reader034/viewer/2022051515/54c79f0d4a7959551f8b45f7/html5/thumbnails/14.jpg)
SASS #What is SASS?
“Sass is the most mature, stable, and powerful professional grade CSS extension language in the world.”
http://sass-lang.com/
![Page 15: Game jump: frontend introduction #1](https://reader034.fdocuments.in/reader034/viewer/2022051515/54c79f0d4a7959551f8b45f7/html5/thumbnails/15.jpg)
SASS #variables$m-margin: 33px;
#menu{margin:$m-margin+10px;}
$color: #333;
ul li{ color:$color; a{ lighten($color, 50%); }}
![Page 16: Game jump: frontend introduction #1](https://reader034.fdocuments.in/reader034/viewer/2022051515/54c79f0d4a7959551f8b45f7/html5/thumbnails/16.jpg)
SASS #nestingnav { background: red;
ul{background: black;
}}
nav { background: red;}
nav ul{ background: black;}
![Page 17: Game jump: frontend introduction #1](https://reader034.fdocuments.in/reader034/viewer/2022051515/54c79f0d4a7959551f8b45f7/html5/thumbnails/17.jpg)
SASS @import
@import 'path/to/file';
![Page 18: Game jump: frontend introduction #1](https://reader034.fdocuments.in/reader034/viewer/2022051515/54c79f0d4a7959551f8b45f7/html5/thumbnails/18.jpg)
SASS @mixin@mixin border-radius($radius) { -webkit-border-radius: $radius; -moz-border-radius: $radius; -ms-border-radius: $radius; -o-border-radius: $radius; border-radius: $radius;}.box { @include border-radius(10px); }
![Page 19: Game jump: frontend introduction #1](https://reader034.fdocuments.in/reader034/viewer/2022051515/54c79f0d4a7959551f8b45f7/html5/thumbnails/19.jpg)
JavaScript
![Page 20: Game jump: frontend introduction #1](https://reader034.fdocuments.in/reader034/viewer/2022051515/54c79f0d4a7959551f8b45f7/html5/thumbnails/20.jpg)
js #What is it?!?!
“JavaScript is a programming language used to make web pages interactive.”
“Java is to JavaScript as ham is to hamster”
![Page 21: Game jump: frontend introduction #1](https://reader034.fdocuments.in/reader034/viewer/2022051515/54c79f0d4a7959551f8b45f7/html5/thumbnails/21.jpg)
js #script
<script src="myscripts.js"></script>
<script type="text/javascript">alert(“gamejump.pl”);</script>
![Page 22: Game jump: frontend introduction #1](https://reader034.fdocuments.in/reader034/viewer/2022051515/54c79f0d4a7959551f8b45f7/html5/thumbnails/22.jpg)
js #varszm = 22; //mean window.zm = 22
var arr = [“a1”,”a2”];var obj = {
“key”:”value”,number: 22,string:”text”
};
![Page 23: Game jump: frontend introduction #1](https://reader034.fdocuments.in/reader034/viewer/2022051515/54c79f0d4a7959551f8b45f7/html5/thumbnails/23.jpg)
js #functionfunction globalFn(){
return “global”;}
var localFn = function(){return “function is a object”;
}
![Page 24: Game jump: frontend introduction #1](https://reader034.fdocuments.in/reader034/viewer/2022051515/54c79f0d4a7959551f8b45f7/html5/thumbnails/24.jpg)
js #closurevar makeCounter = function() {
var privateCounter = 0;return {
increment: function() {return privateCounter ++;
}}
};
![Page 25: Game jump: frontend introduction #1](https://reader034.fdocuments.in/reader034/viewer/2022051515/54c79f0d4a7959551f8b45f7/html5/thumbnails/25.jpg)
jQuery
![Page 26: Game jump: frontend introduction #1](https://reader034.fdocuments.in/reader034/viewer/2022051515/54c79f0d4a7959551f8b45f7/html5/thumbnails/26.jpg)
jQuery #What is it?!?!
“jQuery is a JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers.”
jquery.com
![Page 27: Game jump: frontend introduction #1](https://reader034.fdocuments.in/reader034/viewer/2022051515/54c79f0d4a7959551f8b45f7/html5/thumbnails/27.jpg)
jQuery #ready
$(document).ready(function() { // Your code here.});
$(function() { // Your code here.});
![Page 28: Game jump: frontend introduction #1](https://reader034.fdocuments.in/reader034/viewer/2022051515/54c79f0d4a7959551f8b45f7/html5/thumbnails/28.jpg)
jQuery #selectors
//show elements$(“#menu :hide”).show();
//hide elements$(“#menu :visible”).hide();
//findvar $set = $(“#menu”);$set.find(“:visible”).hide();
![Page 29: Game jump: frontend introduction #1](https://reader034.fdocuments.in/reader034/viewer/2022051515/54c79f0d4a7959551f8b45f7/html5/thumbnails/29.jpg)
jQuery #css
$(selector).addClass(name);
$(selector).removeClass(name);
$(selector).css(name,val);
$(selector).css({“background”:”red”,“color”:”blue”
});
![Page 30: Game jump: frontend introduction #1](https://reader034.fdocuments.in/reader034/viewer/2022051515/54c79f0d4a7959551f8b45f7/html5/thumbnails/30.jpg)
jQuery #events
$(“.button”).on(“click”, function(){
alert(“clicked”);});
$(“.button”).on(“click”, function(event){
event.preventDefault();alert(“clicked”);
});
![Page 31: Game jump: frontend introduction #1](https://reader034.fdocuments.in/reader034/viewer/2022051515/54c79f0d4a7959551f8b45f7/html5/thumbnails/31.jpg)
jQuery #val
<form method=”post” id=”f”><input id=”in” /></form>
$(“#f”).on("submit", function(){
var v = $(“#in”).val();alert(v);return false;
});
![Page 32: Game jump: frontend introduction #1](https://reader034.fdocuments.in/reader034/viewer/2022051515/54c79f0d4a7959551f8b45f7/html5/thumbnails/32.jpg)
jQuery #ajax$.get("url",function(data){
alert(data);});
$.post("url", {k1:1,k2:2}, function(data){
alert(data);});
$.ajax({type: "POST",url: "some.php"
}).done(function( msg ) {alert(msg);
});
![Page 33: Game jump: frontend introduction #1](https://reader034.fdocuments.in/reader034/viewer/2022051515/54c79f0d4a7959551f8b45f7/html5/thumbnails/33.jpg)
requirejs
![Page 34: Game jump: frontend introduction #1](https://reader034.fdocuments.in/reader034/viewer/2022051515/54c79f0d4a7959551f8b45f7/html5/thumbnails/34.jpg)
requirejs #What is it?!?!
“RequireJS is a JavaScript file and module loader… Using a modular script loader like RequireJS will improve the speed and quality of your code.”
http://requirejs.org/
![Page 35: Game jump: frontend introduction #1](https://reader034.fdocuments.in/reader034/viewer/2022051515/54c79f0d4a7959551f8b45f7/html5/thumbnails/35.jpg)
requirejs #start<html>
<head><script data-main="js/app" src="js/require.js"></script>
</head><!-- … - ->
</html>
![Page 36: Game jump: frontend introduction #1](https://reader034.fdocuments.in/reader034/viewer/2022051515/54c79f0d4a7959551f8b45f7/html5/thumbnails/36.jpg)
requirejs #configrequire.config({
paths: { backbone: "libs/backbone.js/backbone", jquery: "http://ajax.googleapis.com/.../jquery.min", underscore: "libs/underscore.js/underscore"}
});
![Page 37: Game jump: frontend introduction #1](https://reader034.fdocuments.in/reader034/viewer/2022051515/54c79f0d4a7959551f8b45f7/html5/thumbnails/37.jpg)
requirejs #app
require(["jquery"], function() {$(function(){
alert(“loaded”);});
});
![Page 38: Game jump: frontend introduction #1](https://reader034.fdocuments.in/reader034/viewer/2022051515/54c79f0d4a7959551f8b45f7/html5/thumbnails/38.jpg)
requirejs #module
define([], function() {alert(“module”);
});
![Page 39: Game jump: frontend introduction #1](https://reader034.fdocuments.in/reader034/viewer/2022051515/54c79f0d4a7959551f8b45f7/html5/thumbnails/39.jpg)
Questions??
![Page 40: Game jump: frontend introduction #1](https://reader034.fdocuments.in/reader034/viewer/2022051515/54c79f0d4a7959551f8b45f7/html5/thumbnails/40.jpg)
We can start create a first game now :)
Download a game template from github