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 的框架: 包含的 ...
随机推荐
- 一.jquery.datatables.js表格显示
2014年8月10日星期日 使用jquery.datatables.js取后台数据. 1.html代码 <table class="dataTables-example"&g ...
- js 判断数组重复元素以及重复的个数
知识点: .sort()方法用于对数组元素排序,并返回数组. var _arr = ['旅行箱', '旅行箱', '小米', '大米']; var _res = []; // _arr.sort(); ...
- remote: fatal: could not read Username for 'http://spapa.wicp.net:3000': No such device ors
解决办法: git remote add origin https://{username}:{password}@github.com/{username}/project.git in my ca ...
- TypeScript中处理大数字（会丢失后面部分数字）
为啥要弄这玩意? 最近做数值游戏,需要用到很大的数字,在前端大数字会自动变成e的科学计数法. 有啥问题? 问题: 1. 在传递给服务端时,服务端因为不能处理大数字(怎么就处理不了?!),就想要我传字符 ...
- 【CF860E】Arkady and a Nobody-men 长链剖分
[CF860E]Arkady and a Nobody-men 题意:给你一棵n个点的有根树.如果b是a的祖先,定义$r(a,b)$为b的子树中深度小于等于a的深度的点的个数(包括a).定义$z(a) ...
- github基本用法
本人github账号:https://github.com/pingfanren,喜欢的朋友可以给我点星. Git是目前最先进的分布式版本控制系统,作为一个程序员,我们需要掌握其用法. 一:下载G ...
- dubbo入门之helloWorld
dubbo官方文档:http://dubbo.apache.org/zh-cn/docs/user/quick-start.html 基于spring coloud的demo:http://start ...
- iOS8新特性(1)——UIAlertController
一.iOS8介绍 iOS8 新特性,主要是UI上进行了统一 1.UIAlertController 2.UIPresentaionController:管理所有通过modal出来的控制器(看笔记) 3 ...
- MUI---上传头像功能实现
这里使用MUI上传头像的功能是结合VUE来做的,所以: changeFace:function(){ var IMAGE_UNSPECIFIED = "image/*"; //相册 ...
- js原型浅谈理解
之前在学习原型(prototype)的时候,一直对原型的理解不是很清晰,只是知道每个对象都有一个原型,然后在js中万物又皆对象.在这里谈一下自己对于js原型的简单理解吧. 原型可以实现属性和方法的共享 ...