整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
大家分享一個html寫的俄羅斯方塊：
源代碼如下:
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.c {
margin: 1px;
width: 19px;
height: 19px;
background: red;
position: absolute;
}
.d {
margin: 1px;
width: 19px;
height: 19px;
background: gray;
position: absolute;
}
.f {
top: 0px;
left: 0px;
background: black;
position: absolute;
}
</style>
</head>
<body>
</body>
</html>
<script type="text/javascript">
var over = false,
shapes = ("0,1,1,1,2,1,3,1;1,0,1,1,1,2,2,2;2,0,2,1,2,2,1,2;0,1,1,1,1,2,2,2;1,2,2,2,2,1,3,1;1,1,2,1,1,2,2,2;0,2,1,2,1,1,2,2").split(";");
//shapes 中的每一個元素的各個數字意2兩個一組，分別指該層移動的X，Y軸
function create(tag, css) {
var elm = document.createElement(tag); //創(chuàng)建一個tag標簽
elm.className = css; //添加一個css樣式
document.body.appendChild(elm); //把該標簽添加到body標簽中
return elm;
} //返回該標簽
function Field(w, h) { //Field整個游戲界面的對象，沒跳動一次，就是一次刷新
this.width = w ? w : 10;
this.height = h ? h : 20;
this.show = function() { //創(chuàng)建一個底層，游戲界面
var f = create("div", "f")
f.style.width = this.width * 20 + 'px';
f.style.height = this.height * 20 + 'px';
}
this.check = function(shape, x, y, d) { //判斷是否到了邊緣
var r1 = 0,
r2 = 'GO'; //每一次所生成的4個層絕對不會存在超出左邊的同時又超出右邊，故r1只有一個
for(var i = 0; i < 8; i += 2) {
//循環(huán)橫坐標，查看是夠超過邊距
if(parseInt(shape) + x < 0 && parseInt(shape) + x < r1) {
//若向左邊移動會超出邊界
r1 = parseInt(shape) + x;
} else if(parseInt(shape) + x >= this.width && parseInt(shape) + x > r1) {
//若向右移動會超出邊界
r1 = parseInt(shape) + x;
}
if(parseInt(shape[i + 1]) + y >= this.height || this[parseInt(shape) + x + (parseInt(shape[i + 1]) + y) * this.width]) {
r2 = "NO";
}
}
if(d == "move" && r2 == "GO") { //當此次操作是左右移動的話，就返回移動后的橫坐標，只要沒有超出邊界，r1就肯定不為0
return r1;
} else if(d == "upchange" && r2 == "GO") { //當此次操作是變換形狀時
return r1 > 0 ? r1 - this.width + 1 : r1; //其實每次移動的都是該層的很坐標，以左邊為準移動的
} else {
return r2;
}
}
this.findFull = function() { //判斷該行是否已經滿了
for(var h = 0; h < this.height; h++) { //循環(huán)底層的縱坐標
var s = 0;
for(var w = 0; w < this.width; w++) { //循環(huán)行坐標
s += this[w + h * this.width] ? 1 : 0 //確定每個坐標點上時候有元素，以便于確定改行是否滿了
}
if(s == this.width) { //若改行滿了，則調用removeLine方法，一處該行的每一個元素
this.removeLine(h);
}
}
}
//清除已經填滿的行
this.removeLine = function(line) {
for(var w = 0; w < this.width; w++) { //因為每個元素都是根據對象的橫縱坐標在存儲，所以需要重新循環(huán)橫坐標，以便于取出每一個元素
document.body.removeChild(this[w + line * this.width]); //每個元素都是在body上存在著
}
//移除該行之后需要讓其上的每行都向下移動一行
for(var l = line; l > 0; l--) {
for(var i = 0; i < this.width; i++) {
this[i + l * this.width] = this[i + (l - 1) * this.width]; //把上一行的元素付給下一行的元素()
if(this[i + l * this.width]) {
this[i + l * this.width].style.top = l * 20 + 'px'; //移動
}
}
}
}
this.fixShape = function(shape, x, y) { //生成落地的方塊
var d = new Tetris("d", shape, x, y);
d.show();
for(var i = 0; i < 8; i += 2) { //記錄每個變灰色的div層，只有成功到底底層的時候才記錄
//parseInt(shape) + x 記錄的為該層的橫坐標
//parseInt(shape[i + 1]) + y 記錄的為縱坐標
//這樣是為了this[…]是唯一。
this[parseInt(shape) + x + (parseInt(shape[i + 1]) + y) * this.width] = d.divs[i / 2];
}
}
}
function Tetris(c, t, x, y) {
var c = c ? c : "c"; //若C存在，則為C，不存在，則賦值
this.field = null;
this.divs = [create("div", c), create("div", c), create("div", c), create("div", c)]; //調用create方法創(chuàng)建元素
var ttt = t;
this.reset = function() { //創(chuàng)建一個方塊
this.x = typeof x != 'undefined' ? x : 3;
this.y = typeof y != 'undefined' ? y : 0;
this.shape = t ? t : (shapes[Math.floor(Math.random() * (shapes.length - 0.00001))].split(","));
this.show();
//當剛生的方塊就不能再向下移動的時候，游戲結束
if(this.field && this.field.check(this.shape, this.x, this.y, "down") == "NO") {
over = true;
this.field.fixShape(this.shape, this.x, this.y);
alert('game over');
}
}
this.show = function() { //根據生成的方案，初始化方塊。
for(var i = 0; i < this.divs.length; i++) {
this.divs.style.left = (this.shape[i * 2] * 1 + this.x) * 20 + 'px';
this.divs.style.top = (this.shape[i * 2 + 1] * 1 + this.y) * 20 + 'px';
}
}
this.vMove = function() { //該方法使方塊向下移動
if(this.field.check(this.shape, this.x, this.y + 1, "down") == "GO") { //若還能向下移動就執(zhí)行
this.y++;
this.show();
} else {
this.field.fixShape(this.shape, this.x, this.y); //不能向下移動了，就生成固定的塊。
this.field.findFull();
this.reset();
};
}
this.hMove = function(moveNo) { //該方法使方塊左右移動
var r = this.field.check(this.shape, parseInt(this.x) + moveNo, this.y, 'move');
if(r != 'GO' && r == 0) {
this.x += moveNo;
this.show();
}
}
this.rotate = function() { //當按動上鍵時，改變方塊的排列方向
var s = this.shape;
var newShape = [3 - s[1], s[0], 3 - s[3], s[2], 3 - s[5], s[4], 3 - s[7], s[6]]; //先把坐標循環(huán)180度，然后縱橫坐標互換。
var r = this.field.check(newShape, this.x, this.y, 'upchange'); //調用check方法，確定時候可以改變
if(r == "NO") { return; };
if(r == 0) { //若為0 ，則說明改變后的塊并沒有超出范圍，繼續(xù)執(zhí)行
this.shape = newShape;
this.show();
} else if(this.field.check(newShape, this.x - r, this.y, 'move') == 0) { //超出后，根據返回值，讓其向相應的方向移動。以保證并不會超出范圍
this.x -= r;
this.shape = newShape;
this.show();
}
}
this.reset();
}
var f = new Field();
f.show();
var t = new Tetris();
t.field = f;
t.reset();
window.setInterval("if(!over)t.vMove();", 500); //調用向下移動的方法
document.onkeydown = function(e) { //當按上下左右鍵時，觸發(fā)
if(over) return;
var e = window.event ? window.event : e;
switch(e.keyCode) {
case 38: //up 當按下上鍵時
t.rotate();
break;
case 40: //down
t.vMove();
break;
case 37: //left
t.hMove(-1);
break;
case 39: //right
t.hMove(1);
break;
}
}
</script>
路過的朋友給個關注哦，需要打包源碼的私信小編。
互聯(lián)網高速發(fā)展的今天，我們通過瀏覽器可以看到各種各樣的網站，包含了各式不同的領域還有內容，通過點擊網站上的標簽和欄目我們就能夠很方便地看到網站上顯示的各種數據，而這些都是建立在HTML這種標記語言的基礎上做到的。
HTML的英文全稱為Hyper Text Markup Language，中文稱作超文本標記語言，是一種專門用來建立網站的標識語言。其中包括了許多標簽將分散的網絡數據連接到一起，聚合同一之后形成了我們現在所看到的網頁。
看到這里是不是有許多朋友想要知道這個HTML語言該怎么去學習呢？是需要找老師統(tǒng)一學，還是去圖書館找專業(yè)書籍自己學好呢？不用擔心，因為今天要給大家推薦的就是一個專門為大家提供各種編程語言教程的學習網站。
這個網站名叫 runoob，直接在瀏覽器上搜索即可找到。
圖片來自RUNOOB網頁截圖
在首頁可以看到該欄目的第二個就是關于HTML的學習教程，點擊左邊的方框可以調整你的課程進度，在第一章節(jié)的教程中很清晰地講解了什么是HTML，以及告訴了你一些關于網站建立的小知識。
下方的提示框會給你提供一些對HTML零基礎新手的科普，關于這種標記語言應該如何進行保存，如何查看文件后輟名，如何打開代碼文件等等，還會提供一些專用工具供你學習使用。同時網站會給你簡單介紹一些網頁編程語言的區(qū)別，還有各種用途上的區(qū)分，非常地詳細。
圖片來自RUNOOB網頁截圖
在第三章節(jié)的編輯器一欄里，會提供給你一些HTML的專用編輯器，例如VS Code，還有sublime text 等實用工具，在后面會教你如何將這些HTML必備編輯器下載并安裝，然后在瀏覽器上面運行。
通過插件還有語言編程的格式我們就能夠學會如何制作第一步的標題了，剛開始的一步比較簡單，相信大家很快就能學會如何在網頁上顯示自己打入的文字了。之后進一步的學習就是關于如何調整文字段落，還有各種標識的使用。
圖片來自RUNOOB網頁截圖
在如何進行文字排版編輯的方面，教程中也講述得很詳細，包括一些用戶們常犯的錯誤，還有一些網頁的實例，甚至是這個教學網站上的排版示范都會進行一一講解。
更深入的章節(jié)會對如何進行圖像排列，傳輸等方面進行細講，教程中把大部分網站會使用到的技巧還有排版方式都分成了許多個小片段，方便大家能夠對每個方面針對性地學習。這些內容并不多，幾乎每一個片段都是用很直白的語言進行講解，方便所有人都能夠看懂，并且在下方都會有更詳細的術語解析，還有一些比較難懂的點會舉例解釋。
圖片來自RUNOOB網頁截圖
經過十幾章節(jié)的教學之后，基本上能夠掌握HTML語言的基本用法，還有一些簡單的操作了，這個時候如果想要進階學習的話還可以在網站上查找其他的進階語言用法，例如CSS, JavaScript等等復雜一些的語言，相應的你也會學到更多如何運營網頁的方法。
當然如果想要自己建立一個網站的話，還需要更多資源還有設備，例如高速的網絡連接保持網頁的穩(wěn)定性，以及穩(wěn)定的服務器，用來保證自己的網頁24小時都能保持流暢可用。不過這些都是在學會了如何建立網頁之后才考慮的事了。
現在網上也有許多編程教學，在網上自學一門知識一門語言變得非常方便，但是僅僅是擁有資源還是不夠的。學習如何建立自己的網站還需要大量的努力以及知識的積累，通過不斷的練習還有實踐才能自如地使用，只有基礎扎實，建立出來的網站才能夠長久。但還需要大家能夠行動起來，只有去學習去實踐才能夠真正學會東西，希望這個教學網站推薦能夠幫到更多人！
為一名前端工程師，經常在寫完 HTML 以后，才覺得真正的噩夢要開始了，啊，寫 CSS 的時候，面對滿屏亂飛的組件，真想手動給他們挪到該在位置上……
都說 CSS 很難掌握，最愁給頁面編寫樣式，其實都是因為還沒有形成一個對象 CSS 宏觀的了解，只要有了正確的學習方法、設計思維，再通過不斷的積累，就能輕松地掌握它。接下來我會把掌握 CSS 的 5 技巧整理一下，讓你在以后編寫 CSS 的時候不用再發(fā)愁。
CSS 最基本的功能就是調整 HTML 的樣式，可以設置元素的寬高、字體的顏色、大小和間距、背景顏色或圖片等。這些跟傳統(tǒng)的富文本編輯器不一樣比如 word 是一樣的效果。有些屬性可以一次性設置多個項目，比如background可以同時設置：
業(yè)余時間經常到像 mdn 之類的文檔網站上去查它們的用法，能長不少見識。
CSS 的一大難題就在于對頁面進行整體布局，這個時候就需要把思維放到一個整體上來，對布局進行規(guī)劃，然后合理利用 css 的 flex 和 grid 來實現。
多數情況下的頁面并不是規(guī)規(guī)矩矩的布局，經常會有層疊、覆蓋、偏移等奇特的布局方式，所以 CSS 有脫離文檔流這個概念，使用 absolute 絕對定位、fixed 固定定位、又或者是使用 float 屬性都會導致元素脫離正常的文檔流，正常的文檔流是說元素都是從上到下，從左到右依次排列的（塊級元素因為占據一整行，所以都是從上到下）。而元素脫離文檔流之后，這個元素就相當于被拿走，后邊的元素會占用這個元素的空間，以此類推。而這個單獨被拿走的元素則可以通過像 left，top 之類的屬性，根據一定的規(guī)則來自由移動，如果有重疊，則可以通過 z-index 來控制誰在上誰在下。需要注意的是，使用 tansform 屬性調整元素的位置不會導致它們脫離文檔流，它們所占的空間會停留在原位。
響應式布局用 CSS 實現比較簡單，通過 @media 查詢屏幕寬度，根據頁面的顯示效果，把相應的樣式覆蓋，來讓頁面顯示正常。
要訓練自己對布局的規(guī)劃，可以看一下其他的網站，從簡單規(guī)整的開始，逐步分析它們的布局，例如導航、頭部區(qū)域、內容分區(qū)和底部信息，自己用簡單的 HTML 元素方塊把它規(guī)劃出來，忽略組件細節(jié)，慢慢的再去看一些不規(guī)則布局的網站，再用自己的方法把它實現出來，慢慢的就會形成一種思路，看到設計稿就能知道該怎么大體規(guī)劃網站的布局了。
學習 CSS 建議看的就是 MDN[1] 和 W3Schools[2]，隨時查閱屬性的含義，如果想看具體的特效或者圖形怎么實現，可以谷歌搜索或者每天瀏覽一下 codepen 找找靈感。最重要的是一定要動手去寫，等積累的多了之后，就會形成套路。
需要私我 “資料” 獲?。。?/p>
*請認真填寫需求信息，我們會在24小時內與您取得聯(lián)系。
