使用HTML做一个小游戏（俄罗斯方块），这样的思路还不了解，那我就，就，就.....

最新推荐文章于 2024-06-04 12:31:16 发布

青猫锅锅

最新推荐文章于 2024-06-04 12:31:16 发布

阅读量5.3k

点赞数 8

分类专栏：笔记

本文链接：https://blog.csdn.net/qq_46964039/article/details/108009481

版权

使用HTML做一个小游戏（俄罗斯方块）

前言

首先我们要知道俄罗斯方块大概有哪些方块块，看下图~~ (图中不包括变化形态的方块）然后再来考虑一般自己以前玩这个小游戏的时候，会出现什么的形状，最后开始写代码
在这里插入图片描述

考虑方块变化的形态的方式

先看下面这张图是我从一个前辈那里截下来的图
在这里插入图片描述
看每一个方块块中都有一个方块是红色的，我们就以这个为中心

例如：m(x,y)（0,0）
下图的坐标（0，0）（1,0）（0，1）（1，1）沿着这个坐标画出下面的图案以一个小正方形的形式
在这里插入图片描述

考虑俄罗斯方块应该要实现功能

先看一下封面有什么东西
在这里插入图片描述
第一点：了解方块的形状变化
第二点：存放方块的宽度和长度(方块所在的地方)
第三点：判断x和y轴如果都等于1的时候,意思就是方块已经到最顶峰了,就表示游戏结束
第四点：游戏结束，要有一个点击一个按键，表示刷新，也表示重玩的方法
第五点：考虑使用什么键，来控制形状的变化和移动键 一般使用的是上下左右键或 wasd键看个人喜好吧
第六点：就是当一行都有小正方形的时候，就要进行消除 看自己的感觉去吧，如果消除一行会不会有加分的方式，我这是是有的
第七点：就是必须要要的按钮就是 重玩按钮 这里也可以通过自己喜欢来做自己想要的按钮 比如：重玩，暂停，撤回上一方块，换一个方块等等

最后就是代码，其中我都有注释

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta id="viewport" name="viewport" content="width=540,user-scalable=no,target-densitydpi=high-dpi">
    <title>俄罗斯方块</title>
 
    <script type="text/javascript">
        var zt = false;
        (function () {
   
 
 
            var updatemovie = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame
            var can;
            var paint;
            var xch = 0;
            var jsq = 0;
            var fktype;
            var fkstate;
            var score = 0;
            var speed = 1;
            var x;
            var W = 30;
            var y;
            var time = 0;
            var j = 0;
            var flag = 0;
            var zm = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'];
            var tx = zm[0];
            var keycom = {
   "38": "turn()", "40": "down()", "37": "left()", "39": "right()"};
            var map = new Array2(13, 23, 0);//背景
						
						
						
						
						//形状变化
            var shapes = [
                // i
                [[0, 0, 0, 0, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0],
                    [0, 1, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0],
                    [0, 0, 0, 0, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0],
                    [0, 1, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0]],
                // s
                [[0, 1, 1, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
                    [1, 0, 0, 0, 1, 1, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0],
                    [0, 1, 1, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
                    [1, 0, 0, 0, 1, 1, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0]],
                // z
                [[1, 1, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0],
                    [0, 1, 0, 0, 1, 1, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0],
                    [1, 1, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0],
                    [0, 1, 0, 0, 1, 1, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0]],
                // j
                [[0, 1, 0, 0, 0, 1, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0],
                    [1, 0, 0, 0, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0],
                    [1, 1, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0],
                    [1, 1, 1, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0]],
                // o
                [[1, 1, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
                    [1, 1, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
                    [1, 1, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
                    [1, 1, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]],
                // l
                [[1, 0, 0, 0, 1, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0],
                    [1, 1, 1, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
                    [1, 1, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0],
                    [0, 0, 1, 0, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0]],
                // t
                [[0, 1, 0, 0, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0],
                    [0, 1, 0, 0, 1, 1, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0],
                    [1, 1, 1, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
                    [0, 1, 0, 0, 0, 1, 1, 0, 0, 1, 0, 0, 0, 0, 0, 0]]

            ];
 
 
 
 
           function getT() {
   
                tx = zm[rmInt(26)];
 
            } 
 
					//宽度和长度(方块所在的地方)
         function drawwall() {
   
                for (var i = 0; i < 12; i++) {
   
                    map[i][21] = 2;
                }
                for (var j = 0; j < 22; j++) {
   
                    map[11]

最低0.47元/天解锁文章

青猫锅锅

关注

8
点赞
踩
48

收藏

觉得还不错? 一键收藏
2
评论
使用HTML做一个小游戏（俄罗斯方块），这样的思路还不了解，那我就，就，就.....

使用HTML做一个小游戏（俄罗斯方块）前言考虑方块变化的形态的方式前言首先我们要知道俄罗斯方块大概有哪些方块块，看下图~~ (图中不包括变化形态的方块）然后再来考虑一般自己以前玩这个小游戏的时候，会出现什么的形状，最后开始写代码考虑方块变化的形态的方式先看下面这张图是我从一个前辈那里截下来的图看每一个方块块中都有一个方块是红色的，我们就以这个为中心例如：m(x,y)...
复制链接

扫一扫

专栏目录