华容道小游戏

最新推荐文章于 2023-01-11 15:31:00 发布
最新推荐文章于 2023-01-11 15:31:00 发布
阅读量1.1k 收藏 15
点赞数 4
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/aCc1DeNt/article/details/91884470
版权 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
            text-decoration: none;
        }

        h1 {
            text-align: center;
        }

        h2 {
            text-align: center;
            position: absolute;
            left: 70px;
            top: 100px;
            cursor: pointer;
        }

        .container {
            width: 300px;
            height: 320px;
            border: 2px solid gold;
            margin: 10px auto;
            background-color: cadetblue;
        }

        .time {
            margin: 5px 100px;
        }

        .img {
            background-image: url(img/1.jpg);
            width: 240px;
            height: 240px;
        }

        .suc {
            background-image: url(img/2.jpg);
            width: 240px;
            height: 240px;
        }

        .box {
            position: relative;
            width: 240px;
            height: 240px;
            margin: 5px auto;
        }


        .box ul.disappear {
            display: none;
        }

        .box li {
            float: left;
            width: 60px;
            height: 60px;
            border: 1px solid silver;
            box-sizing: border-box;
            font-size: 35px;
            text-align: center;
            cursor: pointer;
            color: #fff;
        }

        .button {
            margin: 15px 90px;
        }

        .button input {
            background-color: burlywood;
            color: #3c3c3c;
            width: 35px;
            height: 25px;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <h1>数字华容道</h1>
    <div class="container">
        <div class="time">
            时间：<span>00:00</span>
        </div>
        <div class="content">
            <div class="box img">
                <ul class="disappear">
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
            </div>
        </div>
        <div class="button">
            <input type="button" value="开始">
            <input type="button" value="重置">
            <input type="button" value="退出">
        </div>
    </div>
    <script>
        var div = document.getElementsByClassName('box')[0];
        var time = document.getElementsByTagName('span')[0];
        var start = document.getElementsByTagName('input')[0];
        var init = document.getElementsByTagName('input')[1];
        var over = document.getElementsByTagName('input')[2];
        var ul = document.getElementsByTagName('ul')[0];
        var li = document.getElementsByTagName('li');
        var h = document.getElementsByTagName('h2');
        var timer;
        var minute = 0;
        var second = 0;
        var startZt = true;
        var initZt = true;
        var space = 0;
        //格式化时间
        function fromat(v) {
            return v < 10 ? '0' + v : v;
        }
        //计时函数
        function getTime() {
            timer = setInterval(function () {
                second++;
                if (second == 60) {
                    minute++;
                    second = 0;
                }
                time.innerHTML = fromat(minute) + ":" + fromat(second);
            }, 1000)
        }
        //点击开始按钮，开始计时，并调用centent方法产生数字
        start.onclick = function () {
            if (startZt !== true) {
                return;
            }
            getTime();
            startZt = false;
            ul.classList.remove('disappear');
            main();
            initZt = true;
            div.classList.remove('img');
            div.classList.remove('suc');
        }
        //判断能否点击
        function pd(i, space) {
            if (i != space) {
                if (i <= 3) {
                    if (i % 4 == 0) {
                        if (space == (i + 1) || space == (i + 4)) {
                            return true;
                        }
                    }
                    if (i % 4 == 1 || i % 4 == 2) {
                        if (space == (i - 1) || space == (i + 1) || space == (i + 4)) {
                            return true;
                        }
                    }
                    if (i % 4 == 3) {
                        if (space == (i - 1) || space == (i + 4)) {
                            return true;
                        }
                    }
                }
                if (i >= 4 && i <= 11) {
                    if (i % 4 == 0) {
                        if (space == (i - 4) || space == (i + 4) || space == (i + 1)) {
                            return true;
                        }
                    }
                    if (i % 4 == 1 || i % 4 == 2) {
                        if (space == (i - 1) || space == (i + 1) || space == (i - 4) || space == (i + 4)) {
                            return true;
                        }
                    }
                    if (i % 4 == 3) {
                        if (space == (i - 1) || space == (i - 4) || space == (i + 4)) {
                            return true;
                        }
                    }
                }
                if (i >= 12) {
                    if (i % 4 == 0) {
                        if (space == (i - 4) || space == (i + 1)) {
                            return true;
                        }
                    }
                    if (i % 4 == 1 || i % 4 == 2) {
                        if (space == (i - 1) || space == (i + 1) || space == (i - 4)) {
                            return true;
                        }
                    }
                    if (i % 4 == 3) {
                        if (space == (i - 1) || space == (i - 4)) {
                            return true;
                        }
                    }
                }
            }

        }
        //点击重置按钮，数字重置，时间重置
        init.onclick = function () {
            if (initZt == false) {
                return;
            }
            main();
            second = 0;
            minute = 0;
            time.innerHTML = "00:00";
            clearInterval(timer);
            getTime();
            startZt = false;
        }
        //点击退出按钮，回到主页面
        over.onclick = function () {
            for (var i = 0; i < li.length; i++) {
                li[i].innerHTML = "";
            }
            second = 0;
            minute = 0;
            time.innerHTML = "00:00";
            clearInterval(timer);
            ul.classList.add('disappear');
            startZt = true;
            initZt = false;
            div.classList.add('img');
            div.classList.remove('suc');
        }
        //判断游戏是否胜利
        function gameOver() {
            var total = 0;
            for (var i = 0; i < li.length - 1; i++) {
                if (li[i].value == (li[i].innerHTML - 1)) {
                    total++;
                }
            }
            if (total == 15) {
                ul.classList.add('disappear');
                div.classList.add('suc');
                time.innerHTML = "00:00";
                clearInterval(timer);
                startZt = true;
                initZt = false;
            }
        }
        function main() {
            //随机产生1-8的数字
            var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15];
            arr.sort(function () {
                return Math.random() - 0.5;
            })
            for (var i = 0; i < li.length; i++) {
                li[i].innerHTML = arr[i];
                li[i].value = i;
            }
            space = 15;
            li[15].innerHTML = "";
            li[15].value = 15;
            //绑定事件 进行数字的移动
            ul.onclick = function (e) {
                var target = e.target;
                var i = target.value;
                if (pd(i, space)) {
                    var a = li[i].innerHTML;
                    li[space].innerHTML = a;
                    li[i].innerHTML = "";
                    space = i;
                }
                gameOver();
            }
        }
    </script>
