Home > Article > Web Front-end > HTML5 JS implementation of Tetris principles and specific steps_html5 tutorial skills
HTML5 JS implementation of Tetris principles and specific steps_html5 tutorial skills
- WBOYOriginal
- 2016-05-16 15:48:311725browse
Basic principles for the implementation of this game:
The game area is an area of limited size. The game area of this game has 21×25 rectangles. Each rectangle has a width of 10 units and a height of 6 units (the absolute unit of canvas is fixed, not pixels).
Create the RusBlock class to contain corresponding data and behavior, and create a two-dimensional array aState[21][25] to record the marked rectangle in the game area.
Tetris has 7 parts. The number and position of the rectangles occupied by each part are different, so create a part class, and then create an array to store the 7 parts. Each part contains an array to store the rectangle occupied by the part. The number and position of rectangles. When the falling part reaches the bottom, a new part will be generated, and the marked rectangle of the part will be assigned to the array of the game area.
In the game loop function, print the falling parts, the fixed parts, and the next falling parts.
RusBlock< /title> <br><link rel=”stylesheet” type=”text/css” href=”RusBlock.css”> <br><script type=”text/javascript”> <br>function ShareGame () { <br>var URL = “http://share.renren.com/share/buttonshare.do?link=” document.URL “&title=RusBlock”; <br>window.showModalDialog([URL]); <br>} <br></script> <br></head> <br><body onkeyup=”Action(event)”> <br><audio loop=”loop” id=” Background-AudioPlayer” preload=”auto”> <br><source src=”audio/background.mp3″ type=”audio/mp3″/> <br></audio> <br><audio id=”GameOver-AudioPlayer” preload=”auto”> <br><source src=”audio/gameover.ogg” type=”audio/ogg”> <br></audio> <br>< ;audio id=”Score-AudioPlayer” preload=”auto”> <br><source src=”audio/score.mp3″ type=”audio/mp3″/> <br></audio> <br><div id=”Game-Area”> <br><div id=”Button-Area”> <br><h1 id=”Game-Name”>RusBlock</h1> <br><button id=”Button-Game-Start” onclick=”GameStart()”>Start</button> <br><button id=”Button-Game-End” onclick=”GameEnd()” >End</button> <br><form id=”Form-Game-Level”> <br><select id=”Select-Game-Level”> <br><option value=” 500″ selected=”selected”>Easy</option> <br><option value=”300″>Normal</option> <br><option value=”200″>Hard</option> <br></select> <br></form> <br><button onclick=”ShareGame()” id=”Button-Game-Share”>Share to Renren</button> <br></div> <br><canvas id=”Game-Canvas”></canvas> <br><div id=”Score-Area”> <br><h2>Score< ;/h2> <br><p id=”Game-Score”>0</p> <br></div> <br></div> <br><script type=”text /javascript” src=”RusBlock.js”></script> <br></body> <br></html> <br>
</div>
<br><strong>Step 2: Style </strong> <br>RosBlock.css <br><br><div class="msgheader">
<div class="right"><span style="CURSOR: pointer" onclick="copycode(getid('phpcode25'));"><u>Copy code</u></span></div>The code is as follows:</div>
<div class="msgborder" id="phpcode25"> <br>body { <br>background-color:gray; <br>text-align:center; <br>font-family:’Times New Roman’; <br>background-image:url(“”); <br>} <br>h1#Game-Name { <br>background-color:white; <br>width:100%; <br>font-size:x-large; <br>} <br>h2,#Game-Score { <br>font-size:x-large; <br>background-color:white; <br>} <br>#Game-Area { <br>position:absolute; <br>left:10%; <br>width:80%; <br>height:99%; <br>} <br>canvas#Game-Canvas { <br>background-color:white; <br>width:80%; <br>height:98%; <br>float:left; <br>} <br>#Button-Area ,#Score-Area{ <br>width:10%; <br>height:100%; <br>float:left; <br>} <br>#Button-Game-Start ,#Button-Game-End,#Button-Game-Share,#Select-Game-Level{ <br>width:100%; <br>height:10%; <br>font-size:larger; <br>border-right-width:3px; <br>background-color:white; <br>} <br>#Select-Game-Level { <br>width:100%; <br>height:100%; <br>font-size:x-large; <br>border-color:gray; <br>} <br>
</div>
<br><strong>第三步:编写js代码 <br><br></strong>RusBlock.js <br><br>Rusblock类包括的成员解析: <br><br>数据: <br><br>nCurrentComID:当前下落部件的ID <br><br>aState[21][25]:存储游戏区域状态的数组 <br><br>CurrentCom：当前下落的部件 <br><br>NextCom：下一部件 <br><br>ptIndex：当前下落的部件相对游戏区域的索引 <br><br>函数: <br><br>NewNextCom()：产生新的下一部件 <br><br>NextComToCurrentCom():将下一部件的数据转移到当前下落的部件上 <br><br>CanDown():判断当前部件是否还可以下落 <br><br>CanNew():判断是否还可以产生新的部件 <br><br>Left():当前部件向左移动 <br><br>Right():当前部件向右移动 <br><br>Rotate():当前部件顺时针旋转 <br><br>Acceleratet():当前部件向下加速 <br><br>Disappear():消去一行 <br><br>CheckFail():判断是否游戏失败 <br><br>InvalidateRect():刷新当前部件的区域 <br><br>完成:<a target="_blank" href="http://pan.baidu.com/s/13nnRI">下载Demo</a> <br><img alt="" src="http://files.jb51.net/file_images/article/201311/201311291618142.gif?20131029161836"></div><div class="nphpQianMsg"><div class="clear"></div></div><div class="nphpQianSheng"><span>Statement：</span><div>The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn</div></div></div><div class="nphpSytBox"><span>Previous article：<a class="dBlack" title="Notes special effects implemented in html5 (practical sharing)_html5 tutorial skills" href="http://m.php.cn/faq/6130.html">Notes special effects implemented in html5 (practical sharing)_html5 tutorial skills</a></span><span>Next article：<a class="dBlack" title="Notes special effects implemented in html5 (practical sharing)_html5 tutorial skills" href="http://m.php.cn/faq/6134.html">Notes special effects implemented in html5 (practical sharing)_html5 tutorial skills</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>Related articles</h2><em><a href="http://m.php.cn/article.html" class="bBlack"><i>See more</i><b></b></a></em><div class="clear"></div></div><ul class="nphpXgwzList"><li><b></b><a href="http://m.php.cn/faq/348281.html" title="AlloyTouch full-screen scrolling plug-in creates a smooth H5 page in 30 seconds" class="aBlack">AlloyTouch full-screen scrolling plug-in creates a smooth H5 page in 30 seconds</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/faq/348372.html" title="HTML5 actual combat and analysis of touch events (touchstart, touchmove and touchend)" class="aBlack">HTML5 actual combat and analysis of touch events (touchstart, touchmove and touchend)</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/faq/348373.html" title="Detailed explanation of image drawing examples in HTML5 canvas 9" class="aBlack">Detailed explanation of image drawing examples in HTML5 canvas 9</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/faq/348374.html" title="Regular expressions and new HTML5 elements" class="aBlack">Regular expressions and new HTML5 elements</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/faq/348469.html" title="How to combine NodeJS and HTML5 to drag and drop multiple files to upload to the server" class="aBlack">How to combine NodeJS and HTML5 to drag and drop multiple files to upload to the server</a><div class="clear"></div></li></ul></div></div><div class="nphpFoot"><div class="nphpFootBg"><ul class="nphpFootMenu"><li><a href="http://m.php.cn/"><b class="icon1"></b><p>Home</p></a></li><li><a href="http://m.php.cn/course.html"><b class="icon2"></b><p>Course</p></a></li><li><a href="http://m.php.cn/wenda.html"><b class="icon4"></b><p>Q&A</p></a></li><li><a href="http://m.php.cn/login"><b class="icon5"></b><p>My</p></a></li><div class="clear"></div></ul></div></div><div class="nphpYouBox" style="display: none;"><div class="nphpYouBg"><div class="nphpYouTitle"><span onclick="$('.nphpYouBox').hide()"></span><a href="http://m.php.cn/"></a><div class="clear"></div></div><ul class="nphpYouList"><li><a href="http://m.php.cn/"><b class="icon1"></b><span>Home</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/course.html"><b class="icon2"></b><span>Course</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/article.html"><b class="icon3"></b><span>Article</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/wenda.html"><b class="icon4"></b><span>Q&A</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/dic.html"><b class="icon6"></b><span>Dictionary</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/course/type/99.html"><b class="icon7"></b><span>Manual</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/xiazai/"><b class="icon8"></b><span>Download</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/faq/zt" title="Topic"><b class="icon12"></b><span>Topic</span><div class="clear"></div></a></li><div class="clear"></div></ul></div></div><div class="nphpDing" style="display: none;"><div class="nphpDinglogo"><a href="http://m.php.cn/"></a></div><div class="nphpNavIn1"><div class="swiper-container nphpNavSwiper1"><div class="swiper-wrapper"><div class="swiper-slide"><a href="http://m.php.cn/" >Home</a></div><div class="swiper-slide"><a href="http://m.php.cn/article.html" class="hover">Article</a></div><div class="swiper-slide"><a href="http://m.php.cn/wenda.html" >Q&A</a></div><div class="swiper-slide"><a href="http://m.php.cn/course.html" >Course</a></div><div class="swiper-slide"><a href="http://m.php.cn/faq/zt" >Topic</a></div><div class="swiper-slide"><a href="http://m.php.cn/xiazai" >Download</a></div><div class="swiper-slide"><a href="http://m.php.cn/game" >Game</a></div><div class="swiper-slide"><a href="http://m.php.cn/dic.html" >Dictionary</a></div><div class="clear"></div></div></div><div class="langadivs" ><a href="javascript:;" class="bg4 bglanguage"></a><div class="langadiv" ><a onclick="javascript:setlang('zh-cn');" class="language course-right-orders chooselan " href="javascript:;"><span>简体中文</span><span>（ZH-CN）</span></a><a onclick="javascript:;" class="language course-right-orders chooselan chooselanguage" href="javascript:;"><span>English</span><span>（EN）</span></a><a onclick="javascript:setlang('zh-tw');" class="language course-right-orders chooselan " href="javascript:;"><span>繁体中文</span><span>（ZH-TW）</span></a><a onclick="javascript:setlang('ja');" class="language course-right-orders chooselan " href="javascript:;"><span>日本語</span><span>（JA）</span></a><a onclick="javascript:setlang('ko');" class="language course-right-orders chooselan " href="javascript:;"><span>한국어</span><span>（KO）</span></a><a onclick="javascript:setlang('ms');" class="language course-right-orders chooselan " href="javascript:;"><span>Melayu</span><span>（MS）</span></a><a onclick="javascript:setlang('fr');" class="language course-right-orders chooselan " href="javascript:;"><span>Français</span><span>（FR）</span></a><a onclick="javascript:setlang('de');" class="language course-right-orders chooselan " href="javascript:;"><span>Deutsch</span><span>（DE）</span></a></div></div><script> var swiper = new Swiper('.nphpNavSwiper1', {
slidesPerView : 'auto',
observer: true,//修改swiper自己或子元素时，自动初始化swiper
observeParents: true,//修改swiper的父元素时，自动初始化swiper
});
</script></div></div><!--顶部导航 end--><script>isLogin = 0;</script><script type="text/javascript" src="/static/layui/layui.js"></script><script type="text/javascript" src="/static/js/global.js?4.9.47"></script></div><script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script><link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css' type='text/css' media='all'/><script type='text/javascript' src='/static/js/viewer.min.js?1'></script><script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script><script>jQuery.fn.wait = function (func, times, interval) {
var _times = times || -1, //100次
_interval = interval || 20, //20毫秒每次
_self = this,
_selector = this.selector, //选择器
_iIntervalID; //定时器id
if( this.length ){ //如果已经获取到了，就直接执行函数
func && func.call(this);
} else {
_iIntervalID = setInterval(function() {
if(!_times) { //是0就退出
clearInterval(_iIntervalID);
}
_times <= 0 || _times--; //如果是正数就 --
_self = $(_selector); //再次选择
if( _self.length ) { //判断是否取到
func && func.call(_self);
clearInterval(_iIntervalID);
}
}, _interval);
}
return this;
}
$("table.syntaxhighlighter").wait(function() {
$('table.syntaxhighlighter').append("<p class='cnblogs_code_footer'><span class='cnblogs_code_footer_icon'></span></p>");
});
$(document).on("click", ".cnblogs_code_footer",function(){
$(this).parents('table.syntaxhighlighter').css('display','inline-table');$(this).hide();
});
$('.nphpQianCont').viewer({navbar:true,title:false,toolbar:false,movable:false,viewed:function(){$('img').click(function(){$('.viewer-close').trigger('click');});}});
</script></body></html>
The game area is an area of limited size. The game area of this game has 21×25 rectangles. Each rectangle has a width of 10 units and a height of 6 units (the absolute unit of canvas is fixed, not pixels).
Create the RusBlock class to contain corresponding data and behavior, and create a two-dimensional array aState[21][25] to record the marked rectangle in the game area.
Tetris has 7 parts. The number and position of the rectangles occupied by each part are different, so create a part class, and then create an array to store the 7 parts. Each part contains an array to store the rectangle occupied by the part. The number and position of rectangles. When the falling part reaches the bottom, a new part will be generated, and the marked rectangle of the part will be assigned to the array of the game area.
In the game loop function, print the falling parts, the fixed parts, and the next falling parts.
Basic knowledge:
HTML5 CSS JS
This game includes three files:
RusBlock.html: Setting elements
RusBlock.css: Setting style
RusBlock.js: Script control
Step One: Interface Settings and Material Preparation
RusBlock.html
Copy code
The code is as follows: