JavaScript初学-入门前端小游戏-超简单

最新推荐文章于 2023-05-14 18:31:24 发布

SkyeCat

最新推荐文章于 2023-05-14 18:31:24 发布

阅读量7.6k

点赞数 16

CC 4.0 BY-SA版权

分类专栏： Web 文章标签： javascript html css

本BLOG上原创文章未经本人许可，不得用于商业用途。

本文链接：https://blog.youkuaiyun.com/vhjjbj/article/details/115535711

本文介绍如何使用JavaScript、HTML和CSS创建一个4x4数字滑动谜题游戏。游戏规则是通过移动空格与相邻数字交换位置，最终使1-15按顺序排列。文章详细讲解了创建表格、检查相邻单元格、处理点击事件及检查胜利条件的方法，并提供代码示例和优化方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

写在前面

这篇文章比较长，建议先收藏哦😯
戳这里拿原码👉 github.

游戏介绍

创建一个4 x 4的面板（HTML5表实现），总共16个格子。其中一个格子是空的，其他格子从1到15随机编号。可通过单击格子将当前空格子旁边的任何图块移入当前空格子。将格子按顺序逐行排列即为胜利✌️。当用户点击了与空格子不相邻的格子时，用户会收到提醒。

Demo 演示

在这里插入图片描述
稍微解释一下，从上面的Demo可以看到，只可以点击与空格子相邻的格子，然后空格子和被点击的格子（下面就叫target吧）会互换。如果点击了空格子，或者不与空格子相邻的格子，就会显示红色，表示点击无效。理解完毕后，开始想思路吧😄 😄 😄

思路整理

首先，我们想一下这个游戏有什么组成呢？第一个想到的肯定是 – 16个格子！！！没错，我们肯定需要一个方法来创建格子。因为这里虽然是4x4，可是如果需要10x10， 100x100呢，不可能手动创吧，那要到什么时候😕😕。于是我们确定了第一个方法，就叫createTable吧。接下来就开始玩了嘛~~也就是点击格子。那点击格子这个操作需要什么方法来支持呢？简单来说，点击格子就两种结果，要么换，要么不换。那这能不能换，就需要检测了 --> 看看target相邻有没有空格子。检测方法我们单独拿出来，就叫checkAdjacentCell吧。那检测完了，就需要有一个方法来控制怎么换，怎么才能把空格子和target互换呢，这就由clickHandler来实现吧。😃 到目前为止，我们已经能创造16个格子，然后都填上数字，开始愉快的玩耍了。那这个游戏就完成了吗？当然不是，除非你想一直玩下去😅 。没错，来到了我们最后一个方法，是不是把游戏玩通关了呢，就通过checkWin来实现了。到此，我们的前期头脑风暴就结束了。看到这里的你也已经非常明确了所需方法了吧⭐️⭐️⭐️，那我们就继续深入！
戳这里拿原码👉 github.

代码介绍

HTML

这里就直接附上html的码，因为很短，就没什么好说的。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Game</title>
    <link rel = "stylesheet" type = "text/css" href ="style.css">
</head>
<body onload="createTable()">
    <h2>The Puzzle of the Fifteen Tiles</h2>
</body>
<script src="javaScript.js" type="text/javascript"></script>
</html>

CSS

body{
   
   
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    height: 100vh;
}
.puzzle {
   
   
    border-style: solid;
    border-color:darkcyan;
    border-width: 5px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}
.cell,.emptyCell {
   
   
    width: 60px;
    height: 60px;
    margin: 10px;