笔者刚学HTML5不久,这是笔者第一次用HTML5制作游戏,希望大家多多提点意见。
废话不多说,先来一张效果图:
笔者只做了游戏主体,至于那些得分啊,历史最高分之类的,都没有去实现。那些都是比较简单的内容,这里就不多说了。下面讲述的过程中,将主要是讲讲笔者本人制作过程中的一些思路。
首先,是页面部分,这部分也没啥好讲的,直接上代码:
值得注意的是,要为canvas设置一个id,方便js调用。接下来就是js部分了,这部分是本游戏的重点,首先,笔者声明了需要用到的一些变量和对象,如下:<!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>
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&#
HTML5——canvas制作游戏2048
最新推荐文章于 2023-02-09 11:53:26 发布
本文是作者初次尝试使用HTML5制作游戏2048的心得分享。文章详细介绍了游戏主体的实现过程,包括如何根据用户指令拆分和合并二维数组中的数字,以及如何判断和调整数组状态直至满足游戏规则。最后,作者提供了完整代码的下载链接,供读者参考学习。
摘要由CSDN通过智能技术生成