全国服务热线:4008-888-888

技术知识

Html5写1个简易的俄罗斯方块小手机游戏

前言

在1个风和日丽的1天,看完了瘋狂HTML 5+CSS 3+JavaScript教材,跟随做了书里最终1章的俄罗斯方块小手机游戏,并做了1些改善,做为自身前端开发学习培训的第1站。

手机游戏实际效果:

制做思路

由于书里的俄罗斯方块较为一般,太基本了,并不是很漂亮,因此我在网络上找了上面那张照片,准备照着它来做。(请疏忽制成品和原图的差别)

随后就是手机游戏页面和基本的俄罗斯方块手机游戏逻辑性。

接着就是手机游戏完毕页面了。

本来想做个弹出层,但感觉找照片有点不便,因此就在网络上找了文本殊效,套用了1下。

编码完成:

最先是html文档和css文档,关键涉及到了合理布局层面。做为初学者,在上面真的是翻来翻去的踩坑。o(╥﹏╥)o

index.html

<!DOCTYPE html>
<html>
<head>
    <title>俄罗斯方块</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf⑻"/>
    <link rel=stylesheet type="text/css" href="teris.css">
    <style type="text/css">
        /*导入外界的字体样式文档*/
        @font-face{
            font-family:tmb;/*为字体样式取名为tmb*/
            src:url("DS-DIGIB.TTF") format("TrueType");/*format为字体样式文档文件格式,TrueType为ttf*/
        }
        div>span{
            font-family:tmb;
            font-size:18pt;
            color:green;
        }
    </style>
</head>

<body>
    <div id="container" class="bg">
        <!--ui-->
        <div class="ui_bg">
            <div style="float:left;margin-right:4px;">
                速率:<span id="cur_speed">1</span>
            </div>
            <div style="float:left;">
                当今分数:<span id="cur_points">0</span>
            </div>
            <div style="float:right;">
                最高分数:<span id="max_points">0</span>
            </div>
        </div>
        <canvas id="text" width="500" height="100" style="position:absolute;"></canvas>
        <canvas id="stage" width="500" height="100" style="position:absolute;"></canvas>
    </div>
    <script src='EasePack.min.js'></script>
    <script src='TweenLite.min.js'></script>
    <script src='easeljs-0.7.1.min.js'></script>
    <script src='requestAnimationFrame.js'></script>
    <script type="text/javascript" src="jquery⑶.4.1.min.js"></script>
    <script type="text/javascript" src="teris.js"></script>
</body>
</html>

teris.css

*{
    margin:0;
    padding:0;
}
html, body{
    width:100%;
    height:100%;
}

.bg{
    font-size:13pt;
    background-color:rgb(239, 239, 227);
    /*漂亮的渐变色色*/
    background-image:radial-gradient(rgb(239, 239, 227), rgb(230, 220, 212));
    /*黑影*/
    box-shadow:#cdc8c1 ⑴px ⑴px 7px 0px;
    padding-bottom:4px;
}

.ui_bg{
    border-bottom:1px #a69e9ea3 solid;
    padding-bottom:2px;
    overflow:hidden;/*沒有这句的话由于子div都设定了float,因此是浮在网页页面上的,因此父div就沒有高宽比,这句消除了波动,让父div有了子div的高宽比*/
}

随后是重头戏,teris.js

手机游戏自变量

