javascript俄罗斯方块小游戏

news/2024/10/21 5:41:05/

任务要求

用javascript实现一个经典的“俄罗斯方块小游戏”
要求:能计分,有不同关卡(速度不同),有高分榜,
chrome 30+以上浏览器能正常玩,主流android,iphone手机能玩

设计思路

  • 方块有如下几种基本形状,分别对应代码里的七个数组:

  • 方块变换方式采用将每个方块的四种变换结果均预先存在数组,
    例如:
    [[0,0,0,1,1,1,2,1], [1,0,1,1,1,2,0,2], [0,0,1,0,2,0,2,1], [0,0,1,0,0,1,0,2]];即对应上述 形状1 的四种变换。
  • 每次移动方块,改变的均是(x, y)的值,然后以(x, y)为基坐标,绘制每个方块内部的小方块。下图对应上述数组的第一种变换。

任务进度:

  • 用时约三天,前两天主要完成js部分,实现了基本游戏功能,移动端也做了简单的适配,接下来要就是添加css样式,以及一些页面动画。

(声明:方块变换方式有参考网上,但具体实现及全部代码均为自己所写,并没有UI designer,所以游戏界面如果不太美观的话,,,)

在线演示: http://husterxsp.sinaapp.com/tetris/

github:https://github.com/husterxsp/tetris


http://www.ppmy.cn/news/475457.html

相关文章

回归前端学习第23天-实现俄罗斯方块小游戏6(实现单机版2——键盘控制方块移动)

界面出现对应方块后,可自行控制其左右或快速下降的移动,上键可以实现方块形状的改变 调整代码结构实现键盘控制方块移动game.js中代码注意这里在SquareFactory中又写了个make函数,所以在game.js调用的时候,需要先new一个实例&…

回归前端学习第22天-实现俄罗斯方块小游戏5(实现单机版1——结合HTML、CSS、JS来搭建界面)

实现单机版俄罗斯方块小游戏&#xff0c;搭建页面 实现静态基础页面 实现静态基础页面 HTML&#xff1a; <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8" /><meta name"viewport" content"width…

十二、俄罗斯方块代码拆分

将主要代码进行拆分如下&#xff1a; bf_button.py 上一章中提到的不用图片自己制作的按钮控件 globals.py 一些全局变量 matrix.py 自己定义的矩阵类 controls.py 游戏界面上的一些控件元素 block_manage.py 各类方块的定义和游戏方块的管理 players.py 各类玩家的定义 single…

单机版火拼俄罗斯方块源程序

发表日期&#xff1a;2005年11月12日 已经有3587位读者读过此文 /*这是我在参考别人的的俄罗斯方块的基础上&#xff0c;写的一个单机版火拼俄罗斯方块源程序&#xff0c;*//*如果有须要下载可到www.jxnczyp.ys168.com中的个人小程序中下载己编译好的程序*//*如果想自己…

基于java的俄罗斯方块小游戏设计(含源文件)

欢迎添加微信互相交流学习哦&#xff01; 项目源码&#xff1a;https://gitee.com/oklongmm/biye 题 目 小游戏开发 摘 要 俄罗斯方块是我们最常见的游戏之一&#xff0c;该游戏出现过在掌上游戏机、家用游戏机、手机游戏和电脑游戏中&#xff0c;因此俄罗斯方…

Qt做的俄罗斯方块游戏

最近一直在用Qt折腾一个简单的俄罗斯方块游戏&#xff0c;期间断断续续经过将近一个月的折腾&#xff0c;终于完成啦&#xff0c;挂在这里&#xff0c;供大家评阅&#xff0c;第一次做游戏&#xff0c;肯定会有很多的不足之处&#xff0c;希望大家指正。 其实做这个游戏主要是…

回归前端学习第26天-实现俄罗斯方块小游戏9(实现单机版,一个计时带干扰的单机版俄罗斯方块小游戏完成)

最终完善单机版俄罗斯方块小游戏&#xff0c;增加干扰功能——每10秒增加一行 增加干扰功能game.js中加入addBotLine函数local.js中加入 增加干扰功能 game.js中加入addBotLine函数 // 底部增加行var addBotLine function (lines) {for (var i0; i<gameData.length - lin…

JSP版俄罗斯发方块+用户积分排行榜

一、游戏截图 二、查看所有成绩 三、技术原理&#xff1a; 学习过程是循序渐进的&#xff1a; 1.俄罗斯方块第1版&#xff1a;能移动&#xff0c;能接收按键&#xff0c;刷新画面。 https://blog.csdn.net/weixin_42644456/article/details/103080277 2.俄罗斯方块第2版&am…