js 俄罗斯方块源码，简单易懂
1、自己引入jquery
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
.box{
width: 400px;
height: 600px;
margin: 20px auto;
border: 5px solid yellowgreen;
}
.row{
height: 20px;
width: 100%;
}
.row div{
width: 18px;
height: 18px;
border: 1px solid transparent;
float: left;
} .row .active{
background: red;
border: 1px solid #ccc;
} .row .butte{
background: goldenrod;
border: 1px solid #FF0000;
} </style>
</head>
<body>
<div class="box"> </div>
</body>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
var $box = $(".box");
var $row = null;
var $dataArr = [];
var timer = null;
var gameRun = true;
var config = [
[
{x:0, y:4},
{x:1, y:4},
{x:0, y:5},
{x:1, y:5}
],
[
{x:0, y:3},
{x:0, y:4},
{x:0, y:5},
{x:0, y:6}
],
[
{x:0, y:5},
{x:1, y:4},
{x:1, y:5},
{x:2, y:4}
],
[
{x:0, y:4},
{x:1, y:4},
{x:1, y:5},
{x:2, y:5}
],
[
{x:0, y:4},
{x:1, y:4},
{x:1, y:5},
{x:1, y:6}
],
[
{x:0, y:4},
{x:1, y:4},
{x:2, y:4},
{x:2, y:5}
],
[
{x:0, y:5},
{x:1, y:4},
{x:1, y:5},
{x:1, y:6}
]
];
var $bullet = [
{x:0, y:3},
{x:0, y:4},
{x:0, y:5},
{x:0, y:6}
];
var $dowm = [
]; for(var i = 0 ; i < 30; i++){
$box.append("<div class='row'></div>");
var temp = [];
for(var j = 0; j < 20; j++){
$box.find(".row").last().append("<div></div>");
temp.push(0);
}
$dataArr.push(temp);
}
$row = $(".row"); dataTemp();
function dataTemp(){
for(var i = 0; i < 30; i++){
for(var j = 0; j < 20; j++){
if($dataArr[i][j] == 1){
$dataArr[i][j] = 0;
}
}
}
for(var i = 0; i < $bullet.length;i++){
$dataArr[$bullet[i].x][$bullet[i].y] = 1; //正在下落的dom
}
/*for(var i = 0;i< $dowm.length ;i++ ){
$dataArr[$dowm[i].x][$dowm[i].y] = 2; //已经下来的dom
}*/
layout();
}; function layout(){
for(var i = 0; i < 30; i++){
for(var j = 0; j < 20; j++){
if($dataArr[i][j] == 0){
$row.eq(i).find("div").eq(j)[0].className = "";
}else if($dataArr[i][j] == 1){
$row.eq(i).find("div").eq(j)[0].className = "active";
}else if($dataArr[i][j] == 2){
$row.eq(i).find("div").eq(j)[0].className = "butte";
}
}
}
}; $(window).on("keydown", function(event) {
if(gameRun){
switch(event.key) {
case "w":
rotate();
break;
case "s":
moveToDown();
break;
case "a":
leftRight(-1);
break;
case "d":
leftRight(1);
break;
default:
break;
}
} }); function rotate(){
var tmpBlock = new Array(4);
for(var i=0; i<4; i++){
tmpBlock[i] = {x:0, y:0};
}
//先算四个点的中心点，则这四个点围绕中心旋转90度。
var cx = Math.round(($bullet[0].x + $bullet[1].x + $bullet[2].x + $bullet[3].x)/4);
var cy = Math.round(($bullet[0].y + $bullet[1].y + $bullet[2].y + $bullet[3].y)/4);
//旋转的主要算法. 可以这样分解来理解。
//先假设围绕源点旋转。然后再加上中心点的坐标。
for(var i=0; i<4; i++){
tmpBlock[i].x = cx+cy-$bullet[i].y;
tmpBlock[i].y = cy-cx+$bullet[i].x;
} if(judegBorder(tmpBlock)){
for(var i=0; i<4; i++){
$bullet[i].x = tmpBlock[i].x;
$bullet[i].y = tmpBlock[i].y;
}
} dataTemp(); } function move(x){
for(var i = 0; i < $bullet.length; i++ ){
$bullet[i].x = $bullet[i].x + x;
}
if(! judegBorder($bullet)){
clearInterval(timer);
createSqure();
return;
}
dataTemp();
} //判断是否越界，越界了，则返回false
function judegBorder(obj){
var flag = true;
for(var i = 0; i < obj.length ; i++){ if(obj[i].x >= 30 || obj[i].x < 0 || obj[i].y >= 20 || obj[i].y < 0){
flag = false;
return false;
} if($dataArr[obj[i].x][obj[i].y] == 2){
flag = false;
return false;
}
}
return flag;
} timer=setInterval(function(){
move(1);
},1000); function createSqure(){ var obj = [];
//记录停下的
for(var i = 0; i < 4; i++){
obj.push({x:$bullet[i].x-1,y:$bullet[i].y});
$dataArr[$bullet[i].x-1][$bullet[i].y] = 2;
}
//消除可以消除的
trimp(obj);
layout();
var randNum =Math.floor(Math.random() * config.length);
//判断是否到顶,没有则添加
for(var i=0; i<4; i++){
if($dataArr[config[randNum][i].x][config[randNum][i].y] == 2){
gameRun = false;
alert("Game Over!");
return;
}
$bullet[i] = {x:config[randNum][i].x, y:config[randNum][i].y}; }
dataTemp();
timer=setInterval(function(){
move(1);
},500);
} function leftRight(num){
var tmpBlock = new Array(4);
for(var i=0; i<4; i++){
tmpBlock[i] = {x:$bullet[i].x, y:$bullet[i].y};
}
for(var i = 0; i < tmpBlock.length; i++ ){
tmpBlock[i].y = tmpBlock[i].y + num;
}
if(judegBorder(tmpBlock)){
for(var i = 0; i < tmpBlock.length; i++ ){
$bullet[i].y = tmpBlock[i].y;
}
}
dataTemp();
} function moveToDown(){
var tmpBlock = new Array(4);
for(var i=0; i<4; i++){
tmpBlock[i] = {x:$bullet[i].x, y:$bullet[i].y};
}
for(var i = 0; i < tmpBlock.length; i++ ){
tmpBlock[i].x = tmpBlock[i].x + 1;
}
if(judegBorder(tmpBlock)){
for(var i = 0; i < tmpBlock.length; i++ ){
$bullet[i].x = tmpBlock[i].x;
}
}
dataTemp();
} function trimp(obj){
for(var i = 0; i < obj.length;i++){
var flag = true; for(var j = 0; j < 20; j++){
if($dataArr[obj[i].x][j] != 2){
flag = false;
}
}
if(flag){
//需要消除
for(var j = 0; j < 20; j++){
$dataArr[obj[i].x][j] = 0;
}
//下面的被消除，往下掉
for(var x = obj[i].x ; x >= 0 ; x--){
for(var y = 0; y < 20;y++){
if($dataArr[x][y] == 2){
$dataArr[x][y] = 0;
$dataArr[x+1][y] = 2;
}
}
}
i--;
}
}
}
</script>
</html>
js 俄罗斯方块源码，简单易懂的更多相关文章
- JS StartMove源码-简单运动框架
这几天学习js运动应用课程时,开始接触一个小例子:“仿Flash的图片轮换播放器”,其中使用的StartMove简单运动框架我觉得挺好用的.这个源码也简单,理解其原理,自己敲即便也就熟悉了. 用的时候 ...
- 使用C#重写网上的60行 Javascript 俄罗斯方块源码 (带注释)
在很久很久以前,就已经看过 60行Js的俄罗斯方块源码.无奈当时能力不够看明白,当时觉得就是个神作. 现在总算有空再看了,顺便用c#实现一遍(超过60行),顺道熟悉下Js API. 网上其他博客也有分 ...
- unity3d俄罗斯方块源码教程+源码和程序下载
小时候,大家都应玩过或听说过<俄罗斯方块>,它是红白机,掌机等一些电子设备中最常见的一款游戏.而随着时代的发展,信息的进步,游戏画面从简单的黑白方块到彩色方块,游戏的玩法机制从最简单的消方 ...
- 从vue.js的源码分析，input和textarea上的v-model指令到底做了什么
v-model是 vue.js 中用于在表单表单元素上创建双向数据绑定,它的本质只是一个语法糖,在单向数据绑定的基础上,增加了监听用户输入事件并更新数据的功能:对,它本质上只是一个语法糖,但到底是一个 ...
- node-pre-gyp以及node-gyp的源码简单解析（以安装sqlite3为例）
title: node-pre-gyp以及node-gyp的源码简单解析(以安装sqlite3为例) date: 2020-11-27 tags: node native sqlite3 前言 简单来 ...
- FFmpeg的HEVC解码器源码简单分析：解析器（Parser）部分
===================================================== HEVC源码分析文章列表: [解码 -libavcodec HEVC 解码器] FFmpeg ...
- FFmpeg源码简单分析：libswscale的sws_scale()
===================================================== FFmpeg的库函数源码分析文章列表: [架构图] FFmpeg源码结构图 - 解码 FFm ...
- APIView源码简单分析图
APIView源码简单分析 !声明:下面这个dispatch分发方法不在是父类View里的dispatch了,APIView重新封装了这个dispatch.(整个核心就是initialize_requ ...
- [百度地图] 用于类似 DWZ UI 框架的 百度地图 功能封装类 [MultiZMap.js] 实例源码
MultiZMap 功能说明 MultiZMap.js 本类方法功能大多使用 prototype 原型 实现,它是 ZMap 的多加载版本,主要用于类似 DWZ 这个 多标签的 UI 的框架: 包含的 ...
随机推荐
- Esper学习之七：EPL语法（三）
1.Aggregation 和SQL一样,EPL也有Aggregation,即聚合函数.语法如下: aggregate_function([all|distinct] expression) aggr ...
- Esper学习之一：Esper介绍
CEP即Complex Event Process,中文意思就是“复杂事件处理”.听起来好像很复杂,实际上就是基于事件流进行数据处理,把要分析的数据抽象成事件,然后将数据发送到CEP引擎,引擎就会根据 ...
- 三、K3 WISE 开发插件《K3 WISE开发手册》
1.VB插件工程的命名.命名空间和生成的DLL命名要一致,否则导致注册不成功! 2.主控台的查询分析工具,添加sql直接报表,代码用到临时表,提示“在对应所需名称或序数的集合中未找到项目” 解决:在代 ...
- 【WEB前端开发最佳实践系列】高可读的HTML
一.HTML语义化 HTML5中增加了很多标签都是基于此类原则设计的(article nav header footer).页面标签语义化的优点是使得搜索引擎以及第三方抓包工具等更容易读懂页面 ...
- android开发-c++代码调用so库
Android项目的CMakeLists.txt代码如下,so文件放在项目的$Project/app/src/main/jniLibs/$arch下,$arch替换为arm64-v8a armv7a等 ...
- zabbix配置server，proxy，agent架构
author: headsen chen date:2018-10-30 19:49:50 环境: centos 6.8_x86_64 zabbix-server: 192.168.1.130 z ...
- 关于windows 7系统下开启休眠功能的方法
今天笔者新装了一个windows 7操作系统,装完后,点击开始按钮.鼠标放到关机处的左边扩展选项时,没有发现休眠选项. 于是开始上网查询解决方法,并将过程记录如下: 首先简单的介绍一下休眠功能:休眠( ...
- window server 2012 II8 假陌生 碰到的问题
1.我们网站是.net 3.5 开发的.还有一个32DLL 2.从windows server 2008 r2 iis 7 迁移过来碰到了3个问题,及解决办法 I. 在唯一密钥属性“fileExten ...
- 安装ubuntu16.04系统后没有无线网络选项的解决方法
ubuntu系统是自带有无线网络驱动的,因此最好的解决办法是安装是把联网更新选项勾选上,这样在安装是就能自动把无线网络驱动配置好 这是一个比较有效的解决没有无线网络驱动的方法,比后续按网络上的教程自己 ...
- 《机器学习实战》中的程序清单2-1 k近邻算法（kNN）classify0都做了什么
from numpy import * import operator import matplotlib import matplotlib.pyplot as plt from imp impor ...