//手机游戏设置
var TETRIS_ROWS = 20;
var TETRIS_COLS = 14;
var CELL_SIZE = 24;
var NO_BLOCK=0;
var HAVE_BLOCK=1;
// 界定几种将会出現的方块组成
var blockArr = [
    // Z
    [
        {x: TETRIS_COLS / 2 - 1 , y:0},
        {x: TETRIS_COLS / 2 , y:0},
        {x: TETRIS_COLS / 2 , y:1},
        {x: TETRIS_COLS / 2 + 1 , y:1}
    ],
    // 反Z
    [
        {x: TETRIS_COLS / 2 + 1 , y:0},
        {x: TETRIS_COLS / 2 , y:0},
        {x: TETRIS_COLS / 2 , y:1},
        {x: TETRIS_COLS / 2 - 1 , y:1}
    ],
    // 田
    [
        {x: TETRIS_COLS / 2 - 1 , y:0},
        {x: TETRIS_COLS / 2 , y:0},
        {x: TETRIS_COLS / 2 - 1 , y:1},
        {x: TETRIS_COLS / 2 , y:1}
    ],
    // L
    [
        {x: TETRIS_COLS / 2 - 1 , y:0},
        {x: TETRIS_COLS / 2 - 1, y:1},
        {x: TETRIS_COLS / 2 - 1 , y:2},
        {x: TETRIS_COLS / 2 , y:2}
    ],
    // J
    [
        {x: TETRIS_COLS / 2  , y:0},
        {x: TETRIS_COLS / 2 , y:1},
        {x: TETRIS_COLS / 2  , y:2},
        {x: TETRIS_COLS / 2 - 1, y:2}
    ],
    // □□□□
    [
        {x: TETRIS_COLS / 2 , y:0},
        {x: TETRIS_COLS / 2 , y:1},
        {x: TETRIS_COLS / 2 , y:2},
        {x: TETRIS_COLS / 2 , y:3}
    ],
    // ┴
    [
        {x: TETRIS_COLS / 2 , y:0},
        {x: TETRIS_COLS / 2 - 1 , y:1},
        {x: TETRIS_COLS / 2 , y:1},
        {x: TETRIS_COLS / 2 + 1, y:1}
    ]
];

// 纪录当今積分
var curScore=0;
// 纪录以前的最高積分
var maxScore=1;
var curSpeed=1;
//ui元素
var curSpeedEle=document.getElementById("cur_speed");
var curScoreEle=document.getElementById("cur_points");
var maxScoreEle=document.getElementById("max_points");

var timer;//方块着落操纵

var myCanvas;
var canvasCtx;
var tetris_status;//地形图数据信息
var currentFall;//当今着落的block

手机游戏页面的健全

//create canvas
function createCanvas(){
    myCanvas=document.createElement("canvas");
    myCanvas.width=TETRIS_COLS*CELL_SIZE;
    myCanvas.height=TETRIS_ROWS*CELL_SIZE;
    //绘图情况
    canvasCtx=myCanvas.getContext("2d");
    canvasCtx.beginPath();
    //TETRIS_COS
    for(let i=1; i<TETRIS_COLS; i++){
        canvasCtx.moveTo(i*CELL_SIZE, 0);
        canvasCtx.lineTo(i*CELL_SIZE, myCanvas.height);
    }
    for(let i=1; i<TETRIS_ROWS; i++){
        canvasCtx.moveTo(0, i*CELL_SIZE);
        canvasCtx.lineTo(myCanvas.width, i*CELL_SIZE);
    }
    canvasCtx.closePath();
    canvasCtx.strokeStyle="#b4a79d";
    canvasCtx.lineWidth=0.6;
    canvasCtx.stroke();
    //第1行,最终1行,第1列,最终1列粗1点。
    canvasCtx.beginPath();
    canvasCtx.moveTo(0, 0);
    canvasCtx.lineTo(myCanvas.width, 0);
    canvasCtx.moveTo(0, myCanvas.height);
    canvasCtx.lineTo(myCanvas.width, myCanvas.height);
    canvasCtx.moveTo(0, 0);
    canvasCtx.lineTo(0, myCanvas.height);
    canvasCtx.moveTo(myCanvas.width, 0);
    canvasCtx.lineTo(myCanvas.width, myCanvas.height);
    canvasCtx.closePath();
    canvasCtx.strokeStyle="#b4a79d";
    canvasCtx.lineWidth=4;
    canvasCtx.stroke();
    //设定绘图block时的style
    canvasCtx.fillStyle="#201a14";
}

draw canvas
function changeWidthAndHeight(w, h){
    //根据jquery设定css
    h+=$("ui_bg").css("height")+$("ui_bg").css("margin-rop")+$("ui_bg").css("margin-bottom")+$("ui_bg").css("padding-top")+$("ui_bg").css("padding-bottom");
    $(".bg").css({
        "width":w,
        "height":h,
        "top":0, "bottom":0, "right":0, "left":0,
        "margin":"auto"
    });
}

change width and height
//draw blocks
function drawBlocks(){
    //清空闲地图
    for(let i=0; i<TETRIS_ROWS;i++){
        for(let j=0;j<TETRIS_COLS;j++)
            canvasCtx.clearRect(j*CELL_SIZE+1, i*CELL_SIZE+1, CELL_SIZE⑵, CELL_SIZE⑵);
    }
    //绘图地形图
    for(let i=0; i<TETRIS_ROWS;i++){
        for(let j=0;j<TETRIS_COLS;j++){
            if(tetris_status[i][j]!=NO_BLOCK)
                canvasCtx.fillRect(j*CELL_SIZE+1, i*CELL_SIZE+1, CELL_SIZE⑵, CELL_SIZE⑵);//正中间留点间隙
        }
    }
    //绘图currentFall
    for(let i=0;i<currentFall.length;i++)
        canvasCtx.fillRect(currentFall[i].x*CELL_SIZE+1, currentFall[i].y*CELL_SIZE+1, CELL_SIZE⑵,CELL_SIZE⑵);
}

draw block

手机游戏逻辑性

function rotate(){
    // 界定纪录能否转动的旗标
    var canRotate = true;
    for (var i = 0 ; i < currentFall.length ; i++)
    {
        var preX = currentFall[i].x;
        var preY = currentFall[i].y;
        // 自始至终以第3个方块做为转动的管理中心,
        // i == 2时,表明是转动的管理中心
        if(i != 2)
        {
            // 测算方块转动后的x、y座标
            var afterRotateX = currentFall[2].x + preY - currentFall[2].y;
            var afterRotateY = currentFall[2].y + currentFall[2].x - preX;
            // 假如转动后所属部位已有方块,说明不可以转动
            if(tetris_status[afterRotateY][afterRotateX + 1] != NO_BLOCK)
            {
                canRotate = false;
                break;
            }
            // 假如转动后的座标早已超过了最左侧界限
            if(afterRotateX < 0 || tetris_status[afterRotateY - 1][afterRotateX] != NO_BLOCK)
            {
                moveRight();
                afterRotateX = currentFall[2].x + preY - currentFall[2].y;
                afterRotateY = currentFall[2].y + currentFall[2].x - preX;
                break;
            }
            if(afterRotateX < 0 || tetris_status[afterRotateY⑴][afterRotateX] != NO_BLOCK)
            {
                moveRight();
                break;
            }
            // 假如转动后的座标早已超过了最右侧界限
            if(afterRotateX >= TETRIS_COLS - 1 || 
                tetris_status[afterRotateY][afterRotateX+1] != NO_BLOCK)
            {
                moveLeft();
                afterRotateX = currentFall[2].x + preY - currentFall[2].y;
                afterRotateY = currentFall[2].y + currentFall[2].x - preX;
                break;
            }
            if(afterRotateX >= TETRIS_COLS - 1 || 
                tetris_status[afterRotateY][afterRotateX+1] != NO_BLOCK)
            {
                moveLeft();
                break;
            }
        }
    }
    if(canRotate){
        for (var i = 0 ; i < currentFall.length ; i++){
            var preX = currentFall[i].x;
            var preY = currentFall[i].y;
            if(i != 2){
                currentFall[i].x = currentFall[2].x + 
                    preY - currentFall[2].y;
                currentFall[i].y = currentFall[2].y + 
                    currentFall[2].x - preX;
            }
        }
        localStorage.setItem("currentFall", JSON.stringify(currentFall));
    }
}

转动
//按下 下 或 interval到了
function next(){
    if(moveDown()){
        //纪录block
        for(let i=0;i<currentFall.length;i++)
            tetris_status[currentFall[i].y][currentFall[i].x]=HAVE_BLOCK;
        //分辨有木有满行的
        for(let j=0;j<currentFall.length;j++){
            for(let i=0;i<TETRIS_COLS; i++){
                if(tetris_status[currentFall[j].y][i]==NO_BLOCK)
                    break;
                //最终1行满了
                if(i==TETRIS_COLS⑴){
                    //清除最终1行
                    for(let i=currentFall[j].y; i>0;i--){
                        for(let j=0;j<TETRIS_COLS;j++)
                            tetris_status[i][j]=tetris_status[i⑴][j];
                    }
                    //分数提升
                    curScore+=5;
                    localStorage.setItem("curScore", curScore);
                    if(curScore>maxScore){
                        //跨越最高分
                        maxScore=curScore;
                        localStorage.setItem("maxScore", maxScore);
                    }
                    //加快
                    curSpeed+=0.1;
                    localStorage.setItem("curSpeed", curSpeed);
                    //ui輸出
                    curScoreEle.innerHTML=""+curScore;
                    maxScoreEle.innerHTML=""+maxScore;
                    curSpeedEle.innerHTML=curSpeed.toFixed(1);//保存两位小数
                    clearInterval(timer);
                    timer=setInterval(function(){
                        next();
                    }, 500/curSpeed);
                }
            }
        }
        //分辨是不是触顶
        for(let i=0;i<currentFall.length;i++){
            if(currentFall[i].y==0){
                gameEnd();
                return;
            }
        }
        localStorage.setItem("tetris_status", JSON.stringify(tetris_status));
        //新的block
        createBlock();
        localStorage.setItem("currentFall", JSON.stringify(currentFall));
    }
    drawBlocks();
}

//右移
function moveRight(){
    for(let i=0;i<currentFall.length;i++){
        if(currentFall[i].x+1>=TETRIS_ROWS || tetris_status[currentFall[i].y][currentFall[i].x+1]!=NO_BLOCK)
            return;
    }
    for(let i=0;i<currentFall.length;i++)
        currentFall[i].x++;
    localStorage.setItem("currentFall", JSON.stringify(currentFall));
    return;
}
//左移
function moveLeft(){
    for(let i=0;i<currentFall.length;i++){
        if(currentFall[i].x⑴<0 || tetris_status[currentFall[i].y][currentFall[i].x⑴]!=NO_BLOCK)
            return;
    }
    for(let i=0;i<currentFall.length;i++)
        currentFall[i].x--;
    localStorage.setItem("currentFall", JSON.stringify(currentFall));
    return;
}
//judge can move down and if arrive at end return 1, if touch other blocks return 2, else, return 0
function moveDown(){
    for(let i=0;i<currentFall.length;i++){
        if(currentFall[i].y>=TETRIS_ROWS⑴ || tetris_status[currentFall[i].y+1][currentFall[i].x]!=NO_BLOCK)
            return true;
    }

    for(let i=0;i<currentFall.length;i++)
        currentFall[i].y+=1;
    return false;
}

左右上下挪动
function gameKeyEvent(evt){
    switch(evt.keyCode){
        //向下
        case 40://↓
        case 83://S
            next();
            drawBlocks();
            break;
        //向左
        case 37://←
        case 65://A
            moveLeft();
            drawBlocks();
            break;
        //向右
        case 39://→
        case 68://D
            moveRight();
            drawBlocks();
            break;
        //转动
        case 38://↑
        case 87://W
            rotate();
            drawBlocks();
            break;
    }
}

keydown恶性事件监视

keydown恶性事件监视

别的的详尽状况能够看源码,我就不梳理了。

接下来大家看手机游戏完毕时的殊效。由于我也并不是很懂,因此在这里梳理的会较为详尽。作为学习培训。

