Jquery 游戏 - 如何将对象保持在边界内

Question

我想感受一下简单的 jquery 游戏，所以我拉了一个例子来测试。士兵会在更改以下内容之前移动：

最初是：

<p><img id="soldier" style="left: 50px; position: absolute; top: 250px" 
height=90 width=100 border=0 hspace=0 src="soldier.jpg"/></p>

现在是：

<p><img id='soldier' src='soldier.jpg'></p>

css:

#soldier {z-index: 0; left: 100px; top: 250px; height:90px; width:100px; border:0;}

---------------------------------------- ---------------------------------------------- --------------------------------------

我遇到的问题（除了上面最近的图像位置变化）我收到一条错误消息：

Uncaught ReferenceError: $ is not defined

行：

var maxLeft = parseInt($("#box").css('width')) -parseInt($("#box").css('border-left-width')) - parseInt($("#soldier").width());

对于军人的身高。我正在使用我在过去的程序中使用过的格式 但两种格式都不是：

var maxLeft = parseInt($("#box").css('width')) -parseInt($("#box").css('border-left-width')) - parseInt($("#soldier").width());

或

var maxLeft = parseInt($("#box").css('width')) -parseInt($("#box").css('border-left-width')) - parseInt(obj.css("width"));

有效。当用户移动他时，我想将我的士兵留在盒子里。

https://jsfiddle.net/W4Km8/4990/

移动是在我的第一个函数 moveObj 中找到的

我的错误：

Answer 1

我想硬编码值（认为不是最好的）对我有用。

function moveObj(obj_name, Xpix, Ypix) 
{    
  obj = document.getElementById(obj_name);
  var Xpix0 = 0;
  var Ypix0 = 0;

  var px = parseInt(obj.style.left) + Xpix;     
  var py = parseInt(obj.style.top) + Ypix;
  var px0 = parseInt(obj.style.left) + Xpix0;
  var py0 = parseInt(obj.style.top) + Xpix0;

  if(px >= 300 && px <= 1070){
  obj.style.left = px;}
   else{
    obj.style.left = px0;}
    //alert(py);    
  if(py >= 10 && py <= 620){
    obj.style.top = py;}
    else{
     obj.style.top = py0;}
}

Jquery 游戏 - 如何将对象保持在边界内

Jquery Game - how to keep object inside bounds

html

jquery

runtime-error

keyboard-events

game-physics