</body>

</html>
aCc1DeNt
关注
  • 4
    点赞
  • 踩
  • 15
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
华容道游戏源代码
JPC27的博客
05-04 604
完全原创的华容道游戏源代码java,具有较丰富的界面及走法演示，计步计时等功能。
java课设华容道小游戏
07-01
针对以上要求，开发一个小型的华容道小游戏，满足如下功能要求：1、设计一个华容道游戏界面；2、创建对象，代表华容道中的人物；3、通过鼠标来控制人物的移动；4、增加多个游戏难度。用户可以通过鼠标来控制人物的...
网页版数字华容道，非常简单
11-28
网页版数字华容道，非常简单
一个非常简单的华容道小游戏源码
04-22
这是我顺着网上一个前辈的思路自己做的第一个成功的小游戏，水品很菜，所以写的代码很简单，有兴趣的可以下来看看给点意见哈
用C++实现的华容道游戏
08-01
用C++实现的华容道游戏，直接编译直接运行，如果有bug请及时跟我说明哦！谢谢啦 (^_^)
华容道
qq_37140747的博客
06-20 346
import java.awt.Color;import java.awt.Component;import java.awt.event.FocusEvent;import java.awt.event.FocusListener;import java.awt.event.KeyEvent;import java.awt.event.KeyListener;import javax.swing...
华容道游戏java实现
11-30
华容道游戏，java课程学完之后设计的，有需自取。。。
c语言华容道小游戏完整源码
09-21
c语言华容道小游戏完整源码 华容道游戏说明： 编译环境：Visual C++ 6.0，EasyX 2014冬至版 最后修改：2015-3-14 操作方式：操作方式：鼠标单击要移动的棋子后再点击棋子即可移动，将曹操移动到出口处，过关。 ...
Java华容道小游戏
01-12
Java华容道小游戏是一款基于Java编程语言开发的简单游戏，主要体现了Java的图形用户界面（GUI）设计和事件处理能力。在本项目中，开发者利用Java的Swing库或者JavaFX库创建了游戏界面，让玩家能够通过鼠标操作进行...
java 华容道小游戏设计
12-02
【标题】"Java 华容道小游戏设计"揭示了这个项目是使用Java编程语言实现的一款基于华容道的传统益智游戏。华容道游戏源于中国，玩家需要通过移动棋盘上的棋子，帮助曹操从起点移动到终点，过程中不能违反棋子移动...
华容道 小游戏 源代码
01-02
package 华容道; import java.awt.*; import java.awt.event.*; //主函数 public class Main { public static void main(String[] args) { new Hua_Rong_Road(); } } //人物按钮颜色 class Person extends Button implements FocusListener{ int number; Color c=new Color(255,245,170); Person(int number,String s) { super(s); setBackground(c);//人物的颜色背景是黄色 this.number=number; c=getBackground(); addFocusListener(this);//好像是焦点监听器 } public void focusGained(FocusEvent e) { setBackground(Color.red);//只要单击该按钮则按钮变颜色 } public void focusLost(FocusEvent e) { setBackground(c);//上一个按钮回复原先的颜色 } } //华容道总类 class Hua_Rong_Road extends Frame implements MouseListener,KeyListener,ActionListener{ Person person[] = new Person[10]; Button left,right,above,below; Button restart = new Button("Start");//重新开始按钮 public Hua_Rong_Road() { init(); setBounds(100,100,320,360); setVisible(true);//设置Frame为可见，默认为不可见 validate(); addWindowListener( new WindowAdapter() { public void windowClosing(WindowEvent e) { System.exit(0); } } ); } public void init() { setLayout(null); add(restart); restart.setBounds(100, 320, 120, 25); restart.addActionListener(this); String name[]={"我","陆逊","姜维","陈宫","许攸","邓艾","周瑜","庞统","诸葛亮","贾诩"}; for(int k=0;k<name.length;k++) { person[k]=new Person(k,name[k]); person[k].addMouseListener(this); person[k].addKeyListener(this); add(person[k]); }//为所有的按钮注册所需的东西 person[0].setBounds(104, 54, 100, 100); person[1].setBounds(104,154, 100, 50); person[2].setBounds(54, 154, 50, 100); person[3].setBounds(204, 154, 50, 100);
游戏 华容道 源代码
11-18
用c++实现的华容道的源代码，为一个工程文件，可在VS上运行
简单入门小游戏华容道横刀立马
12-21
delphi 小游戏 简单 华容道 横刀立马 代码不多，适合初学着学习。
华容道游戏源码 1.0.zip
05-27
本源码是一个采用winform进行开发的华容道游戏源码，华容道游戏作为一个经典游戏，各部分设计都恰到好处，非常巧妙，因此成为世界游戏界的三大不可思议。华容道游戏源于三国时期著名的历史故事。东汉末年，曹操、孙权以及刘备在赤壁交战，结果曹操大败，带领残兵败将逃至华容道，遇到在此等候的关羽，关羽为报当年曹操的知遇之恩，放其离开华容道。菜单功能:1、点击运行后用鼠标拖动人物头像进行游戏2、点击重置从新开始游戏注意事项:1、开发环境为Visual Studio 2010，使用.net 2.0开发。
简单的华容道算法c++实现
12-02
参考网上资料写的很烂的算法，运算时间很长，用了一个链表树的结构，穷举棋盘状态并进行结果判断和重复性判断，未用到哈希表结构所以时间很长。
基于 Java 实现的华容道小游戏课程设计
最新发布
06-21
【作品名称】：基于 Java 实现的华容道小游戏【课程设计】 【适用人群】：适用于希望学习不同技术领域的小白或进阶学习者。可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。 【项目介绍】：1) 游戏...
【Python】超简单的华容道小游戏制作+保姆级讲解（附源码）
Mitchell_Donovan的博客
03-14 8613
前言 华容道游戏是一个历史悠久的经典游戏，玩法就是将已经打乱的数字重新调整顺序，使其成为正序排列 正好昨天一个朋友的python老师留下了这道华容道的题目，今天就来学习一下吧 注意，以下内容不包含多类库或者框架等多种小白难以接受的知识，所以很适合刚刚开始学编程的同学 话不多说，我们开始吧！ ①游戏数据的构建 假设你想玩一个n阶的数字华容道，那么展示在你面前的将是n*n个数字方块，意味着我们要生成n*n个内存来储存数据 在C++中我们用int指针数组储存这n*n个数据，在python中我们也沿袭
c++数字华容道
qi_programmer的博客
09-24 2709
#include <bits/stdc++.h> #include <windows.h> #include <conio.h> using namespace std; int num[10005]={0}; int n,p[105][105],x,y,sum; bool iswin(){ int f=1; for(int i=1;i<=n-1;i++){ for(int j=1;j<=n;j++){ .
C/C++项目实战：华容道游戏开发丨570 行源码分享来啦~
致力于C语言C++知识分享！
01-11 2289
通过移动各个棋子，帮助曹操从初始位置移到棋盘最下方中部，从出口逃走。不允许跨越棋子，还要设法用最少的步数把曹操移到出口。
java华容道小游戏
06-02
Java华容道小游戏是一款基于Java语言编写的益智游戏，游戏规则类似于智力拼图，玩家需要移动方块，最终将目标方块移动到指定位置。具体玩法如下： 1. 游戏开始时，会有一个4x4的方块阵列，其中有15个数字方块和一个...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值