//game end
function gameEnd(){
    clearInterval(timer);
    //电脑键盘键入监视完毕
    window.onkeydown=function(){
        //按随意键再次刚开始手机游戏
        window.onkeydown=gameKeyEvent;
        //原始化手机游戏数据信息
        initData();
        createBlock();
        localStorage.setItem("currentFall", JSON.stringify(currentFall));
        localStorage.setItem("tetris_status", JSON.stringify(tetris_status));
        localStorage.setItem("curScore", curScore);
        localStorage.setItem("curSpeed", curSpeed);
        //绘图
        curScoreEle.innerHTML=""+curScore;
        curSpeedEle.innerHTML=curSpeed.toFixed(1);//保存两位小数
        drawBlocks();
        timer=setInterval(function(){
            next();
        }, 500/curSpeed);
        //消除殊效
        this.stage.removeAllChildren();
        this.textStage.removeAllChildren();
    };
    //殊效,手机游戏完毕
    setTimeout(function(){
        initAnim();
        //擦除黑色方块
        for(let i=0; i<TETRIS_ROWS;i++){
            for(let j=0;j<TETRIS_COLS;j++)
                canvasCtx.clearRect(j*CELL_SIZE+1, i*CELL_SIZE+1, CELL_SIZE⑵, CELL_SIZE⑵);
        }
    }, 200);
    //延迟显示信息Failed
    setTimeout(function(){
        if(textFormed) {
            explode();
            setTimeout(function() {
                createText("FAILED");
            }, 810);
        } else {
            createText("FAILED");
        }
    }, 800);
}

上面编码里的localstorage是html5的当地数据信息储存。由于并不是应用很难,因此实际看编码。

全部殊效是应用了createjs软件。要引进几个文档。

easeljs-0.7.1.min.js,EasePacj.min.js,requestAnimationFrame.js和TweenLite.min.js 手机游戏再次刚开始就要消除殊效。我看api里我第1眼望以往最显著的便是removeAllChildren(),因此就选了这个。别的的改善往后再说。

 //消除殊效
        this.stage.removeAllChildren();
        this.textStage.removeAllChildren();
function initAnim() {
    initStages();
    initText();
    initCircles();
    //在stage正下方加上文本——按随意键再次刚开始手机游戏.
    tmp = new createjs.Text("t", "12px 'Source Sans Pro'", "#54555C");
    tmp.textAlign = 'center';
    tmp.x = 180;
    tmp.y=350;
    tmp.text = "按随意键再次刚开始手机游戏";
    stage.addChild(tmp);
    animate();
}

initAnim

上面原始化了1个stage,用于储放殊效,1个textstage,用于产生“FAILED”的像素照片。也有1个按随意键再次手机游戏的提醒。另外刚开始每隔1段時间就更新stage。

依据block的部位来原始化小圆点。

function initCircles() {
    circles = [];
    var p=[];
    var count=0;
    for(let i=0; i<TETRIS_ROWS;i++)
        for(let j=0;j<TETRIS_COLS;j++)
            if(tetris_status[i][j]!=NO_BLOCK)
                p.push({'x':j*CELL_SIZE+2, 'y':i*CELL_SIZE+2, 'w':CELL_SIZE⑶, 'h':CELL_SIZE⑷});
    for(var i=0; i<250; i++) {
        var circle = new createjs.Shape();
        var r = 7;
        //x和y范畴限制在黑色block内
        var x = p[count]['x']+p[count]['w']*Math.random();
        var y = p[count]['y']+p[count]['h']*Math.random();
        count++;
        if(count>=p.length)
            count=0;
        var color = colors[Math.floor(i%colors.length)];
        var alpha = 0.2 + Math.random()*0.5;
        circle.alpha = alpha;
        circle.radius = r;
        circle.graphics.beginFill(color).drawCircle(0, 0, r);
        circle.x = x;
        circle.y = y;
        circles.push(circle);
        stage.addChild(circle);
        circle.movement = 'float';
        tweenCircle(circle);
    }
}

initCircles

随后再讲显示信息殊效Failed的createText()。先将FAILED的text显示信息在textstage里,随后ctx.getImageData.data获得像素数据信息,并以此来为每一个小圆点界定部位。

function createText(t) {
    curText=t;
    var fontSize = 500/(t.length);
    if (fontSize > 80) fontSize = 80;
    text.text = t;
    text.font = "900 "+fontSize+"px 'Source Sans Pro'";
    text.textAlign = 'center';
    text.x = TETRIS_COLS*CELL_SIZE/2;
    text.y = 0;
    textStage.addChild(text);
    textStage.update();

    var ctx = document.getElementById('text').getContext('2d');
    var pix = ctx.getImageData(0,0,600,200).data;
    textPixels = [];
    for (var i = pix.length; i >= 0; i -= 4) {
        if (pix[i] != 0) {
            var x = (i / 4) % 600;
            var y = Math.floor(Math.floor(i/600)/4);
            if((x && x%8 == 0) && (y && y%8 == 0)) textPixels.push({x: x, y: y});
        }
    }

    formText();
    textStage.clear();//清晰text的显示信息
}

