后使用快捷导航没有帐号？
只需一步，快速开始
查看: 2337|回复: 3
同一页面内点击导航栏加载不同的子页面？求教
UID666150在线时间 小时积分6帖子离线17260 天注册时间
新手上路, 积分 6, 距离下一级还需 44 积分
我是网页开发的新手，只会用写DIV, LI, 这样基本的静态页面。
现在碰到了一个问题，如何在index页面中，根据点击的导航栏项目，在index页面中的一个div中显示相应的页面。
比如，点击导航栏中的“产品”，则在页面显示区显示product.html；
点击导航栏中的“说明”，则在页面显示区中显示intro.html。
做了初步的研究后，觉的貌似可以用javascript来实现。我理解php需要消耗服务器端的资源，怕因为服务器的问题导致网页响应太慢。但是，以前从来没有接触过这方面，所有没有任何经验。所以不确定。（有C, Python, VB编程基础）
想问一下大家，
1. js能否实现我说的功能要求？
2. 这样的参考代码应该去哪里找？
3. 是否有更轻量级的解决方法？
UID610827在线时间 小时积分1090帖子离线17260 天注册时间
银牌会员, 积分 1090, 距离下一级还需 1910 积分
iframe可以
UID617273在线时间 小时积分750帖子离线17260 天注册时间
提示: 作者被禁止或删除。
UID536289在线时间 小时积分3680帖子离线17260 天注册时间
金牌会员, 积分 3680, 距离下一级还需 1320 积分
楼主想做的，只能像楼上两位说的，要么框架，要么iframe的哈，
Powered by教你在一个小时内构建一个网页游戏 - 推酷
教你在一个小时内构建一个网页游戏
你并不需要一个全新的技能来开发游戏。 事实上，你 当前的Web开发技术 HTML，JavaScript，CSS等都在适用于广泛的游戏上 很不错 。 当你用Web技术建立一个游戏，它可以运行在几乎任何有浏览器的设备上。
为了证明这一点，我将演示使用web技术和两个外部库从头构建一个游戏，并且在不到一个小时的时间里做完。我将介绍各种关于游戏的开发主题，从基本的设计和布局，控件和游戏界面，一个简单的人工智能对手，我还会开发这个游戏并让它可以在个人电脑，平板设备和智能手机上运行。如果你有Web开发或者其他领域编程的经验，但是没有编写过游戏的话，这边文章会给你一个起点。只要你给我一个小时，我一定向你展示相关的窍门。
启动和运行
做所有开发，它会在我的web应用执行时快速的执行。一定要用
的最新的版本这样你可以跟着我做。我使用 Visual Studio 2013专业版，但我在 Visual Studio 2013社区里更新了最新的代码。当然如果你使用的是MAC或者linux，
现在是可以跨平台的。
这个应用将不需要服务器代码， 所以我首先 在Visual Studio 创建一个新的空网页项目。在选择 Visual C#后， 选择 | New &然后选择选项 | ASP.NET Empty Web Site.建立一个C#的空网站模板。
当你开始用手复制下面代码块里所有你需要的代码之前，采取更简单的方式更好的归档代码
(.zip--点击下载
index HTML文件只需要三个资源：jQuery的，一个主样式表和主JavaScript文件。
我添加了一个空的CSS文件命名为style.css和一个空的JavaScript文件命名为ping.js到项目中避免页面加载的时候出错。
&!DOCTYPE html&
&script src=&/ajax/jQuery/jquery-2.1.1.min.js&&&/script&
&script src=&ping.js&&&/script&
&link rel=&stylesheet& href=&style.css&&&/script&
另外不要忘记测试这个程序（或任何其他）的跨浏览器和设备的问题。虽然我写的是与现代浏览器交互操作的，
比如像 Chrome, Firefox, 和
。 但仔细的测试是最好的做法，你可以使用
和其他的工具.
我制作的游戏是我称作&Ping&的&Pong&的变体。 除了有一点不同之外（当球击向任一个玩家时，该玩家会抓住球，然后直接把球回击回去，或者按照一定的角度向上或向下击球），Ping&和&Pong&在本质上具有相同的规则。 通常，在制作游戏之前，最好绘制一下您预期的游戏外观。 对于此游戏，我想要看到的整体布局显示在图&1&中。
图一：Ping游戏的整体设计
开发游戏设计布局后，剩下需要做的就是向&HTML&中添加每个元素以制作游戏。 但需要注意的是，我将计分板和控件组合到一起，以确保它们并排出现。 那么，如您所见，我已经逐个添加了相应元素（如图&2&中所示）。
&div id=&arena&&
&div id=&score&&
&span id=&playerScore&&0&/span&
&span id=&opponentScore&&0&/span&
&div id=&player&&&/div&
&div id=&opponent&&&/div&
&div id=&ball&&&/div&
&div id=&controls-left&&
&div id=&up&&&/div&
&div id=&down&&&/div&
&div id=&controls-right&&
&div id=&left&&&/div&
&div id=&right&&&/div&
如果您要加载此页面，则看不到任何内容，因为没有应用任何样式。 我已经创建一个指向我的&HTML&中的&main.css&文件的链接，因此我可以将所有&CSS&存放到含有该名称的新文件。 我要做的第一件事情是定位屏幕上所有内容。 页面的主体需要占据整个屏幕，因此我首先对其进行设置：
height: 100%;
其次，我需要让竞技场充满整个屏幕，将竞技场背景图像应用到整个屏幕& 如图二
background-image: url(arena.png);
background-size: 100% 100%;
width: 100%;
height: 100%;
图二： 竞技场背景图像
接下来，我将设置计分板的位置。 我希望计分板显示在顶部中心，位于其他元素之上。 命令位置：绝对可以让我将其放到我想要的任何位置，左侧：50%，将其放到窗口顶部一半的位置，但是从计分板元素的最左侧开始放置。 若要使其完全居中， 我将用transform属性和Z-index属性可以确保它始终在顶部：
z-index: 1000;
left: 50%;
transform: translate(-50%, 0%);
我还希望文本字体具有复古风。 大部分新型浏览器可允许我添加我自己的字体。 我从&codeman38&(zone38.net)&中发现适当的&Press&Start&2P&字体。 若要向计分板 添加该字体，我必须创建新的字体：
@font-face {
font-family: 'PressStart2P';
src: url('PressStart2P.woff');
现在，分数位于&h1&标记中，因此我可以为所有&h1& 标记设置字体。 为了防止该字体缺失，我将提供几个备用选项：
font-family: 'PressStart2P', 'Georgia',
对于其他元素，我将使用图像的子画面表单。 在一个文件中，子画面表单包含该游戏所需的所有图像（请参见图&3）。
图3： Ping&的子画面表单
含有此表单上的图像的所有元素都含有指定的&sprite&类。 然后，对于每个元素，我将使用背景定位来定义我要显示的子画面表单的部分：
background-image: url(&sprites.png&);
width: 128
height: 128
接下来，我将向使用该&sprite&类的所有元素添加该类。 我需要暂时跳转回&HTML&以执行此操作：
&div id=&player& class=&sprite&&&/div&
&div id=&opponent& class=&sprite&&&/div&
&div id=&ball& class=&sprite&&&/div&
&div id=&controls-left&&
&div id=&up& class=&sprite&&&/div&
&div id=&down& class=&sprite&&&/div&
&div id=&controls-right&&
&div id=&left& class=&sprite&&&/div&
&div id=&right& class=&sprite&&&/div&
现在，我需要在每一个元素的表单上指出每个子画面的位置。 同样，我可以使用背景定位来执行此操作：
background-position: 0px 128
#opponent {
background-position: 0px 0
background-position: 128px 128
background-position: 64px 192
background-position: 64px 0
background-position: 128px 192
background-position: 128px 0
位置 ：玩家、对手和球的绝对属性可以让我通过&JavaScript&来移动它们。
如果您现在查看该页面，您将发现有一些不必要的东西附加在这些控件和球上。 这是因为子画面尺寸小于默认的&128&像素，所以我将它们调整到适当的尺寸。 由于只有一个球，因此我将直接设置其尺寸：
height: 64
background-position: 128px 128
因为有四个控件元素（用户可以按下以移动玩家的按钮），所以我理应为它们创建一个特殊类。 我还将添加边距，以便让它们周围有一点空间：
.control {
margin: 16
height: 64
添加此类后，游戏的控件看上去不错：
&div id=&controls-left&&
&div id=&up& class=&sprite control&&&/div&
&div id=&down& class=&sprite control&&&/div&
&div id=&controls-right&&
&div id=&left& class=&sprite control&&&/div&
&div id=&right& class=&sprite control&&&/div&
我需要做的最后一件事情是定位控件，以便于在移动设备上运行该页面时，这些控件在用户的手指范围内。 我将它们放到底部角落中&.control&{&&&margin:&16 &&&width:&64 &&&height:&64 &}&添加此类后，游戏的控件看上去更加不错：
#controls-left {
left: 0; bottom: 0;
#controls-right {
right: 0; bottom: 0;
此设计的一大优点在于所有东西的位置都是 相对 的。
这意味着，尽管屏幕可以有各种不同的尺寸，但游戏看上去始终良好。
追逐跳动的球
现在我要让球来回移动。 对于&JavaScript&代码，我将引用&HTML&中名为&ping.js&的文件，就像我使用&CSS&执行的操作一样。 我将此代码添加到含有该名称的新文件。 我打算为该球和每个玩家创建对象，但是我将使用适用于这些对象的工厂模式。
这是一个简单的概念。 当您调用&Ball&函数时，它会新建一个球。 无需使用新关键字。 通过清晰化可用的对象属性，此模式会减少有关此变量的混乱。 而且，由于我只有一个小时的时间来制作此游戏，因此我需要最大程度地减少概念的混乱。
当我构建简单的&Ball&类时，此模式的结构如下：
var Ball = function( {
// List of variables only the object can see (private variables).
var velocity = [0,0];
var position = [0,0];
var element = $('#ball');
var paused =
// Method that moves the ball based on its velocity. This method is only used
// internally and will not be made accessible outside of the object.
function move(t) {
// Update the state of the ball, which for now just checks
// if the play is paused and moves the ball if it is not.
// This function will be provided as a method on the object.
function update(t) {
// First the motion of the ball is handled
if(!paused) {
// Pause the ball motion.
function pause() {
// Start the ball motion.
function start() {
// Now explicitly set what consumers of the Ball object can use.
// Right now this will just be the ability to update the state of the ball,
// and start and stop the motion of the ball.
若要制作一个新的球，我只需调用已定义的这一函数：
var ball = Ball();
现在，我要使球在屏幕上移动和跳动。 首先，我需要按照某个间隔调用更新函数，以创建球的动画。 新型浏览器提供一个用于此用途的函数，称为&requestAnimationFrame。 这会将某个函数视作参数，并且会在下次运行其动画循环时调用该传入的函数。 当浏览器准备好进行更新时，此举可以让球流畅地移动。 当它调用传入的函数时，它将为该函数提供自加载了页面后的时间（以秒为单位）。 这对于确保动画始终一致很关键。 在该游戏中，requestAnimationFrame&的用法如下所示：
var lastUpdate = 0;
var ball = Ball();
function update(time) {
var t = time - lastU
lastUpdate =
ball.update(t);
requestAnimationFrame(update);
requestAnimationFrame(update);
请注意，requestAnimationFrame&在函数中被再次调用，因为球已完成更新。 这可确保动画的连续。
虽然此代码可以工作，但是可能存在问题，即脚本会在页面完全加载之前就开始运行。 若要避免这种情况，在加载页面时，我将使用&jQuery&启动代码：
$(document).ready(function() {
lastUpdate = 0;
ball = Ball();
requestAnimationFrame(update);
由于我知道球的速度（速率）和最后一次更新到现在的时间，因此我可以执行一些简单的物理操作让球向前移动：
var position = [300, 300];
var velocity = [-1, -1];
var move = function(t) {
position[0] += velocity[0] *
position[1] += velocity[1] *
element.css('left', position[0] + 'px');
element.css('top', position[1] + 'px');
尝试运行代码，您将看到球按照某个角度移动并往屏幕边缘移动。 这种乐趣会持续一秒钟，但是当球移出屏幕的边缘时，这种乐趣就结束了。 因此，下一步是使球从屏幕的边缘弹回来，如图&7&中实现的那样。 添加此代码并运行该应用将显示连续跳动的球。
var move = function(t) {
// If the ball hit the top or bottom, reverse the vertical speed.
if (position[1] &= 0 || position[1] &= innerHeight) {
velocity[1] = -velocity[1];
// If the ball hit the left or right sides, reverse the horizontal speed.
if (position[0] &= 0 || position[0] &= innerWidth) {
velocity[0] = -velocity[0];
position[0] += velocity[0] *
position[1] += velocity[1] *
element.css('left', (position[0] - 32) + 'px');
element.css('top', (position[1] - 32) + 'px');
可移动的玩家
现在可以制作 Player 对象了。充实 player 类的第一步是让 move 函数更改玩家的位置。side 变量将指出玩家将处于场地的哪一边，这将指明如何水平定位玩家的位置。传入到 move 函数的 y 值是玩家向上或向下移动的高度：
var Player = function (elementName, side) {
var position = [0,0];
var element = $('#'+elementName);
var move = function(y) {
move: move,
function()
getPosition:
function()
现在，我可以创建两个玩家并且让它们移动到屏幕的相应侧：
player = Player('player', 'left');
player.move(0);
opponent = Player('opponent', 'right');
opponent.move(0);
展示了玩家的移动情况，同时在玩家子画面到达窗口的顶部或底部时停止移动。
var move = function(y) {
// Adjust the player's position.
position[1] +=
// If the player is off the edge of the screen, move it back.
if (position[1] &= 0)
position[1] = 0;
// The height of the player is 128 pixels, so stop it before any
// part of the player extends off the screen.
if (position[1] &= innerHeight - 128) {
position[1] = innerHeight - 128;
// If the player is meant to stick to the right side, set the player position
// to the right edge of the screen.
if (side == 'right') {
position[0] = innerWidth - 128;
// Finally, update the player's position on the page.
element.css('left', position[0] + 'px');
element.css('top', position[1] + 'px');
那么理论上，您可以移动该玩家，但是在没有指示的情况下它不会移动。向左侧的玩家添加一些控件。您希望通过两种方式控制该玩家：（在电脑上）使用键盘和（在平板电脑和手机上）轻按控件。
若要确保各种平台上的触摸输入和鼠标输入之间的一致性，我将使用极佳的统一框架 Hand.js ()。首先，我将在 HTML 标头部分中添加脚本：
&script src=&hand.minified-1.3.8.js&&&/script&
演示了在键盘上按下 A 键和 Z 键或轻按控件时如何使用 Hand.js 和 jQuery 来控制玩家
var distance = 24;
// The amount to move the player each step.
$(document).ready(function() {
lastUpdate = 0;
player = Player('player', 'left');
player.move(0);
opponent = Player('opponent', 'right');
opponent.move(0);
ball = Ball();
// pointerdown is the universal event for all types of pointers -- a finger,
// a mouse, a stylus and so on.
.bind(&pointerdown&, function() {player.move(-distance);});
$('#down')
.bind(&pointerdown&, function() {player.move(distance);});
requestAnimationFrame(update);
$(document).keydown(function(event) {
var event = event || window.
// This code converts the keyCode (a number) from the event to an uppercase
// letter to make the switch statement easier to read.
switch(String.fromCharCode(event.keyCode).toUpperCase()) {
player.move(-distance);
player.move(distance);
当球跳来跳去时，我想要玩家抓住该球。 抓住球后，该球就有了所有者，并且它会遵循该所有者的动作。 我会 向该球的移动方法中添加相应功能，允许球有所有者，球将遵循所有者发出的动作。
var move = function(t) {
// If there is an owner, move the ball to match the owner's position.
if (owner !== undefined) {
var ownerPosition = owner.getPosition();
position[1] = ownerPosition[1] + 64;
if (owner.getSide() == 'left') {
position[0] = ownerPosition[0] + 64;
position[0] = ownerPosition[0];
// Otherwise, move the ball using physics. Note the horizontal bouncing
// has been removed -- ball should pass by a player if it
// isn't caught.
// If the ball hits the top or bottom, reverse the vertical speed.
if (position[1] - 32 &= 0 || position[1] + 32 &= innerHeight) {
velocity[1] = -velocity[1];
position[0] += velocity[0] *
position[1] += velocity[1] *
element.css('left', (position[0] - 32) + 'px');
element.css('top',
(position[1] - 32) + 'px');
目前，无法获取&Player&对象的位置，因此我将向&Player&对象添加&getPosition&和&getSide&访问器：
move: move,
function()
getPosition:
function()
现在，如果球有了所有者，则它会遵循该所有者发出的动作。 但是，我如何确定所有者呢？ 必须有人抓住球。 下面&显示其中一个玩家子画面触摸到球的确定方法。 出现这种情况时，我将把球的所有者设置为该玩家。
var update = function(t) {
// First the motion of the ball is handled.
if(!paused) {
// The ball is under control of a player, no need to update.
if (owner !== undefined) {
// First, check if the ball is about to be grabbed by the player.
var playerPosition = player.getPosition();
if (position[0] &= 128 &&
position[1] &= playerPosition[1] &&
position[1] &= playerPosition[1] + 128) {
console.log(&Grabbed by player!&);
// Then the opponent...
var opponentPosition = opponent.getPosition();
if (position[0] &= innerWidth - 128 &&
position[1] &= opponentPosition[1] &&
position[1] &= opponentPosition[1] + 128) {
console.log(&Grabbed by opponent!&);
如果您现在试图玩此游戏，您会发现球从屏幕的顶部弹回，而且您可以移动玩家去抓住球。 现在，如何将球扔出去呢？ 这就是右侧控件所要做的，即瞄准球。 如下&向玩家添加了一个“fire”函数和一个&aim&属性。
var aim = 0;
var fire = function() {
// Safety check: if the ball doesn't have an owner, don't not mess with it.
if (ball.getOwner() !== this) {
var v = [0,0];
// Depending on the side the player is on, different directions will be thrown.
// The ball should move at the same speed, regardless of direction --
// with some math you can determine that moving .707 pixels on the
// x and y directions is the same speed as moving one pixel in just one direction.
if (side == 'left') {
switch(aim) {
v = [.707, -.707];
v = [1,0];
v = [.707, .707];
switch(aim) {
v = [-.707, -.707];
v = [-1,0];
v = [-.707, .707];
ball.setVelocity(v);
// Release control of the ball.
ball.setOwner(undefined);
// The rest of the Ball definition code goes here...
move: move,
fire: fire,
function()
function(a) { aim = },
getPosition:
function()
扩大键盘功能，以设置玩家的瞄准和触发功能。 瞄准的工作情况可能稍有不同。 释放瞄准键后，瞄准将返回为径直
$(document).keydown(function(event) {
var event = event || window.
switch(String.fromCharCode(event.keyCode).toUpperCase()) {
player.move(-distance);
player.move(distance);
player.setAim(-1);
player.setAim(1);
player.fire();
$(document).keyup(function(event) {
var event = event || window.
switch(String.fromCharCode(event.keyCode).toUpperCase()) {
player.setAim(0);
最终添加内容将在所有控件上支持触摸。 我将让右侧的控件更改玩家的瞄准情况。 此外，我还要让触摸屏幕的任意位置都可以触发球：
$('#left')
.bind(&pointerdown&, function() {player.setAim(-1);});
$('#right') .bind(&pointerdown&, function() {player.setAim(1);});
$('#left')
.bind(&pointerup&,
function() {player.setAim(0);});
$('#right') .bind(&pointerup&,
function() {player.setAim(0);});
.bind(&pointerdown&, function() {player.fire();});
当球传递到玩家后，我希望更改分数并将该球记入该玩家。 我将使用自定义事件，这样我可以对任何现有对象分别计分。 随着&update&函数越来越长，我将添加一个名为&checkScored&的新私有函数：
function checkScored() {
if (position[0] &= 0) {
$(document).trigger('ping:opponentScored');
if (position[0] &= innerWidth) {
$(document).trigger('ping:playerScored');
显示与这些事件互动的代码，以更新分数并传球。 将此代码添加到&JavaScript&文档的底部。
$(document).on('ping:playerScored', function(e) {
console.log('player scored!');
score[0]++;
$('#playerScore').text(score[0]);
ball.setOwner(opponent);
ball.start();
$(document).on('ping:opponentScored', function(e) {
console.log('opponent scored!');
score[1]++;
$('#opponentScore').text(score[1]);
ball.setOwner(player);
ball.start();
现在，当向对手传递球（这并不是很难，因为对手没有移动）时，您的分数将会增加，而且球将传递到对手。 但是，对手只是抓住球。
进行智能化
游戏几乎已经成型了。 要是有个玩家一起玩就更好了。 作为最后一步，我将演示如何使用简单&AI&来控制对手。 对手会尝试在球移动时与其保持平行。 如果对手抓住了球，它将随机移动并朝着任意方向发球。 若要使&AI&有一点人性化，我将在所做的动作中添加延迟。 提醒您，这并非高度智能的&AI，但是可以将其作为对手一起玩游戏。
在设计此类系统时，最好要郑重地考虑。 对手&AI&有三种可能状态：跟随、瞄准/发射和等待。 我将是跟随动作之间的状态，以添加更多的人性化元素。 就这样和&AI&对象开始吧：
function AI(playerToControl) {
var ctl = playerToC
var State = {
WAITING: 0,
FOLLOWING: 1,
var currentState = State.FOLLOWING;
根据&AI&的状态，我希望它做不同的动作。 就像球一样，我将构建一个可以在&requestAnimationFrame&中调用的&update&函数，以让&AI&根据其状态做出动作：
function update() {
switch (currentState) {
case State.FOLLOWING:
// Do something to follow the ball.
case State.WAITING:
// Do something to wait.
case State.AIMING:
// Do something to aim.
FOLLOWING&状态非常简单。 对手按照球的垂直方向移动，而且&AI&转变到&WAITING&状态，以注入一段缓慢的反应时间。下面 &显示这两个状态
function moveTowardsBall() {
// Move the same distance the player would move, to make it fair.
if(ball.getPosition()[1] &= ctl.getPosition()[1] + 64) {
ctl.move(distance);
ctl.move(-distance);
function update() {
switch (currentState) {
case State.FOLLOWING:
moveTowardsBall();
currentState = State.WAITING;
case State.WAITING:
setTimeout(function() {
currentState = State.FOLLOWING;
AI&在跟随球和等待一秒之间进行交替。 现在，向游戏范围的&update&函数添加该代码：
function update(time) {
var t = time - lastU
lastUpdate =
ball.update(t);
ai.update();
requestAnimationFrame(update);
在运行游戏时，您将发现对手跟随着球的运动（即，不到&30&行代码就创建出一个还不错的&AI）。 当然，如果对手抓住球，则它不会发出任何动作。 因此，这一小时内的最后一个技巧该是处理&AIMING&状态的动作了。 我希望&AI&随机移动几次，然后往任意方向将球发出。 下面的代码 添加了执行上述动作的私有函数。 向&AIMING&选择语句添加&aimAndFire&函数将使&AI&的功能更加完备，从而与其一起玩游戏。
function repeat(cb, cbFinal, interval, count) {
var timeout = function() {
repeat(cb, cbFinal, interval, count-1);
if (count &= 0) {
cbFinal();
setTimeout(function() {
repeat(cb, cbFinal, interval, count-1);
}, interval);
function aimAndFire() {
// Repeat the motion action 5 to 10 times.
var numRepeats = Math.floor(5 + Math.random() * 5);
function randomMove() {
if (Math.random() & .5) {
ctl.move(-distance);
ctl.move(distance);
function randomAimAndFire() {
var d = Math.floor( Math.random() * 3 - 1 );
opponent.setAim(d);
opponent.fire();
// Finally, set the state to FOLLOWING.
currentState = State.FOLLOWING;
repeat(randomMove, randomAimAndFire, 250, numRepeats);
到目前为止，您拥有了一个可在电脑、智能手机和平板电脑上运行的、成熟的网络游戏。 还可以对该游戏进行很多潜在的改进。 例如，在智能手机上纵向玩此游戏有点困难，因此您需要确保横向拿着手机才能让该游戏正常工作。 对于适用于&Web&以及&Web&以外的游戏开发的种种可能，这里只是做了一个小小的演示。
如果你觉得本文有任何翻译不正确的地方，欢迎指出，我会及时更正，谢谢
已发表评论数()
请填写推刊名
描述不能大于100个字符!
权限设置： 公开
仅自己可见
正文不准确
标题不准确
排版有问题
主题不准确
没有分页内容
图片无法显示
视频无法显示
与原文不一致}