前端学习（1678）：前端系列实战课程之声明和创建游戏地图
生活随笔
收集整理的這篇文章主要介紹了
前端学习（1678）：前端系列实战课程之声明和创建游戏地图
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>游戲初始化界面</title><style>body {margin: 0;padding: 0;}#main {margin: 100px;}.btn {width: 100px;height: 40px;}</style>
</head><body><div id="main"><!-- 按鈕 --><input class="btn" type="button" value="開始游戲" id="begin"><input class="btn" type="button" value="暫停游戲" id="pause"></div><!-- 貪吃蛇游戲設計 --><script>var main = document.getElementById('main');/* 畫布格子是否開啟 */var showcanvas = true;/* atom 原子大小 xnum橫向原子數量 ynum縱向原子數量 */function Map(atom, xnum, ynum) {this.atom = atom;this.xnum = xnum;this.ynum = ynum;//聲明畫布this.canvas = null;//創建畫布方法this.create = function() {this.canvas = document.createElement('div');this.canvas.style.cssText = 'position:relative;top:40px;border:1px solid red;background:#FAFAFA';this.canvas.style.width = this.atom * this.xnum + 'px'; //畫布的寬this.canvas.style.height = this.atom * this.ynum + 'px'; //畫布的寬main.appendChild(this.canvas);if (showcanvas) {for (var x = 0; x < xnum; x++) {for (var y = 0; y < ynum; y++) {var a = document.createElement('div');a.style.cssText = "border:1px solid yellow";a.style.width = this.atom + 'px';a.style.height = this.atom + 'px';a.style.backgroundColor = 'green';this.canvas.appendChild(a);a.style.position = 'absolute';a.style.left = x * this.atom + 'px';a.style.top = y * this.atom + 'px';}}}}}var map = new Map(20, 40, 20);map.create();var timer; //變量可以提升/* 第一部分 *//* 第一部分開始 */document.getElementById('begin').onclick = function() {clearInterval(timer);timer = setInterval(function() {}, 300)}/*第一部分 暫停 */document.getElementById('begin').onclick = function() {clearInterval(timer);timer = setInterval(function() {}, 300)}</script>
</body></html>
運行結果
總結
以上是生活随笔為你收集整理的前端学习（1678）：前端系列实战课程之声明和创建游戏地图的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 移动通信发展史及原理学习
- 下一篇： 2017年html5行业报告,云适配发布