CreateText

跟随编码的节奏走,大家如今来到了formtext.

function formText() {
    for(var i= 0, l=textPixels.length; i<l; i++) {
        circles[i].originX = offsetX + textPixels[i].x;
        circles[i].originY = offsetY + textPixels[i].y;
        tweenCircle(circles[i], 'in');
    }
    textFormed = true;
    if(textPixels.length < circles.length) {
        for(var j = textPixels.length; j<circles.length; j++) {
            circles[j].tween = TweenLite.to(circles[j], 0.4, {alpha: 0.1});
        }
    }
}

formtext

explode()便是讲已构成字的小圆点给再次解散。

动漫完成是应用了tweenlite.

function tweenCircle(c, dir) {
    if(c.tween) c.tween.kill();
    if(dir == 'in') {
        /*TweenLite.to 更改c案例的x座标,y座标,应用easeInOut延展性涵数,全透明度提到1,更改尺寸,radius,总用时0.4s*/
        c.tween = TweenLite.to(c, 0.4, {x: c.originX, y: c.originY, ease:Quad.easeInOut, alpha: 1, radius: 5, scaleX: 0.4, scaleY: 0.4, onComplete: function() {
            c.movement = 'jiggle';/*轻摇*/
            tweenCircle(c);
        }});
    } else if(dir == 'out') {
        c.tween = TweenLite.to(c, 0.8, {x: window.innerWidth*Math.random(), y: window.innerHeight*Math.random(), ease:Quad.easeInOut, alpha: 0.2 + Math.random()*0.5, scaleX: 1, scaleY: 1, onComplete: function() {
            c.movement = 'float';
            tweenCircle(c);
        }});
    } else {
        if(c.movement == 'float') {
            c.tween = TweenLite.to(c, 5 + Math.random()*3.5, {x: c.x + ⑴00+Math.random()*200, y: c.y + ⑴00+Math.random()*200, ease:Quad.easeInOut, alpha: 0.2 + Math.random()*0.5,
                onComplete: function() {
                    tweenCircle(c);
                }});
        } else {
            c.tween = TweenLite.to(c, 0.05, {x: c.originX + Math.random()*3, y: c.originY + Math.random()*3, ease:Quad.easeInOut,
                onComplete: function() {
                    tweenCircle(c);
                }});
        }
    }
}

TweenLite.to涵数第1个主要参数,要做动漫的案例,第2个主要参数,恶性事件,第3个主要参数,动漫更改主要参数。

Quad.easeInOut()意思是在动漫刚开始和完毕时缓动。onComplete动漫进行时启用的涵数。容易得到,在大家的运用中,大家将刚开始下1次动漫。

本人感言

实际上一开始没想做这么繁杂,因此文档排的较为随便,随后就致使了后期新项目进行时那副杂乱无章无章的模样。^_^,之后改。等我等看懂动漫实际效果时在说,如今用的有点半懵半懂。

这篇blog写得有点乱。初学者之作,就先这样吧。同上,之后改。由于不知道道这个新项目会不容易拿来立即当大家测算机岗位实践活动的工作。如果的话,我就彻改,连同blog。

下列是源码详细地址。

还在审批。明日再说。坚信我,我在小西红柿里做了纪录。

总结

以上所述是网编给大伙儿详细介绍的Html5写1个简易的俄罗斯方块小手机游戏,期待对大伙儿有一定的协助,假如大伙儿有任何疑惑请给我留言,网编会立即回应大伙儿的。在此也十分谢谢大伙儿对脚本制作之家网站的适用!假如你感觉本文对你有协助,欢迎转载,烦请注明出处,感谢!



在线客服

关闭

客户服务热线
4008-888-888


点击这里给我发消息 在线客服

点击这里给我发消息 在线客服