第一步 切图 这个用background就能实现，就是把一张图，在不同的格，利用背景的位置就行了，
并记录图片的顺序，比如 01，02，03.。。16，也就是把你切好的图作一个标记
第二步：分格，把指定的区域也就是拼图区。分成17分，16格是放图片，有一格是空白。。
第三步：随机把切好的图 显示到相应的位置上
第四步：当点击非空白的格子的时候，判断上下左右是否有空格，如果有，两者替换位置。判断当前的顺序是否跟记录的顺序一样了。如果一相，图拼好了。如果不一样，重复
<!DOCTYPE HTML><html>
<head>
<title>Number game</title>
<style>
body{text-align : center}
.Win{color : green}
.Fail{color : red}
</style>
</head>
<body>
<div id="Title">规则...</div>
<div id="Control">
<input id="Input">
<button id="Go">Go</button>
</div>
<div id="Log"></div>
<script type="text/javascript" >
~function(window,document)
{
var MessageWin = function(I,R){return '胜利: 输入为' + I + ', 随机为' + R + ', 相加结果为' + (I + R) + ', 在目标范围内'},
MessageFaill = function(I,R){return '失败: 输入为' + I + ', 随机为' + R + ', 相加结果为' + (I + R) + ', 不在在目标范围内'},
MessageError = function(){return '输入有误, 请输入范围为[-' + Range + ',' + Range + ']的数字'},
Range = 50,
RangeRnd = 80,
RangeWin = 30,
$ = function(Q){return document.getElementById(Q)},
Hint = function(Q,C)
{
var LogElement = document.createElement('div')
LogElement.innerText = Q
C && LogElement.setAttribute('class',C)
LogLast ?
Log.insertBefore(LogElement,LogLast) :
Log.appendChild(LogElement)
LogLast = LogElement
},
Input = $('Input'),
Button = $('Go'),
Log = $('Log'),
LogLast
Button.addEventListener('click',function()
{
var I = parseFloat(Input.value),
R = -RangeRnd + parseInt(2 * Math.random() * RangeRnd + 1)
if (I !== I || Math.abs(I) > Range) return Hint(MessageError())
Math.abs(I + R) <= RangeWin ?
Hint(MessageWin(I,R),'Win') :
Hint(MessageFaill(I,R),'Fail')
})
}(window,document)
</script>
</body>
</html>
关于写一个带存档的js游戏相关资料如下最近使用 JS 写了一个贪吃蛇游戏，效果如下：
贪吃蛇作为一款经典又简单的小游戏，每个人都玩过。实现一个贪吃蛇游戏基本具有以下功能：
棋盘（也被称作 “地图”，我这里画的像一个围棋棋盘，索性就叫棋盘）
蛇 （细致一点分为：蛇头、蛇身、蛇尾）
方向（上下左右）控制，并且自动行走
碰撞检测（撞墙、撞自己）
食物在随机位置生成
蛇吃到食物，尾部生长一截
以上也便是我的实现步骤了，下面分享一些更详细的实现思路。
