数字华容道
纯前端HTML、CSS、JavaScript制作的小游戏,有兴趣的可以尝试一下,上下左右控制方块移动.
样式展示
难度切换
游戏展示
代码展示
页面布局--HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="css/new_file.css"/>
<script src="js/js.js"></script>
</head>
<body>
<div id="container">
<div id="head">
<button id="simple">简单</button>
<button id="middle">一般</button>
<button id="complex">复杂</button>
<button id="begin">开始游戏</button>
</div>
<div id="footer">
</div>
</div>
</body>
</html>
样式渲染--CSS
*{
margin: 0px;
padding: 0px;
}
#container{
position: relative;
border: 1px solid red;
margin: 0 auto;
text-align: center;
height: 800px;
width: 800px;
}
#head{
position: absolute;
top: 20px;
left: 330px;
}
#footer{
position: absolute;
top: 50px ;
}
逻辑实现层--JS
//初始化默认难度
var rows = 3;
//声明一个数组用来存放数字
var nums = new Array();
var winString = "";
window.onload = function(){
$("simple").onclick = function(){
rows = 3;
winString = ""
for(var i = 1;i<rows*rows-1;i++){
winString += i;
winString += "-";
}
winString += " ";
console.log("结束情况:"+winString)
clearLayout();
initLayout();
createRandomNum();;
}
$("middle").onclick = function(){
rows = 4;
winString = ""
for(var i = 1;i<rows*rows-1;i++){
winString += i;
winString += "-";
}
winString += " ";
console.log("结束情况:"+winString)
clearLayout();
initLayout();
createRandomNum();
}
$("complex").onclick = function(){
rows = 6;
winString = ""
for(var i = 1;i<rows*rows-1;i++){
winString += i;
winString += "-";
}
winString += " ";
console.log("结束情况:"+winString)
clearLayout();
initLayout();
createRandomNum();
}
$("begin").onclick = function(){
clearLayout();
initLayout();
createRandomNum();
UpdateView();
window.onkeydown = function(e){
e.preventDefault();
var keyCode = e.keyCode;
switch (keyCode){
case 37:
console.log("37");
moveLeft();
UpdateView();
gameWin();
break;
case 38:
console.log("38")
moveUp();
UpdateView();
gameWin();
break;
case 39:
console.log("39")
moveRight();
UpdateView();
gameWin();
break;
case 40:
console.log("40")
moveDown();
UpdateView();
gameWin();
break;
default:
break;
}
}
}
}
//初始化存放数字的卡片
function clearLayout(){
$("footer").innerHTML = "";
}
//生成存放数字的卡片,并设置样式
function initLayout(){
for(var i = 0;i<rows;i++){
nums[i] = new Array();
for(var j = 0;j<rows;j++){
nums[i][j] = i*rows + j + 1;
var div = document.createElement("div");
div.id = "cell-"+ i + "-" + j;
div.style.width = 100 +"px";
div.style.height = 100 + "px";
div.style.backgroundColor = "#D2B48C"
div.style.position = "absolute";
div.style.left = j*103 + "px";
div.style.top = i*103 +"px";
div.style.textAlign = "center";
div.style.lineHeight = 100 + "px";
if(nums[i][j] != rows*rows){
div.innerHTML = nums[i][j];
}else{
nums[i][j] = " "
div.innerHTML = nums[i][j];
}
div.style.fontSize = 50 + "px";
div.style.marginLeft = 5 + "px"
$("footer").style.height = 100*rows + "px";
$("footer").style.width = 100*rows + "px";
$("footer").style.left = (800 - 100*rows)/2 +"px";
$("footer").appendChild(div);
}
}
}
//更新布局,更新卡片上的数字
function UpdateView(){
for(var i = 0;i<rows;i++){
for(var j = 0;j<rows;j++){
$("cell-"+ i + "-" + j).innerHTML = nums[i][j];
}
}
}
//获取Id的一个功能函数
function $(id){
return document.getElementById(id);
}
//将初始化完成的卡片打乱,根据生成的随机数,让数字移动10000次,起到打乱的作用
function createRandomNum(){
for(var i = 0;i<10000;i++){
var random = Math.floor(Math.random()*4);
switch (random){
case 0:
moveLeft();
break;
case 1:
moveUp();
break;
case 2:
moveRight();
break;
case 3:
moveDown();
break;
default:
break;
}
}
}
//向左移动:如果当前卡片左边的卡片上的数字为零,则将此卡片左移----->>上下左右同理
function moveLeft(){
for(var i = 0;i<rows;i++){
for(var j = 1;j<rows;j++){
if(nums[i][j-1] == " "){
nums[i][j-1] = nums[i][j];
nums[i][j] = " ";
break;
}
}
}
}
function moveUp(){
var sign = 0;
for(var i = 1;i<rows;i++){
for(var j = 0;j<rows;j++){
if(nums[i-1][j] == " "){
nums[i-1][j] = nums[i][j];
nums[i][j] = " ";
sign = 1;
break;
}
}
if(sign == 1){
break;
}
}
}
function moveRight(){
for(var i = rows-1;i>=0;i--){
for(var j = rows-2;j>=0;j--){
if(nums[i][j+1] == " "){
nums[i][j+1] = nums[i][j];
nums[i][j] = " ";
break;
}
}
}
}
function moveDown(){
var sign = 0;
for(var i = rows-2;i>=0;i--){
for(var j = rows-1;j>=0;j--){
if(nums[i+1][j] == " "){
nums[i+1][j] = nums[i][j];
nums[i][j] = " ";
sign = 1;
break;
}
}
if(sign == 1){
break;
}
}
}
//判断游戏结束
/*
* 先声明一个数组,用来存放前rows*rows-1个数字,然后判断否是是按顺序展示
* 是,游戏结束
* 否,继续移动
*/
function gameWin(){
var arr = [];
for(var i = 0;i<rows;i++){
for(var j = 0;j<rows;j++){
arr[i*rows+j] = nums[i][j];
}
}
console.log(arr);
var sign = true;
for(var i= 0;i<arr.length-1;i++ ){
if(arr[i] != (i+1)){
sign = false;
break;
}
}
if(sign){
setTimeout('alert("游戏Win!")',100);
}
}
