Thứ Hai, 9 tháng 11, 2020

Tạo game lật hình để tìm hai hình giống nhau

 Đầu tiên chúng ta sẽ cần những dòng Code bên dưới.

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel='stylesheet prefetch' href='http://fonts.googleapis.com/css?family=Anton'>

Bạn lưu ý thẻ viewport được sử dụng bên trên là để gán Responsive trên các thiết bị di động.

Và bạn cũng cần gọi thư viện jquery về bằng Link sau:

<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

Và đây là HTML Code:

<div class="wrap">
<div class="game"></div>
	
	<div class="modal-overlay">
		<div class="modal">
			<h2 class="winner">Thắng Rồi</h2>
			<button class="restart">Chơi Lại</button>
			<p class="message">Developed on <a href="http://www.laivanduc.com/">Lại Văn Đức</a> Chi tiết tại <a href=" http://www.laivanduc.com/chia-se-code/javascript/tu-code-mot-game-lat-hinh-giong-nhau.html">www.laivanduc.com</a></p>
			<p class="share-text">Chia sẻ chiến thắng</p>
			<ul class="social">
				<li><a target="_blank" class="twitter" href="http://twitter.com/share?url=http://codepen.io/laivanduc/pen/mJappx"><span class="brandico-twitter-bird"></span></a></li>
				<li><a target="_blank" class="facebook" href="http://www.facebook.com/sharer.php?u=http://codepen.io/laivanduc/pen/mJappx"><span class="brandico-facebook"></span></a></li>
				<li><a target="_blank" class="google" href="https://plus.google.com/share?url=http://codepen.io/laivanduc/pen/mJappx"><span class="brandico-googleplus-rect"></span></a></li>
			</ul>
		</div>
	</div>
  <footer>
		<p class="disclaimer">Tất cả các Logo được sử dụng trong Game này do sở hữu của các tổ chức tương ứng.</p>
	</footer>
  </div><!-- End Wrap -->

Tiếp theo chúng ta sẽ cần tới đoạn Code CSS như sau:

