HTML5——canvas制作游戏2048

最新推荐文章于 2024-05-16 02:28:14 发布

孟德三笑

最新推荐文章于 2024-05-16 02:28:14 发布

阅读量8.4k

点赞数 4

分类专栏： HTML5 javascript 游戏文章标签： html5 canvas javascript 游戏 2048

本文链接：https://blog.csdn.net/qq_25186987/article/details/53070648

版权

         笔者刚学HTML5不久，这是笔者第一次用HTML5制作游戏，希望大家多多提点意见。

        废话不多说，先来一张效果图：

        笔者只做了游戏主体，至于那些得分啊，历史最高分之类的，都没有去实现。那些都是比较简单的内容，这里就不多说了。下面讲述的过程中，将主要是讲讲笔者本人制作过程中的一些思路。

        首先，是页面部分，这部分也没啥好讲的，直接上代码：
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>2048</title>
<style type="text/css">
     div{
         text-align:center;
         margin-top:150px;
     }
     #view{
         border:1px solid #ccc;
     }
</style>
</head>
<body>
<div>
     <canvas id="view" height="500px" width="500px"></canvas>
     <script type="text/javascript" src="Test_2048.js"></script>
</div>
</body>
</html>
值得注意的是，要为canvas设置一个id，方便js调用。接下来就是js部分了，这部分是本游戏的重点，首先，笔者声明了需要用到的一些变量和对象，如下：
var dom=document.getElementById("view");
var ctx=dom.getContext("2d");

var width=ctx.canvas.width;
var height=ctx.canvas.height;

var box_width=width*0.8*0.25;
var margin_width=width*0.2*0.20;

var digital=new Array();
for ( var i = 0; i < 4; i&#

最低0.47元/天解锁文章

孟德三笑

关注

4
点赞
踩
23

收藏

觉得还不错? 一键收藏
打赏
1
评论
HTML5——canvas制作游戏2048

笔者刚学HTML5不久，这是笔者第一次用HTML5制作游戏，希望大家多多提点意见。废话不多说，先来一张效果图：笔者只做了游戏主体，至于那些得分啊，历史最高分之类的，都没有去实现。那些都是比较简单的内容，这里就不多说了。下面讲述的过程中，将主要是讲讲笔者本人制作过程中的一些思路。首先，是页面部分，这部分也没啥好讲的，直接上代码：
复制链接

扫一扫