我用JS写了一个游戏，求怎么存档，后台用PHP写的。_百度知道
我用JS写了一个游戏，求怎么存档，后台用PHP写的。
我这个游戏里有各种道具，如果我拾取了这些道具，那么我就要把这些道具保存起来，页面刷新后再次从数据库里面读出来。后台我用PHP写的，开始的想法是把这些道具的json数组保存到数据库。求实现办法~
我有更好的答案
你的想法没错啊 拿到道具的时候把数据用ajax post到后台php保存数据库，这是很基础的你都会用js写游戏了还能难到你
采纳率：90%
来自团队：
为您推荐：
其他类似问题
换一换
回答问题，赢新手礼包
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。51CTO旗下网站
编写gameFuncs.js
《JavaScript实战》第11章休息时间：JavaScript游戏，在本章让你了解JavaScript的面向对象方法，写出干净且可扩展的代码。示例项目说明了在JavaScript中应该如何实现类的继承。本节为大家介绍编写gameFuncs.js。
作者：张~珏译来源：人民邮电出版社| 10:03
11.3.8& 编写gameFuncs.js
gameFuncs.js文件包含了几个实际上相当于迷你游戏的"帮助"的函数。首先看到的是load- GameImage()：
回想一下每个迷你游戏，由于它们都是扩展自MiniGame基类（我们下个将会看到它）的，所以都有存储那些指向迷你游戏所使用的图片的gameImages数组。这个数组通过调用loadGameImage()函数来组建。它创建了一个新的&img&元素，把src属性设置为指定的图片（把它载入到内存中），然后把它们设置到指定位置上（poisition:absolute）。并把它作为divGameArea &div&元素的子节点添加到DOM上，也就是游戏控制台框架中迷你游戏所在的位置。这个函数还添加了指向当前迷你游戏类的gameImages数组的引用。
loadGameImage()的必然结果是，我们有一个destroyGameImage()函数：
当调用一个迷你游戏的destroy()函数时，它预期地是使用destroyGameImage()函数来销毁在init()中载入的所有图片。如果不这么做的话，就会引发内存泄露，因为每次开始游戏的时候，都会重新创建图片，但之前的图片副本仍然保留着，却没有被使用。为了销毁图片，我们需要首先把它从DOM中移除，然后把数组中指向它们的引用设置为null。这样，JavaScript的垃圾回收引擎就会负责剩下的工作了。
gameFuncs.js文件中的下一个函数是detectCollision()：
大多数视频游戏，例如宇宙松鼠，都需要探测两个图片--游戏中的两个对象[通常使用术语精灵（sprite）] --何时碰撞。比如，我们需要知道玩家的松鼠什么时候被一个小行星挤扁。有无数的碰撞探测算法，但是大多数都没法在浏览器里获得。比如，检查两个图片的每个像素相对的位置，虽然可以得到100%准确的探测效果，但是并不适合于浏览器。这里使用的方法叫做包围盒（bounding box）。它是一个非常简单的方法，基本上就是检测对象的4个角。如果一个对象的角在另一个对象的范围内，那么就是发生了碰撞。
就像图11-9的示例所说明的，每个精灵周围都有一个小方块（或是长方形）区域，叫做它的包围盒，它定义了精灵所占的领地的边界。注意图11-9中，对象1的左上角是如何进入对象2的包围盒的。这就代表一个碰撞。我们可以通过对每个对象所运行的一系列比较测试来检测碰撞。如果所有条件都不为真，那么就没有发生碰撞。例如，如果对象1的底部在对象2的顶部之上，就不可能发生任何碰撞。实际上，由于我们处理的是一个正方形或者长方形，所以只需要检查4个条件，其中任何一个为假的话，就都排除了碰撞的可能性。
这个算法并不能提供完美的结果。例如，在宇宙松鼠中，有时你会看到提示说松鼠撞到了一个对象，但它们明显没有碰到对方。这是因为，包围盒可以在对象本身并没有真实碰撞的时候发生碰撞。 可能只能通过像素级别的探测来解决这个问题了，但这对我们并不可行。不过，包围盒提供了一个"足够好的"近似结果，所以就先这么着吧。
最后两个函数是addToScore()和subtractFromScore()，它们都是自释其义的。注意那个subtract- FromScore()必须检查分数值不低于零。有些游戏可能真的会有负值，但是我看没必要给玩家造成更大的心理损害。我认为零已经足够令人难堪了。那两个函数都是负责简单地更新gameState中的score字段和状态区域。
（点击查看大图）图11-9& 基础的包围盒碰撞测探算法的例子
【责任编辑： TEL：（010）】&&&&&&
大家都在看猜你喜欢
热点热点头条头条热点
24H热文一周话题本月最赞
讲师：92572人学习过
讲师：33705人学习过
讲师：17686人学习过
精选博文论坛热帖下载排行
本书是《网管员世界》杂志社推出的一本集知识性和实用性于一身的网络管理技术书籍，书中收集了《网管员世界》自创刊以来“故障诊断”栏目中...
订阅51CTO邮刊【图片】几天前刚入门js，写了个经典小游戏练手【javascript吧】_百度贴吧
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&签到排名：今日本吧第个签到，本吧因你更精彩，明天继续来努力！
本吧签到人数：0成为超级会员，使用一键签到本月漏签0次！成为超级会员，赠送8张补签卡连续签到：天&&累计签到：天超级会员单次开通12个月以上，赠送连续签到卡3张
关注：162,782贴子：
几天前刚入门js，写了个经典小游戏练手收藏
楼主刚接触js两星期不到，写得不好请不要喷我，二楼上图
不错，加个充值按钮就更好了
学两个星期就能写这种游戏了啊，楼主能教教我吗，我比较笨
为何我学不好javascript？
好厉害的样子
为什么我觉得挺难学的？？？？？？？？
javascript入门,中国高端java开发入门课程,0基础120天强力突破,成就java牛人,现在可报名预约免费试听我们的java课程,我们是北大青鸟!
楼主代码谢了多少行？
绿色俄罗斯方块？
还行，偶当时写的是扫雷。
刚入门就能写游戏,真是让人膜拜啊,何不讲讲原理和技术,让吧友也提升下?
。。混贴吧的都是新手吗？写俄罗斯方块是JS问题？感觉这就是简单的数学问题啊。别悟道吧友
吓死我了 以为是俄罗斯方块呢 那也太蚁贼了
解除了js2年都写不出来。。
没有怎么像楼主这样写过？估计的要一段时间才能写出来
刚学都能写到这程度不错了
楼主说下编码思路啊？
QAQ！楼主神奇！ 我连登陆都写不出！
楼主，求源码，
登录百度帐号用javascript实现web拼图游戏
原创
 09:52:10
