Shulou(Shulou.com)06/01 Report--

This article will explain in detail how to achieve Mini Game Tetris by html5. The editor thinks it is very practical, so I share it for you as a reference. I hope you can get something after reading this article.

Production idea

Because the Tetris in the book is relatively ordinary, too conventional, and not very good-looking, so I found the picture above on the Internet and planned to follow it.

Then there is the game interface and the regular Tetris game logic.

Then there is the end of the game interface.

I originally wanted to do a pop-up layer, but I thought it was a little troublesome to find a picture, so I looked for text special effects on the Internet and applied it.

Code implementation:

The first is the html file and the css file, mainly related to the layout. As a novice, it is really a trampling pit over and over again. O (╥ ╥) o

Index.html:

Tetris / * Import external font file * / @ font-face {font-family:tmb;/* name the font tmb*/ src:url ("DS-DIGIB.TTF") format ("TrueType"); / * format is the font file format, TrueType is ttf*/} div > span {font-family:tmb Font-size:18pt; color:green;} Speed: 1 current score: 0 highest score: 0

Teris.css

* {margin:0; padding:0;} html, body {width:100%; height:100%;} .bg {font-size:13pt; background-color:rgb (239,239,227); / * good-looking gradient * / background-image:radial-gradient (rgb (239,239,227), rgb (230,220,212)); / * Shadow * / box-shadow:#cdc8c1-1px-1px 7px 0px; padding-bottom:4px }. Ui_bg {border-bottom:1px # a69e9ea3 solid; padding-bottom:2px; overflow:hidden;/* does not have this sentence because the child div has set float, so it floats on the web page, so the parent div has no height. This sentence clears the float, giving the parent div the height of the child div * /}

And then the big show, teris.js.

Game variables:

/ / Game setting var TETRIS_ROWS = 20 per var TETRIS_COLS = 14 per cent var CELL_SIZE = 24 per NO_BLOCK=0;var HAVE_BLOCK=1 / / define several possible square combinations var blockArr = [/ / Z [{x: TETRIS_COLS / 2-1, yTETRIS_COLS 0}, {x: TETRIS_COLS / 2, yTETRIS_COLS 0}, {x: TETRIS_COLS / 2 + 1, y1 TETRIS_COLS}], / / inverse Z [{x: TETRIS_COLS / 2 + 1] YRV 0}, {x: TETRIS_COLS / 2, YRV 0}, {x: TETRIS_COLS / 2, YRV 1}, {x: TETRIS_COLS / 2-1, YRV 1}], / / Tian [{x: TETRIS_COLS / 2-1, YRV 0}, {x: TETRIS_COLS / 2, YVR 0}, {x: TETRIS_COLS / 2-1, YRV 1} {x: TETRIS_COLS / 2, yTETRIS_COLS 1}], / / L [{x: TETRIS_COLS / 2-1, yTETRIS_COLS 0}, {x: TETRIS_COLS / 2-1, yTETRIS_COLS 1}, {x: TETRIS_COLS / 2, yTETRIS_COLS / 2}], / / J [{x: TETRIS_COLS / 2}] YRV 0}, {x: TETRIS_COLS / 2, YRV 1}, {x: TETRIS_COLS / 2, YRV 2}, {x: TETRIS_COLS / 2-1, YRV 2}], / / □□□□ [{x: TETRIS_COLS / 2, YRV 0}, {x: TETRIS_COLS / 2, YVR 1}, {x: TETRIS_COLS / 2, YRV 2} {x: TETRIS_COLS / 2, yTETRIS_COLS 3}], / / ┴ [{x: TETRIS_COLS / 2, yTETRIS_COLS 0}, {x: TETRIS_COLS / 2-1, yTETRIS_COLS 1}, {x: TETRIS_COLS / 2 + 1, yTETRIS_COLS 1}]] / record the current integral var curScore=0;// record once the highest integral var maxScore=1;var curSpeed=1;//ui element var curSpeedEle=document.getElementById ("cur_speed"); var curScoreEle=document.getElementById ("cur_points"); var maxScoreEle=document.getElementById ("max_points"); var timer;// square fall controls the current whereabouts of var myCanvas;var canvasCtx;var tetris_status;// map data block

The perfection of the game interface

/ / create canvasfunction createCanvas () {myCanvas=document.createElement ("canvas"); myCanvas.width=TETRIS_COLS*CELL_SIZE; myCanvas.height=TETRIS_ROWS*CELL_SIZE; / / draw background canvasCtx=myCanvas.getContext ("2d"); canvasCtx.beginPath (); / / TETRIS_COS for (let item1; I

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.