当前位置:
首页 > temp > JavaScript教程 >
-
2048小游戏(JavaScript版) (3) 初始化棋盘格
作者:@小灰灰
本文为作者原创,转载请注明出处:https://www.cnblogs.com/liuhui0308/p/14422943.html
回到顶部(go to top)
1. 初始化棋盘格
我们在index.html文件中,做了一个重新开始按钮,调用了一个newgame()方法用来开始新游戏,但是我们没有编写这个方法,目前点击按钮控制台会报错。
而开始新游戏需要完成两件事情,一是初始化棋盘格,二是在随机的两个格子生成2或4两个数字。
初始化棋盘的代码我们就放在main.js这个游戏主逻辑文件当中。
首先是当页面加载完成后应该调用newgame()方法:
- window.onload = function(){
- newgame();
- }
- function newgame() {
- }
每次newgame(),我们都要初始化一遍棋盘格,来确保界面不会出现任何残留数据。
通过编写init()方法来完成棋盘格的初始化工作,棋盘格是一个4×4的16块的方格,所以我们需要插件一个二维数组来表示。
在最上面定义一个空数组:
- //定义一个JavaScript数组
- var board = new Array();
然后我们在init()中,利用嵌套for循环的方式实现每个格子的设置。
- function newgame() {
- //初始化棋盘格
- init();
- }
- function init() {
- //i表示4乘以4的格子的行
- for(var i=0;i<4;i++){//初始化格子数组
- //定义了一个二维数组
- board[i] = new Array();
- //i表示4乘以4的格子的列
- for(var j=0;j<4;j++){
- //初始化小格子的值为0
- board[i][j] = 0;
- //通过双重遍历获取每个格子元素
- var gridCell= document.getElementById("grid-cell-" + i + "-" + j)
- console.log(gridCell)
- }
- }
- }
保存刷新页面,F12打开控制台:
我们获取到了每个格子元素。
之后我们就要设置每个格子距离顶端和左端距离了,这里也是大佬给我设计好的,所以大家抄就完事了,程序员的事,能叫抄吗,这叫copy!
在init()里面添加:
- function init() {
- //i表示4乘以4的格子的行
- for(var i=0;i<4;i++){//初始化格子数组
- //定义了一个二维数组
- board[i] = new Array();
- //i表示4乘以4的格子的列
- for(var j=0;j<4;j++){
- //初始化小格子的值为0
- board[i][j] = 0;
- //通过双重遍历获取每个格子元素
- var gridCell= document.getElementById("grid-cell-" + i + "-" + j)
- // console.log(gridCell)
- //通过getPosTop()方法设置每个格子距离顶端的距离
- gridCell.style.top = getPosTop(i, j);
- //通过getPosLeft()方法设置每个格子距离左端的距离
- gridCell.style.left = getPosLeft(i, j);
- }
- }
- }
然后我们来定义getPosTop()和getPosLeft()。
这两个方法是属于游戏的基本逻辑了,所以我们把这两个方法写在support.js里面。
support.js:
- function getPosTop(i, j) {
- return (20 + i * 120) / 25 + 'rem';
- }
- function getPosLeft(i, j) {
- return (20 + j * 120) / 25 + 'rem';
- }
此时保存再刷新页面,格子的初始化就完成了。
但是我们的初始化还缺了随机位置的2或4两个数字,下一章我们就来实现这个功能吧。
出处:https://www.cnblogs.com/liuhui0308/p/14422943.html
栏目列表
最新更新
nodejs爬虫
Python正则表达式完全指南
爬取豆瓣Top250图书数据
shp 地图文件批量添加字段
爬虫小试牛刀(爬取学校通知公告)
【python基础】函数-初识函数
【python基础】函数-返回值
HTTP请求:requests模块基础使用必知必会
Python初学者友好丨详解参数传递类型
如何有效管理爬虫流量?
2个场景实例讲解GaussDB(DWS)基表统计信息估
常用的 SQL Server 关键字及其含义
动手分析SQL Server中的事务中使用的锁
openGauss内核分析:SQL by pass & 经典执行
一招教你如何高效批量导入与更新数据
天天写SQL,这些神奇的特性你知道吗?
openGauss内核分析:执行计划生成
[IM002]Navicat ODBC驱动器管理器 未发现数据
初入Sql Server 之 存储过程的简单使用
SQL Server -- 解决存储过程传入参数作为s
关于JS定时器的整理
JS中使用Promise.all控制所有的异步请求都完
js中字符串的方法
import-local执行流程与node模块路径解析流程
检测数据类型的四种方法
js中数组的方法,32种方法
前端操作方法
数据类型
window.localStorage.setItem 和 localStorage.setIte
如何完美解决前端数字计算精度丢失与数