@import url(http://weloveiconfonts.com/api/?family=Arial);

/* brandico */
[class*="brandico-"]:before {
  font-family: 'Arial', sans-serif;
}

* {
	box-sizing: border-box;
}

html, body {
	height: 100%;
}

body {
	background: black;
	min-height: 100%;
	font-family: "Arial", sans-serif;
}

.wrap {
  position: relative;
  height: 100%;
  min-height: 500px;
  padding-bottom: 20px;
}

.game {
	transform-style: preserve-3d;
	perspective: 500px;
	min-height: 100%;
  height: 100%;
}

@mixin width($max){
	@media (max-width: $max){
		@content;
	}
}

@keyframes matchAnim {
	0% {
		background: #bcffcc;
	}
	100% {
		background: white;
	}
}

.card {
  float: left;
  width: 16.66666%;
  height: 25%;
  padding: 5px;
  text-align: center;
	display: block;
	perspective: 500px;
	position: relative;
	cursor: pointer;
  z-index: 50; 
	-webkit-tap-highlight-color: rgba(0,0,0,0);  
	@include width(800px){
		width: 25%;
		height: 16.666%;
	}
	.inside {
		width: 100%;
		height: 100%;
		display: block;
		transform-style: preserve-3d;
		transition: .4s ease-in-out;
		background: white;

		&.picked, &.matched {
			transform: rotateY(180deg);
		}
		&.matched {
			animation: 1s matchAnim ease-in-out;
			animation-delay: .4s;
		}
	}

  .front, .back {
  	border: 1px solid black;
  	backface-visibility: hidden;
  	position: absolute;
  	top: 0;
  	left: 0;
  	width: 100%;
  	height: 100%;
  	padding: 20px;

  	img {
  		max-width: 100%;
  		display: block;
  		margin: 0 auto;
  		max-height: 100%;
  	}
  }
  .front {
  	transform: rotateY(-180deg);
  	@include width(800px){
  		padding: 5px;
  	}
  }
  .back{
		@include width(800px){
  		padding: 10px;
  	}
  }
}

.modal-overlay {
	display: none;
	background: rgba(0,0,0,.8);
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.modal {
	display: none;
	position: relative;
	width: 500px;
	height: 400px;
	max-height: 90%;
	max-width: 90%;
	min-height: 380px;
	margin: 0 auto;
	background: white;
	top: 50%;
	transform: translateY(-50%);
	padding: 30px 10px;
	.winner {
		font-size: 80px;
		text-align: center;
		font-family: "Arial", sans-serif;
		color: #4d4d4d;
		text-shadow: 0px 3px 0 black;
		@include width(480px){
			font-size: 60px;
		}
	}
	.restart {
		font-family: "Arial", sans-serif;
		margin: 30px auto;
		padding: 20px 30px;
		display: block;
		font-size: 30px;
		border: none;
		background: #4d4d4d;
		background: linear-gradient(#4d4d4d, #222);
		border: 1px solid #222;
		border-radius: 5px;
		color: white;
		text-shadow: 0px 1px 0 black;
		cursor: pointer;
		&:hover {
			background: linear-gradient(#222, black);
		}
	}
	.message {
		text-align: center;
		a {
			text-decoration: none;
			color: #28afe6;
			font-weight: bold;
			&:hover {
				$c: lighten(#28afe6, 10%);
				color: $c;
				border-bottom: 1px dotted $c;
			}
		}
	}
	.share-text {
		text-align: center;
		margin: 10px auto;
	}
	.social {
		margin: 20px auto;
		text-align: center;
		li {
			display: inline-block;
			height: 50px;
			width: 50px;
			margin-right: 10px;
			&:last-child {
				margin-right: 0;
			}
			a {
				display: block;
				line-height: 50px;
				font-size: 20px;
				color: white;
				text-decoration: none;
				border-radius: 5px;
				&.facebook {
					background: #3b5998;
					&:hover {
						background: lighten(#3b5998, 10%);
					}
				}
				&.google {
					background: #D34836;
					&:hover {
						background: lighten(#D34836, 10%);
					}
				}
				&.twitter {
					background: #4099FF;
					&:hover {
						background: lighten(#4099FF, 10%);
					}
				}
			}
		}
	}
}

footer {
	height: 20px;
	position: absolute;
	bottom: 0;
	width: 100%;
  z-index: 0;
	.disclaimer {
		line-height: 20px;
		font-size: 12px;
		color: #727272;
		text-align: center;
		@include width(767px){
			font-size: 8px;
		}
	}
}

Và cuối cùng là linh hồn của Game này bằng JavaScript:

(function(){
	
	var Memory = {

		init: function(cards){
			this.$game = $(".game");
			this.$modal = $(".modal");
			this.$overlay = $(".modal-overlay");
			this.$restartButton = $("button.restart");
			this.cardsArray = $.merge(cards, cards);
			this.shuffleCards(this.cardsArray);
			this.setup();
		},

		shuffleCards: function(cardsArray){
			this.$cards = $(this.shuffle(this.cardsArray));
		},

		setup: function(){
			this.html = this.buildHTML();
			this.$game.html(this.html);
			this.$memoryCards = $(".card");
			this.binding();
			this.paused = false;
     	this.guess = null;
		},

		binding: function(){
			this.$memoryCards.on("click", this.cardClicked);
			this.$restartButton.on("click", $.proxy(this.reset, this));
		},
		// kinda messy but hey
		cardClicked: function(){
			var _ = Memory;
			var $card = $(this);
			if(!_.paused && !$card.find(".inside").hasClass("matched") && !$card.find(".inside").hasClass("picked")){
				$card.find(".inside").addClass("picked");
				if(!_.guess){
					_.guess = $(this).attr("data-id");
				} else if(_.guess == $(this).attr("data-id") && !$(this).hasClass("picked")){
					$(".picked").addClass("matched");
					_.guess = null;
				} else {
					_.guess = null;
					_.paused = true;
					setTimeout(function(){
						$(".picked").removeClass("picked");
						Memory.paused = false;
					}, 600);
				}
				if($(".matched").length == $(".card").length){
					_.win();
				}
			}
		},

		win: function(){
			this.paused = true;
			setTimeout(function(){
				Memory.showModal();
				Memory.$game.fadeOut();
			}, 1000);
		},

		showModal: function(){
			this.$overlay.show();
			this.$modal.fadeIn("slow");
		},

		hideModal: function(){
			this.$overlay.hide();
			this.$modal.hide();
		},

		reset: function(){
			this.hideModal();
			this.shuffleCards(this.cardsArray);
			this.setup();
			this.$game.show("slow");
		},

		// Fisher--Yates Algorithm -- http://bost.ocks.org/mike/shuffle/
		shuffle: function(array){
			var counter = array.length, temp, index;
	   	// While there are elements in the array
	   	while (counter > 0) {
        	// Pick a random index
        	index = Math.floor(Math.random() * counter);
        	// Decrease counter by 1
        	counter--;
        	// And swap the last element with it
        	temp = array[counter];
        	array[counter] = array[index];
        	array[index] = temp;
	    	}
	    	return array;
		},

		buildHTML: function(){
			var frag = '';
			this.$cards.each(function(k, v){
				frag += '<div class="card" data-id="'+ v.id +'"><div class="inside">\
				<div class="front"><img src="'+ v.img +'"\
				alt="'+ v.name +'" /></div>\
				<div class="back"><img src="http://www.laivanduc.com/wp-content/uploads/2015/08/Logo-laivanducblog.png"\
				alt="laivanduc" /></div></div>\
				</div>';
			});
			return frag;
		}
	};

	var cards = [
		{
			name: "php",
			img: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/74196/php-logo_1.png",
			id: 1,
		},
		{
			name: "css3",
			img: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/74196/css3-logo.png",
			id: 2
		},
		{
			name: "html5",
			img: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/74196/html5-logo.png",
			id: 3
		},
		{
			name: "jquery",
			img: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/74196/jquery-logo.png",
			id: 4
		}, 
		{
			name: "javascript",
			img: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/74196/js-logo.png",
			id: 5
		},
		{
			name: "node",
			img: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/74196/nodejs-logo.png",
			id: 6
		},
		{
			name: "photoshop",
			img: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/74196/photoshop-logo.png",
			id: 7
		},
		{
			name: "python",
			img: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/74196/python-logo.png",
			id: 8
		},
		{
			name: "rails",
			img: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/74196/rails-logo.png",
			id: 9
		},
		{
			name: "sass",
			img: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/74196/sass-logo.png",
			id: 10
		},
		{
			name: "sublime",
			img: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/74196/sublime-logo.png",
			id: 11
		},
		{
			name: "wordpress",
			img: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/74196/wordpress-logo.png",
			id: 12
		},
	];
    
	Memory.init(cards);


})();

Thứ Năm, 29 tháng 10, 2020

Soạn bài Các Phương châm hội thoại

Soạn bài: Các phương châm hội thoại

Câu 1 (trang 9 sgk Ngữ Văn 9 Tập 1):

   Câu trả lời của Ba “ở dưới nước” không đáp ứng yêu cầu mà An muốn biết. Cần trả lời về địa điểm học bơi như bể nào, sông nào ?

   →Bài học : khi giao tiếp, cần nói có nội dung, nội dung lời nói phải đáp ứng đúng yêu cầu giao tiếp.

Câu 2 (trang 10 sgk Ngữ Văn 9 Tập 1):

   Truyện gây cười vì các nhân vật nói nhiều hơn những gì cần nói. Lẽ ra anh có “lợn cưới” chỉ cần hỏi “Bác có thấy con lợn nào chạy qua đây không?” và anh có “áo mới” chỉ cần trả lời “Tôi chẳng thấy con lợn bào chạy qua đây cả”.

   Yêu cầu giao tiếp : nội dung lời nói phải đáp ứng đúng yêu cầu giao tiếp, không thiếu không thừa.

   Truyện cười này phê phán tính nói khoác, nói không đúng sự thật.

   →Khi giao tiếp cần tránh nói sai sự thật, không nói những gì mà mình không tin là đúng hay không có bằng chứng xác thực.

   

Luyện tập

Câu 1 (trang 10 sgk Ngữ Văn 9 Tập 1):

   a. Thừa cụm từ “nuôi ở nhà” vì “gia súc” đã hàm chứa “nuôi ở nhà”.

   b. Thừa cụm từ “có hai cánh” vì tất cả các loài chim đều có hai cánh.

Câu 2 (trang 10 - 11 sgk Ngữ Văn 9 Tập 1):

   a. nói có sách, mách có chứng.

   b. nói dối

   c. nói mò

   d. nói nhăng nói cuội

   e. nói trạng

Câu 3 (trang 11 sgk Ngữ Văn 9 Tập 1):

   Phương châm hội thoại về lượng đã không được tuân thủ. Câu hỏi “Rồi có nuôi được không?” là một điều rất thừa. Nếu không nuôi được thì làm sao có “tôi” (người bạn) được sinh ra từ “bố tôi”.

Câu 4 (trang 11 sgk Ngữ Văn 9 Tập 1):

   a. như tôi được biết, tôi tin rằng... → tuân thủ phương châm về chất, nhằm báo cho người nghe biết tính chính xác của nhận định hay thông tin đưa ra được kiểm chứng.

   b. như tôi đã trình bày,... → đảm bảo phương châm về lượng, mục đích có thể nhấn mạnh ý, chuyển ý, dẫn ý, cho thấy việc nhắc lại nội dung đã cũ là chủ ý người nói.

Câu 5 (trang 11 sgk Ngữ Văn 9 Tập 1):

   - Ăn đơm nói đặt: nói theo cách vu khống, đặt điều, bịa chuyện cho người khác

   - Ăn ốc nói mò: nói không có căn cứ.

   - Ăn không nói có: nói theo cách vu khống, bịa đặt.

   - Cãi chày cãi cối: cố tranh cãi, nhưng không có lý lẽ thuyết phục, đúng đắn.

   - Khua môi múa mép: nói ba hoa, khoác lác.

   - Nói dơi nói chuột: nói lăng nhăng linh tinh, không xác thực.

   - Hứa hươu hứa vượn: hứa hẹn lấy lòng nhưng không thực hiện.

   Các thành ngữ trên đều chỉ những trường hợp vi phạm phương châm về chất. Phải tránh những cách nói, nội dung nói được chỉ ra trong các thành ngữ trên.

Soạn bài: Phong cách Hồ Chí Minh

Bố cục:

   - Phần 1 (từ đầu ... rất hiện đại): Hồ Chí Minh tiếp thu tinh hoa văn hóa nhân loại.

   - Phần 2 (tiếp ... hạ tắm ao) : Vẻ đẹp trong phong cách Hồ Chí Minh.

   - Phần 3 (còn lại) : Ý nghĩa phong cách Hồ Chí Minh.

Đọc hiểu văn bản

Câu 1 (trang 8 sgk Ngữ Văn 9 Tập 1):

   - Vốn tri thức văn hóa sâu rộng của Hồ Chí Minh: tiếp xúc, am hiểu văn hóa các dân tộc thế giới, nói viết thành thạo nhiều ngôn ngữ (Pháp, Anh, Hoa, Nga ... )

   - Lí do :

        + Tính ham học hỏi, đến đâu cũng học hỏi tìm hiểu.

        + Đặt chân đến nhiều nước phương Đông, phương Tây, làm nhiều nghề, có dịp tiếp xúc văn hóa nhiều nơi.

        + Tiếp thu một cách có chọn lọc, biết phê phán những cái tiêu cực.

Câu 2 (trang 8 sgk Ngữ Văn 9 Tập 1):

Biểu hiện của lối sống rất bình dị, rất Việt Nam, rất phương Đông của Bác Hồ :

   - Nơi ở và làm việc mộc mạc đơn sơ : nhà sàn nhỏ ít phòng, ít đồ đạc ở cạnh ao.

   - Trang phục giản dị : bộ quần áo bà ba nâu, chiếc áo trấn thủ, đôi dép lốp cao su.

   - Ăn uống đạm bạc : món ăn dân dã không cầu kì như cá kho, rau luộc, cà muối ...

Câu 3 (trang 8 sgk Ngữ Văn 9 Tập 1):

Lối sống của Bác là sự kết hợp giữa giản dị và thanh cao. Đây không phải lối sống tự tìm niềm vui trong cảnh nghèo. Từ cách bài trí cho đến ăn ở, sinh hoạt đều thể hiện sự thanh thản, tự tại. Cuộc sống ví như những nhà hiền triết ẩn dật Nguyễn Trãi, Nguyễn Bỉnh Khiêm ... nhưng không phải một cách tự thần thánh hóa ...

Câu 4 (trang 8 sgk Ngữ Văn 9 Tập 1):

Cảm nhận về những nét đẹp trong phong cách Hồ Chí Minh :

   - Có sự kết hợp hài hòa, trọn vẹn giữa văn hóa dân tộc và văn hóa nhân loại.

   - Có sự học tập không ngừng, tiếp thu có chọn lọc.

   - Lối sống giản dị mà thanh cao trong mọi mặt : nhà ở, trang phục, ăn uống, tư trang.

Luyện tập

(trang 8 sgk Ngữ Văn 9 Tập 1): Tìm đọc và kể lại ....

    Một số câu chuyện về lối sống giản dị mà cao đẹp của Chủ tịch Hồ Chí Minh :

        + Bài thơ “Tức cảnh Pác Bó”, những câu chuyện khi Bác ở Pác Bó.

        + Việc chi tiêu của Bác Hồ :

    Các đồng chí ở gần Bác đều cho biết Bác rất tiết kiệm. Có đôi tất rách đã vá đi, vá lại mấy lần Bác cũng không dùng tất mới. Bác nói:

    - Cái gì còn dùng được nên dùng. Bỏ đi không nên...

    Khi tất rách chưa kịp vá, anh em đưa đôi mới để Bác dùng, Bác xoay chỗ rách vào bên trong rồi cười xí xóa:

    - Đấy, có trông thấy rách nữa đâu...

    Có quả chuối hơi nẫu, anh cán bộ chê không ăn, Bác lấy dao gọt phần nẫu đi, bóc ăn ngon lành, rồi nói:

    - Ở chiến khu có được quả chuối này cũng đã quý...

Thứ Hai, 26 tháng 10, 2020

Kế hoạch bài dạy Ngữ văn 9 (Giáo án)

 

  1. V090953-KHBD Ngữ văn 9 soạn theo phát triển năng lực và phẩm chất - 5 hoạt động (trọn bộ cả năm). Xem trước  Bản đầy đủ