前端小游戏自娱--黑白配
来源:互联网 发布:南华大学怎么样知乎 编辑:程序博客网 时间:2024/05/12 22:04
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<center>
<h1>翻斗棋</h1><br />关卡选择:
<select id="gameLevel">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
</select>
<hr />
<input type="button" onclick="initGame()" value="开始游戏"/>
<div id="gameDiv"></div>
<br /><hr />
<h2>游戏规则说明</h2>
<ol>
<li>1.任意点击一个地方,则自身和其相邻的格子颜色会发生变化</li>
<li>2.xxxxxxxxxxxxxxxxxxxxxxxxxxx</li>
<li>3.xxxxxxxxxxxxxxxxxxxxxxxxxxx</li>
</ol>
</center>
</body>
<script>
//初始化游戏界面
function initGame(){
var list=parseInt(document.getElementById("gameLevel").value);
/*
* 创建新的游戏界面之前对之前的游戏界面进行判断,
* 一种是根据表格id判断是否存在
* 另一种是根据gameDiv子元素是否存在判断
*/
if(document.getElementById("tableId")!=null){
document.getElementById("gameDiv").removeChild(document.getElementById("tableId"));
}
//创建表格
var table=document.createElement("table");
table.border="1px";
table.id="tableId";
for (var i = 0; i < list; i++) {
var rows=table.insertRow();
for (var j = 0; j < list; j++) {
var cell=rows.insertCell();
cell.style.width="50px";
cell.style.height="50px";
cell.style.backgroundColor="black";
//获取每个格子的坐标位置
cell.id=i+","+j;
cell.innerText=i+","+j;
//设置点击表格变黑白的点击事件
cell.onclick=click;
}
}
document.getElementById("gameDiv").appendChild(table);
}
function click(){
//获取事件源对象,这个事件源就是单元格
var cell=event.srcElement;
//取得单元格id
var cellId=cell.id;
//得到横轴和纵轴
var x=parseInt(cellId.split(",")[0]);
var y=parseInt(cellId.split(",")[1]);
//改变当前单元格的颜色
changeColor(cellId);
var up=(x-1)+","+y;
var down=(x+1)+","+y;
var left=x+","+(y-1);
var right=x+","+(y+1);
changeColor(up);
changeColor(down);
changeColor(left);
changeColor(right);
if(validatePass()==true){
var choice=confirm("恭喜通过,是否进入下一关");
if(choice){
var gameLevel=document.getElementById("gameLevel");
gameLevel.selectedIndex++;//下拉列表框selectedIndex的属性++表示选择的项目下移
initGame();
}
}
}
function changeColor(cellId) {
try{
if(document.getElementById(cellId).style.backgroundColor=="white"){
document.getElementById(cellId).style.backgroundColor="black";
}else{
document.getElementById(cellId).style.backgroundColor="white";
}
}catch(e){
//TODO handle the exception
}
}
//检查是否通关
function validatePass () {
var result=true;
var table=document.getElementById("tableId");
var length=table.rows.length;
for (var i = 0; i < length; i++) {
var row=table.rows[i];
for (var j = 0; j < length; j++) {
var cell=row.cells[j].id;
if(row.cells[j].style.backgroundColor=="black"){
result=false;
break;
}
}
}
return result;
}
</script>
</html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<center>
<h1>翻斗棋</h1><br />关卡选择:
<select id="gameLevel">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
</select>
<hr />
<input type="button" onclick="initGame()" value="开始游戏"/>
<div id="gameDiv"></div>
<br /><hr />
<h2>游戏规则说明</h2>
<ol>
<li>1.任意点击一个地方,则自身和其相邻的格子颜色会发生变化</li>
<li>2.xxxxxxxxxxxxxxxxxxxxxxxxxxx</li>
<li>3.xxxxxxxxxxxxxxxxxxxxxxxxxxx</li>
</ol>
</center>
</body>
<script>
//初始化游戏界面
function initGame(){
var list=parseInt(document.getElementById("gameLevel").value);
/*
* 创建新的游戏界面之前对之前的游戏界面进行判断,
* 一种是根据表格id判断是否存在
* 另一种是根据gameDiv子元素是否存在判断
*/
if(document.getElementById("tableId")!=null){
document.getElementById("gameDiv").removeChild(document.getElementById("tableId"));
}
//创建表格
var table=document.createElement("table");
table.border="1px";
table.id="tableId";
for (var i = 0; i < list; i++) {
var rows=table.insertRow();
for (var j = 0; j < list; j++) {
var cell=rows.insertCell();
cell.style.width="50px";
cell.style.height="50px";
cell.style.backgroundColor="black";
//获取每个格子的坐标位置
cell.id=i+","+j;
cell.innerText=i+","+j;
//设置点击表格变黑白的点击事件
cell.onclick=click;
}
}
document.getElementById("gameDiv").appendChild(table);
}
function click(){
//获取事件源对象,这个事件源就是单元格
var cell=event.srcElement;
//取得单元格id
var cellId=cell.id;
//得到横轴和纵轴
var x=parseInt(cellId.split(",")[0]);
var y=parseInt(cellId.split(",")[1]);
//改变当前单元格的颜色
changeColor(cellId);
var up=(x-1)+","+y;
var down=(x+1)+","+y;
var left=x+","+(y-1);
var right=x+","+(y+1);
changeColor(up);
changeColor(down);
changeColor(left);
changeColor(right);
if(validatePass()==true){
var choice=confirm("恭喜通过,是否进入下一关");
if(choice){
var gameLevel=document.getElementById("gameLevel");
gameLevel.selectedIndex++;//下拉列表框selectedIndex的属性++表示选择的项目下移
initGame();
}
}
}
function changeColor(cellId) {
try{
if(document.getElementById(cellId).style.backgroundColor=="white"){
document.getElementById(cellId).style.backgroundColor="black";
}else{
document.getElementById(cellId).style.backgroundColor="white";
}
}catch(e){
//TODO handle the exception
}
}
//检查是否通关
function validatePass () {
var result=true;
var table=document.getElementById("tableId");
var length=table.rows.length;
for (var i = 0; i < length; i++) {
var row=table.rows[i];
for (var j = 0; j < length; j++) {
var cell=row.cells[j].id;
if(row.cells[j].style.backgroundColor=="black"){
result=false;
break;
}
}
}
return result;
}
</script>
</html>
0 0
- 前端小游戏自娱--黑白配
- 自娱
- 黑白界面下去的小游戏
- 黑白配
- 【Web前端】HTML5 Canvas小游戏
- 自娱娱人
- web前端案例:贪吃蛇小游戏
- 用java做的一个小游戏—黑白反斗棋(适合菜鸟)
- IOS学习之道:使用UIButton纯手工打造的黑白快小游戏.
- CSDN排名8888,自娱一下
- 连动菜单---【菜鸟自娱】
- 移动前端系列——websocket实时互动小游戏
- 前端案例-原生javascript开发打气球小游戏
- 小游戏
- 小游戏
- 小游戏
- 小游戏
- 小游戏
- CGBitmapContextCreate参数详解
- css sprite
- C#变量和注释
- Python命令行清屏的简单办法
- 记一次木马查杀
- 前端小游戏自娱--黑白配
- java实现简单二叉树中序遍历
- 使用BigDecimal进行精确运算
- 383. Ransom Note【E】
- R语言中的expand.grid()命令
- Struts的Map
- android 使用Ntrip协议,socket连接获取接入点,登录模式
- HDU 1811 Rank of Tetris
- QEMU KVM libvirt手册(4) – images