java编写静态的俄罗斯方块
来源:互联网 发布:手机股票行情大盘软件 编辑:程序博客网 时间:2024/06/04 23:43
1.整体的结构图:
2.编写index.java的代码:
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>俄罗斯方块</title><link rel="stylesheet" href="css/style.css"></head><body><div class="game" id="game"></div><div class="next" id="next"></div><div class="info"><div>已用时:<span id="time">0</span>s</div><div>已得分:<span id="score">0</span>分</div></div><script src="js/script.js"></script></body></html>
3.编写style.css的代码:
.game {width: 200px;height: 400px;background-color: #F2FAFF;border-left: 1px solid blue;border-right: 1px solid blue;border-bottom: 1px solid blue;position: absolute;top: 10px;left: 10px;}.next {width: 80px;height: 80px;background-color: #F2FAFF;top: 10px;left: 250px;border: 1px solid blue;position: absolute;}.info {position: absolute;top: 100px;left: 250px;}.none, .current, .done {width: 20px;height: 20px;position: absolute;box-sizing: border-box;}.none {background-color: #F2FAFF;}.current {background-color: pink;border: 1px solid red;}.done {background-color: gray;border: 1px solid black;}
4.编写script.js的代码:
var nextData = [ [ 2, 2, 0, 0 ], [ 0, 2, 2, 0 ], [ 0, 0, 0, 0 ], [ 0, 0, 0, 0 ] ];var gameData = [ [ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 ],[ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 ], [ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 ],[ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 ], [ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 ],[ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 ], [ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 ],[ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 ], [ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 ],[ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 ], [ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 ],[ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 ], [ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 ],[ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 ], [ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 ],[ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 ], [ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 ],[ 0, 0, 2, 2, 0, 0, 0, 0, 0, 0 ], [ 0, 0, 2, 1, 1, 1, 0, 0, 0, 0 ],[ 0, 1, 1, 1, 1, 0, 0, 0, 0, 0 ] ];var nextDivs = [];var gameDivs = [];var initGame = function() {for (var i = 0; i < gameData.length; i++) {var gameDiv = [];for (var j = 0; j < gameData[0].length; j++) {var newNode = document.createElement('div');newNode.className = 'none';newNode.style.top = (i * 20) + 'px';newNode.style.left = (j * 20) + 'px';document.getElementById('game').appendChild(newNode);gameDiv.push(newNode);}gameDivs.push(gameDiv);}}var initNext = function() {for (var i = 0; i < nextData.length; i++) {var nextDiv = [];for (var j = 0; j < nextData[0].length; j++) {var newNode = document.createElement('div');newNode.className = 'none';newNode.style.top = (i * 20) + 'px';newNode.style.left = (j * 20) + 'px';document.getElementById('next').appendChild(newNode);nextDiv.push(newNode);}nextDivs.push(nextDiv);}}var refreshGame = function() {for (var i = 0; i < gameData.length; i++) {for (var j = 0; j < gameData[0].length; j++) {if (gameData[i][j] == 0) {gameDivs[i][j].className = 'none';} else if (gameData[i][j] == 1) {gameDivs[i][j].className = 'done';} else if (gameData[i][j] == 2) {gameDivs[i][j].className = 'current';}}}}var refreshNext = function() {for (var i = 0; i < nextData.length; i++) {for (var j = 0; j < nextData[0].length; j++) {if (nextData[i][j] == 0) {nextDivs[i][j].className = 'none';} else if (nextData[i][j] == 1) {nextDivs[i][j].className = 'done';} else if (nextData[i][j] == 2) {nextDivs[i][j].className = 'current';}}}}initGame();initNext();refreshGame();refreshNext();
5.运行结果如下所示:
阅读全文
0 0
- java编写静态的俄罗斯方块
- java编写俄罗斯方块
- JS编写的俄罗斯方块
- JS编写的俄罗斯方块
- C语言编写的俄罗斯方块
- C语言编写的俄罗斯方块
- java swing编写俄罗斯方块小游戏源代码下载
- JAVA写的俄罗斯方块
- Java版的俄罗斯方块
- 俄罗斯方块java的实现
- 简单的java俄罗斯方块
- 俺编写的俄罗斯方块比较简单
- javascript 60行编写的俄罗斯方块游戏
- javascript 60行编写的俄罗斯方块游戏
- VS2013环境下编写的俄罗斯方块源代码
- 【技术收藏】enpaodelvzi编写:一个Java写的俄罗斯方块源码 算法简单(300行) 注释详细
- 俄罗斯方块编写中~~~~~
- C语言编写俄罗斯方块
- MySql索引
- 如何在user版本下预置so库
- tensorflow入门9 模型部署2
- 李零:读《剑桥战争史》——没人把《孙子兵法》当回事
- HTTP2.0
- java编写静态的俄罗斯方块
- android帧动画实现方式
- java.lang.NoSuchFieldError: No field title of type
- jks bks 等的定义 如何将jks转化为bks的
- Innodb隔离级别的实现原理
- 友元函数和友元类
- vs2010 创建 translation file 方法
- gg
- 学习笔记 长的帅的人才能看