Html5原创俄罗斯方块(基于原创俄罗斯方块(基于canvas))
主要介绍了Html5原创俄罗斯方块(基于canvas)的相关资料,小编觉得挺不错的,现在分享给大家,也给大家
做个参考。一起跟随小编过来看看吧
第一次写俄罗斯方块的时候已经是1年多前了,也是我刚刚学js不久。
为了加强对js的理解又加上对游戏的爱好,于是在没有参考他人的思路和代码下,自己用最基本的js代码写出了基于canvas的
俄罗斯方块。
在大三的暑假,我又用了es6的语法进行了改进,包含了class的语法糖、箭头函数等,进一步增加自己对es6的理解,代码有
400+行
想要做这个小游戏,必须先熟悉H5的canvas,js对数组的处理,键盘事件监听和处理,定时器的使用等,其他的就是基本的
逻辑处理了。
游戏的规则就是核心,也是我们代码的重中之重
这里的逻辑核心是需要判断方块是否碰撞(当前运动的方块和已经定位好的方块有碰撞以致于当前的运动的方块不能在向下
走,因为我们的方块默认是向下走的,如果不能向下走,是视为已经定位好的方块,然后在生成一个新的方块从初始位置继续
往下走)。
而且这个碰撞还需要应用在方块变形的时候,同样地,如果方块在变形的过程中和其他定位好的方块进行碰撞,则我们应该阻
止这个方块进行变形成功,
附上代码,欢迎讨论和指正
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>es6-重构俄罗斯方块(基于canvas)</title>
<style type="text/css">
#tetris{ margin: 10px 250px;}
</style>
</head>
<body>
<canvas width="700" height="525" id="tetris"></canvas>
<div id="text" style='color: red;font-size: 30px;'>当前分数:0</div>
<script type="text/javascript">
/**
* [一个完整的俄罗斯方块类 design by magic_xiang]
* @param {number} side [每个方块边长(px),默认35]
* @param {number} width [一行包含的方块数(个),默认20]
* @param {number} height [一列包含的方块数(个),默认15]