1066
利用javacript编写拼图游戏，主要需实现拖拽效果、图块吸附效果，拼图打乱动画，还需要做碰撞检测。本人为了让这个游戏的体验性好一点，还添加了类似淘宝网中商品的放大镜效果，鼠标移上去会出现放大图，实现的效果如下图：下面描述该拼图游戏如何实现，HTML+CSS页面布局比较简单，就不详细描述了。重点在于javascript如何实现文中第一段提到的那些效果。（1）拼图生成首先需要用js生成整体拼图，如上图所示；代码如下：function init(){
var imgArr=[&pt1.jpg&,&pt2.jpg&,&pt3.jpg&,&pt4.jpg&];
var imgIndex=parseInt(Math.random()*imgArr.length);
var wih=&&;
for(var i=0;i&5;i++){
for(var j=0;j&9;j++){
data.push({
&order&:order,
&left&:j*100,
&top&:i*100
wih+=&&span style='background-image:url(img/拼图游戏/&+
imgArr[imgIndex]+&); background-position:&+
(-j*100)+&px &+(-i*100)+&' order='&+order+&'&&/span&&;//&+(i*9+j)+&
right.innerHTML=
var mps=document.querySelectorAll(&.magnifier p&);
for(var i=0;i&mps.i++){
mps[i].style.backgroundImage=&url(img/拼图游戏/&+imgArr[imgIndex]+&)&;
ordersb(1);
}（2）拼图打乱动画打乱拼图位置，即打乱已存储所有图块的位置的数组，然后重新渲染每个图块的位置。可利用javascript中打乱数组的方法arr.sort()来实现。代码实现如下图所示：function ordersb(n){
var arr=[];
//将数组按从小到大的顺序排列
arr=data.sort(function(a,b){
return a.order-b.
//打乱数组
arr=data.sort(function(){
return Math.random()-0.5;
for(var i=0;i&data.i++){
spans[i].style.transition=&1s&;
spans[i].style.left=data[i].left+&px&;
spans[i].style.top=data[i].top+&px&;
spans[i].setAttribute(&order&,data[i].order);
spans[i].addEventListener(&transitionend&,function(){
for (var j = 0; j & spans. j++) {
spans[j].style.transition = &none&;
}点击“开始”按钮，拼图自动打乱，并带有一个打乱动画效果，如下图所示：（3）拖拽效果实现拖拽效果只要把握拖拽原理即可。即一个完整的拖拽包含三步：a.
鼠标按下；b. 鼠标移动；c.鼠标抬起。（4）吸附效果实现吸附效果，从代码角度解释就是，鼠标移动某个模块时，在一个不是任何一个图块允许存在的位置抬起鼠标，此时需要对该图块的位置进行修改，让它的位置是在图块允许的位置上。（5）碰撞检测所谓碰撞检测，在此处的通俗说法时，移动一个元素，使其靠近另一个元素，一旦靠近到两个元素刚开始有重叠,就需要立刻检测出来。此处不但要检测出移动的图块与哪些图块有重叠，还要判断与哪个图块重叠部分最多。因为在鼠标抬起时，移动的图块需要根据与哪个图块重叠最多，来决定与哪块图块交换位置。为了游戏的体验更好一些，在鼠标移动图块时，就判断与哪个图块重叠最多，就把这块图块表示出来。这样用户就知道若抬起鼠标，即将会与哪块图块交换位置。如下图所示：这三种功能的实现代码，即关键代码如下所示：function drag(obj){
obj.onmousedown=function(ev){
obj.style.zIndex=&99&;
var br=obj.offsetL
var bb=obj.offsetT
var width=obj.offsetW
var height=obj.offsetH
var or=right.getBoundingClientRect().
var ob=right.getBoundingClientRect().
var rMax=right.clientWidth-
var bMax=right.clientHeight-
var oOrder=obj.getAttribute(&order&);
var disX=ev.clientX- br-
var disY=ev.clientY-bb-
l,t,eel,eet,
right.onmousemove=function(ev){
l=ev.clientX-disX-
t=ev.clientY-disY-
//图块移动的边界位置范围设置
l=l&rMax?rMax:l;
l=l&0?0:l;
t=t&bMax?bMax:t;
t=t&0?0:t;
obj.style.left=l+&px&;
obj.style.top=t+&px&;
//修改此时图块的位置，使其在图块允许存在的位置上，并且是与某个图块重叠最多的那个图块位置
eel=Math.round(l/width)*
eet=Math.round(t/height)*
//根据图块位置找到在这个位置上的图块元素
erl=find(obj,eel,eet);
for(var i=0;i&spans.i++){
spans[i].style.opacity=&&;
erl.style.opacity=&.5&;
right.onmouseup=function(){
right.onmousemove=
obj.style.zIndex=&&;
obj.setAttribute(&order&,erl.getAttribute(&order&));
erl.style.left=br+&px&;
erl.style.top=bb+&px&;
erl.style.opacity=&&;
erl.setAttribute(&order&,oOrder);
obj.style.left=eel+&px&;
obj.style.top=eet+&px&;
}（6）游戏输赢判断在拼图完成后，点击“验证”按钮，弹出一个弹框提示拼图是否正确。总体来说，用javascript实现拼图游戏，难度不大。本人在做的时候，遇到一个错误：图块移动到某个图块精确的位置上，此时拖拽效果和吸附效果都失效了。经过代码调试和分析，发现在对图块进行位置交换时，通过位置找到的被交换图块元素是不正确的，找到的是这个移动元素本身，导致图块的位置设置错误。找到出现bug的原因后，修改代码，在通过位置查找图块元素时，排除移动元素自身。修改后，经测试bug得到解决。以上就是用javascript实现web拼图游戏 的详细内容，更多请关注php中文网其它相关文章！
江湖传言：PHP是世界上最好的编程语言。真的是这样吗？这个梗究竟是从哪来的？学会本课程，你就会明白了。
PHP中文网出品的PHP入门系统教学视频，完全从初学者的角度出发，绝不玩虚的，一切以实用、有用...
ThinkPHP是国内最流行的中文PHP开发框架,也是您Web项目的最佳选择。《php.cn独孤九贱(5)－ThinkPHP5视频教程》课程以ThinkPHP5最新版本为例，从最基本的框架常识开始，将...
本套教程,以一个真实的学校教学管理系统为案例,手把手教会您如何在一张白纸上,从零开始,一步一步的用ThinkPHP5框架快速开发出一个商业项目。
《php.cn原创html5视频教程》课程特色：php中文网原创幽默段子系列课程，以恶搞，段子为主题风格的php视频教程！轻松的教学风格，简短的教学模式，让同学们在不知不觉中，学会了HTML知识。
所有计算机语言的学习都要从基础开始，《PHP入门视频教程之一周学会PHP》不仅是PHP的基础部分更主要的是PHP语言的核心技术，是学习PHP必须掌握的内容，任何PHP项目的实现都离不开这部分的内容，通...
本课以最新版ThinkPHP5.0.10为基础进行开发，全程实录一个完整企业点，从后台到前台，从控制器到路由的全套完整教程，不论是你是新人，还是有一定开发经验的程序员，都可以从中学到实用的知识~~
ThinkPHP是一个快速、开源的轻量级国产PHP开发框架，是业内最流行的PHP框架之一。本课程以博客系统为例，讲述如何使用TP实战开发，从中学习Thinkphp的实践应用。模版下载地址：http:/...
本课程是php实战开发课程，以爱奇艺电影网站为蓝本从零开发一个自己的网站。目的是让大家了解真实项目的架构及开发过程
本课以一个极简的PHP开发框架为案例,向您展示了一个PHP框架应该具有的基本功能，以及具体的实现方法，让您快速对PHP开发框架的底层实现有一个清楚的认识,为以后学习其实的开发框架打下坚实的基础。
javascript是运行在浏览器上的脚本语言，连续多年，被评为全球最受欢迎的编程语言。是前端开发必备三大法器中，最具杀伤力。如果前端开发是降龙十八掌，好么javascript就是第18掌：亢龙有悔。...
本站9月直播课已经结束,本套教程是直播实录,没有报上名或者漏听学员福利来了，赶紧看看吧，说不定这里就有你的菜
轻松明快，简洁生动，让你快速走入HTML5的世界，体会语义化开发的魅力
JavaScript能够称得上是史上使用最广泛的编程语言，也是前端开发必须掌握的三技能之一：描述网页内容的HTML、描述网页样式的CSS以及描述网页行为的JavaScript。本章节将帮助大家迅速掌握...
Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。为所有开发者、所有应用场景而设计,它让前端开发更快速、简单，所有开发者都能快速上手...
《php用户注册登录系统》主要介绍网站的登录注册功能,我们会从最简单的实现登录注册功能开始，增加验证码，cookie验证等，丰富网站的登录注册功能
《php.cn独孤九贱（2）－css视频教程》课程特色：php中文网原创幽默段子系列课程，以恶搞，段子为主题风格的php视频教程！轻松的教学风格，简短的教学模式，让同学们在不知不觉中，学会了CSS知识...
《PHP学生管理系统视频教程》主要给大家讲解了HTML，PHP，MySQL之间的相互协作，实现动态的网页显示和获取数据.
jQuery是一个快速、简洁的JavaScript框架。设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的...
《弹指间学会HTML视频教程》从最基本的概念开始讲起，步步深入，带领大家学习HTML,了解各种常用标签的意义以及基本用法，学习HTML知识为以后的学习打下基础
《最新微信小程序开发视频教程》本节课程是由微趋道录制，讲述了如何申请一个微信小程序，以及开发中需要使用哪些工具，和需要注意哪些等。
全栈工程师
文章总浏览数JS写的贪吃蛇游戏(个人练习)
转载 &更新时间：日 17:51:23 & 作者：
本文为大家介绍的是使用JS写的贪吃蛇游戏,个人练习之用，感兴趣的额朋友可以参考下哈，希望对大家学习js有所帮助
JS贪吃蛇游戏，个人练习之用，放在这备份一下， & 代码如下: &!DOCTYPE html& &html xmlns="http://www.w3.org/1999/xhtml"& &head& &meta http-equiv="Content-Type" content="text/ charset=utf-8" /& &title&JS贪吃蛇-练习&/title& &style type="text/css"& #pannel table { border-collapse: } #pannel table td { border: 1px solid #808080; width: 10 height: 10 font-size: 0; line-height: 0; overflow: } #pannel table .snake { background-color: } #pannel table .food { background-color: } &/style& &script type="text/javascript"& var Direction = new function () { this.UP = 38; this.RIGHT = 39; this.DOWN = 40; this.LEFT = 37; }; var Common = new function () { this.width = 20; /*水平方向方格数*/ this.height = 20; /*垂直方向方格数*/ this.speed = 250; /*速度 值越小越快*/ this.workThread = }; var Main = new function () { var control = new Control(); window.onload = function () { control.Init("pannel"); /*开始按钮*/ document.getElementById("btnStart").onclick = function () { control.Start(); this.disabled = document.getElementById("selSpeed").disabled = document.getElementById("selSize").disabled = }; /*调速度按钮*/ document.getElementById("selSpeed").onchange = function () { Common.speed = this. } /*调大小按钮*/ document.getElementById("selSize").onchange = function () { Common.width = this. Common.height = this. control.Init("pannel"); } }; }; /*控制器*/ function Control() { this.snake = new Snake(); this.food = new Food(); /*初始化函数，创建表格*/ this.Init = function (pid) { var html = []; html.push("&table&"); for (var y = 0; y & Common. y++) { html.push("&tr&"); for (var x = 0; x & Common. x++) { html.push('&td id="box_' + x + "_" + y + '"&&&/td&'); } html.push("&/tr&"); } html.push("&/table&"); this.pannel = document.getElementById(pid); this.pannel.innerHTML = html.join(""); }; /*开始游戏 - 监听键盘、创建食物、刷新界面线程*/ this.Start = function () { var me = this.MoveSnake = function (ev) { var evt = window.event || me.snake.SetDir(evt.keyCode); }; try { document.attachEvent("onkeydown", this.MoveSnake); } catch (e) { document.addEventListener("keydown", this.MoveSnake, false); } this.food.Create(); Common.workThread = setInterval(function () { me.snake.Eat(me.food); me.snake.Move(); }, Common.speed); }; } /*蛇*/ function Snake() { this.isDone = this.dir = Direction.RIGHT; this.pos = new Array(new Position()); /*移动 - 擦除尾部，向前移动，判断游戏结束(咬到自己或者移出边界)*/ this.Move = function () { document.getElementById("box_" + this.pos[0].X + "_" + this.pos[0].Y).className = ""; //所有 向前移动一步 for (var i = 0; i & this.pos.length - 1; i++) { this.pos[i].X = this.pos[i + 1].X; this.pos[i].Y = this.pos[i + 1].Y; } //重新设置头的位置 var head = this.pos[this.pos.length - 1]; switch (this.dir) { case Direction.UP: head.Y--;
case Direction.RIGHT: head.X++;
case Direction.DOWN: head.Y++;
case Direction.LEFT: head.X--;
} this.pos[this.pos.length - 1] = //遍历画蛇，同时判断游戏结束 for (var i = 0; i & this.pos. i++) { var isExits = for (var j = i + 1; j & this.pos. j++) if (this.pos[j].X == this.pos[i].X && this.pos[j].Y == this.pos[i].Y) { isExits =
} if (isExits) { this.Over();/*咬自己*/ } var obj = document.getElementById("box_" + this.pos[i].X + "_" + this.pos[i].Y); if (obj) obj.className = "snake"; else { this.Over();/*移出边界*/ } } this.isDone = }; /*游戏结束*/ this.Over = function () { clearInterval(Common.workThread); alert("游戏结束！"); } /*吃食物*/ this.Eat = function (food) { var head = this.pos[this.pos.length - 1]; var isEat = switch (this.dir) { case Direction.UP: if (head.X == food.pos.X && head.Y == food.pos.Y + 1) isEat =
case Direction.RIGHT: if (head.Y == food.pos.Y && head.X == food.pos.X - 1) isEat =
case Direction.DOWN: if (head.X == food.pos.X && head.Y == food.pos.Y - 1) isEat =
case Direction.LEFT: if (head.Y == food.pos.Y && head.X == food.pos.X + 1) isEat =
} if (isEat) { this.pos[this.pos.length] = new Position(food.pos.X, food.pos.Y); food.Create(this.pos); } }; /*控制移动方向*/ this.SetDir = function (dir) { switch (dir) { case Direction.UP: if (this.isDone && this.dir != Direction.DOWN) { this.dir = this.isDone = }
case Direction.RIGHT: if (this.isDone && this.dir != Direction.LEFT) { this.dir = this.isDone = }
case Direction.DOWN: if (this.isDone && this.dir != Direction.UP) { this.dir = this.isDone = }
case Direction.LEFT: if (this.isDone && this.dir != Direction.RIGHT) { this.dir = this.isDone = }
} }; } /*食物*/ function Food() { this.pos = new Position(); /*创建食物 - 随机位置创建立*/ this.Create = function (pos) { document.getElementById("box_" + this.pos.X + "_" + this.pos.Y).className = ""; var x = 0, y = 0, isCover = /*排除蛇的位置*/ do { x = parseInt(Math.random() * (Common.width - 1)); y = parseInt(Math.random() * (Common.height - 1)); isCover = if (pos instanceof Array) { for (var i = 0; i & pos. i++) { if (x == pos[i].X && y == pos[i].Y) { isCover =
} } } } while (isCover); this.pos = new Position(x, y); document.getElementById("box_" + x + "_" + y).className = "food"; }; } function Position(x, y) { this.X = 0; this.Y = 0; if (arguments.length &= 1) this.X = if (arguments.length &= 2) this.Y = } &/script& &/head& &body& &div id="pannel" style="margin-bottom: 10"&&/div& &select id="selSize"& &option value="20"&20*20&/option& &option value="30"&30*30&/option& &option value="40"&40*40&/option& &/select& &select id="selSpeed"& &option value="500"&速度-慢&/option& &option value="250" selected="selected"&速度-中&/option& &option value="100"&速度-快&/option& &/select& &input type="button" id="btnStart" value="开始" /& &/body& &/html&
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具