jquery - 将基本 DOM 更改为 jQuery

Question

所以我想将以下代码中的容器变量更改为一个 JQuery 对象。我使用的方法不起作用....容器未加载。未调用 init() 函数。

编辑:我已经精简了 .js 文件中的代码。

letterpaint.js:

(function(){

  /* Get container elements */

  //var container = document.querySelector('#container'); 
  var charscontainer = document.querySelector('#chars');


  var container = $('#container'); //************//
  //var charscontainer = $("#chars");

  /* Prepare canvas */
  var c = document.querySelector('canvas');
  //var c = $('canvas')[0];
  var cx = c.getContext('2d');
  var letter = null;
  var fontsize = 300;
  var paintcolour = [240, 240, 240];
  var textcolour = [255, 30, 20];
  var xoffset = 0;
  var yoffset = 0;
  var linewidth = 20;
  var pixels = 0;
  var letterpixels = 0;

  /* Overall game presets */
  var state = 'intro';
  var currentstate;



  function init() {
    var temp = container.offset();
    xoffset = temp.left;
    yoffset = temp.top;
    fontsize = container.offsetHeight / 1.5;
    linewidth = container.offsetHeight / 19;

    /*
    xoffset = container.offsetLeft;
    yoffset = container.offsetTop;
    fontsize = container.offsetHeight / 1.5;
    linewidth = container.offsetHeight / 19;
    */
    paintletter();
    setstate('intro');
  }

  function setstate(newstate) {
    state = newstate;
    container.removeClass('container').addClass(newState.toString());
    //container.className = newstate;
    currentsate = state;
  }
  function moreneeded() {
    setstate('play');
    mousedown = false;
  }
  function retry(ev) {
    mousedown = false;
    oldx = 0;
    oldy = 0;
    paintletter(letter);
    //start the timer
    timer = 10;
    startTimer = true;
  }
  function winner() {
    score +=1;
    //reset timer
    timer = 10;
    //start timer again
    startTimer = true;
    //$("#score").html(score.toString());
    document.getElementById("score").innerHTML = score.toString();
    paintletter();
  }
  function start() {
    paintletter(letter);
    startTimer = true;
  }
  function cancel() {
    //reset timer
    timer = 10;
    paintletter();
  }
  function paintletter(retryletter) {
    var chars = charscontainer.innerHTML.split('');
    letter = retryletter ||
             chars[parseInt(Math.random() * chars.length,10)];
    c.width = container.offsetWidth;
    c.height = container.offsetHeight;
    cx.font = 'bold ' + fontsize + 'px Open Sans';
    cx.fillStyle = 'rgb(' + textcolour.join(',') + ')';
    cx.strokeStyle = 'rgb(' + paintcolour.join(',') + ')';
    cx.shadowOffsetX = 2;
    cx.shadowOffsetY = 2;
    cx.shadowBlur = 4;
    cx.shadowColor = '#666';

    cx.textBaseline = 'baseline';
    cx.lineWidth = linewidth;
    cx.lineCap = 'round';
    cx.fillText(
      letter,
      (c.width - cx.measureText(letter).width) / 2,
      (c.height / 1.3)
    );
    pixels = cx.getImageData(0, 0, c.width, c.height);
    letterpixels = getpixelamount(
      textcolour[0],
      textcolour[1],
      textcolour[2]
    );
    cx.shadowOffsetX = 0;
    cx.shadowOffsetY = 0;
    cx.shadowBlur = 0;
    cx.shadowColor = '#333';
    setstate('play');
  }

  function getpixelamount(r, g, b) {
    var pixels = cx.getImageData(0, 0, c.width, c.height);
    var all = pixels.data.length;
    var amount = 0;
    for (i = 0; i < all; i += 4) {
      if (pixels.data[i] === r &&
          pixels.data[i+1] === g &&
          pixels.data[i+2] === b) {
        amount++;
      }
    }
    return amount;
  }

  function paint(x, y) {
    var rx = x - xoffset;
    var ry = y - yoffset;
    var colour = pixelcolour(x, y);
    if( colour.r === 0 && colour.g === 0 && colour.b === 0) {
      showerror();
      //stop timer
      startTimer = false;
    } else {
      cx.beginPath();
      if (oldx > 0 && oldy > 0) {
        cx.moveTo(oldx, oldy);
      }
      cx.lineTo(rx, ry);
      cx.stroke();
      cx.closePath();
      oldx = rx;
      oldy = ry;
    }
  }

  function pixelcolour(x, y) {
    var index = ((y * (pixels.width * 4)) + (x * 4));
    return {
      r:pixels.data[index],
      g:pixels.data[index + 1],
      b:pixels.data[index + 2],
      a:pixels.data[index + 3]
    };
  }

  function pixelthreshold() {
    if (state !== 'error') {
      if (getpixelamount(
        paintcolour[0],
        paintcolour[1],
        paintcolour[2]
      ) / letterpixels > 0.35) {
       setstate('win');
       if (sound) {
         winsound.play();
         //stop the timer
         startTimer = false;
       }
      }
    }
  }

  /* Mouse event listeners */

  function onmouseup(ev) {
    ev.preventDefault();
    oldx = 0;
    oldy = 0;
    mousedown = false;
    pixelthreshold();
  }
  function onmousedown(ev) {
    ev.preventDefault();
    mousedown = true;
  }
  function onmousemove(ev) {
    ev.preventDefault();
    if (mousedown) {
      paint(ev.clientX, ev.clientY);
      ev.preventDefault();
    }
  }

  window.addEventListener('load',init, false);
  window.addEventListener('resize',init, false);

  //added for timer count every second
  window.setInterval(function(){timerCount()}, 1000);

})();

letterpaint.html:

<!DOCTYPE HTML>
<html lang="en-US">
<head>
  <meta name="viewport" content="width=device-width">
  <meta charset="UTF-8">
  <title>letterpaint</title>
  <link rel="stylesheet" type="text/css" href="letterpaint.css">
</head>
<body>
  <div id="container" class="container">

    <div id="chars" class="gamedata">ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz123456789</div>

    <canvas></canvas>

    <h1 class="toppanel">letterpaint</h1>

    <div id="intro" class="cover">
      <p>Paint over the letter you see on the screen. Can you write it without going outside of it?</p>
      <button class="actionbutton">➜</button>
    </div>

    <button id="sound" class="navbutton">♬</button>
    <button id="infos" class="navbutton">i</button>
    <button id="quit" class="navbutton">q</button>

    <div id="win" class="cover check">
      <p>Good job!</p> 
      <button class="actionbutton">➜</button>
    </div>

    <div id="error" class="cover">
      <p>You painted outside the letter!</p> 
      <button class="actionbutton">➜</button>
    </div>

    <div id="info" class="cover infopanel">
      <h1>letterpaint</h1>
      <p>version 1.0-2406-1</p>
      <p>Written by Chris Heilmann</p>
      <p>modified by Anil Somayaji</p>
      <p>Original version <a href="https://hacks.mozilla.org/2013/06/building-a-simple-paint-game-with-html5-canvas-and-vanilla-javascript/">here</a> (<a href="http://creativecommons.org/licenses/by-sa/3.0/">CC BY-SA 3.0</a>).
    </div>

    <button class="actionbutton undo" id="reload">X</button>

    <div class="score" id="score">
        0
    </div>

    <div class="timer" id="timer">
        0
    </div>

    <div class="message" id="encourageMessage">

    </div>

  </div>

  <!-- http://freesound.org/people/NenadSimic/sounds/150879/ -->
  <audio src="win.ogg" id="winsound"></audio>
  <!-- http://freesound.org/people/Autistic%20Lucario/sounds/142608/ -->
  <audio src="error.ogg" id="errorsound"></audio>

  <script src="letterpaint.js"></script>
  <script src="jquery-1.10.2.min.js"></script> //unsure if this is needed
</body>
</html>

letterpaint.css:

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Open Sans'), local('OpenSans'), url(opensans.ttf) format('truetype');
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  src: local('Open Sans Bold'), local('OpenSans-Bold'), url(opensans-bold.ttf) format('truetype');
}

body, html {
  width: 100%;
  height: 100%;
  background: #000;
  color: #000;
  margin: 0;
  padding: 0;
  font-family: 'Open Sans', times, arial, sans-serif;
}
.container {
  width: 100%;
  height: 100%;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
}
canvas {
  background: #ccc;
  background: linear-gradient(to top, #fc6, #ffc);
  display: block;
  width: 100%;
  height: 100%;
}
.gamedata {
  display: none;
}
.cover {
  position: absolute;
  top: 80px;
  left: 10px;
  right: 10px;
  bottom: 20px;
  z-index: 2;
  border-radius: 10px;
  background: #ccc;
  background: rgba(255,255,255,0.9);
  transition: transform 0.5s;
  -webkit-transform: translate(-120%,0);
  transform: translate(-120%,0);
} 

.info #info {
  -webkit-transform: translate(0, 0);
  transform: translate(0, 0);
}

.win #win {
  -webkit-transform: translate(0, 0);
  transform: translate(0, 0);
}
.error #error {
  -webkit-transform: translate(0, 0);
  transform: translate(0, 0);
}
.intro #intro {
  -webkit-transform: translate(0, 0);
  transform: translate(0, 0);
}
.cover p {
  text-align: center;
  z-index: 2;
  padding: 10px;
  font-size: 6vw;
}
.navbutton {
  position: absolute;
  top: 5px;
  display: block;
  right: 5px;
  line-height: 40px;
  font-size: 30px;
  border: none;
  width: 40px;
  height: 40px;
  text-align: center;
  background: #060;
  color: #fff;
  border-radius: 50% 50%;
  transition: 0.5s;
}
.navbuttonoff {
  position: absolute;
  top: 5px;
  display: block;
  right: 5px;
  line-height: 40px;
  font-size: 30px;
  border: none;
  width: 40px;
  height: 40px;
  text-align: center;
  background: #666;
  color: #ccc;
  border-radius: 50% 50%;
  transition: 0.5s;
}
.actionbutton {
  position: absolute;
  bottom: 20px;
  display: block;
  right: 20px;
  line-height: 60px;
  font-size: 50px;
  border: none;
  width: 60px;
  height: 60px;
  text-align: center;
  background: #060;
  color: #fff;
  border-radius: 50% 50%;
  transition: 0.5s;
}
.inlinebutton {
  float: right;
  background: #060;
  color: #fff;
  border-radius: 5px;
  border: none;
  padding: 5px 10px;
  margin-right: 20px;
  font-size: 3vw;
}
#infos {
  font-weight: bold;
  right: 55px;
}

#quit {
  font-weight: bold;
  right: 105px;
}
.score {
  position: absolute;
  bottom: 5px;
  right: 100px;
  font-size: 2vw;
  font-weight: normal;
  padding: 0 10px;
}

.timer {
  position: absolute;
  bottom: 50px;
  right: 100px;
  font-size: 5vw;
  font-weight: normal;
  padding: 0 10px;
}

.message {
  position: absolute;
  top: 50px;
  left: 10px;
  font-size: 3vw;
  font-weight: normal;
  padding: 0 10px;
}

.actionbutton.undo {
  background: #900;
  color: #fff;
  left: -100px;
  font-weight: bold;
  text-shadow: 2px 2px #000;
  box-shadow: 2px 2px 4px #333;
}
.play .undo {
  left: 10px;
}

.check p::after {
  content: '✔';
  font-size: 20vw;
  position: absolute;
  top: 10vh;
  z-index: 1;
  left: 60%;
  color: #060;
  color: rgba(0,200,0,0.4);
}

.toppanel {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  font-size: 30px;
  margin: 0;
  padding: 5px 10px;
  background: #000;
  background: linear-gradient(to top, #000, #333);
  color: #fff;
  font-weight: normal;
}
.infopanel h1 {
  font-size: 5vw;
  font-weight: normal;
  padding: 0 10px;
}
.infopanel p {
  font-size: 3vw;
  text-align: left;
  padding: 0 10px;
}  
@media all and (max-width: 320px) {
  .infopanel h1 {
    font-size: 8vw;
    font-weight: normal;
    padding: 0 10px;
  }
  .infopanel p {
    font-size: 5vw;
    text-align: left;
    padding: 0 10px;
  }  
}

我不确定为什么我的 var containter = $('#container') 代码不起作用。我也尝试过“.container”，但也无法正常工作。

我也尝试过将一个按钮(如开始按钮)更改为 JQuery，但遇到了同样的问题。未调用 init 函数(窗口事件处理程序)...为什么？

没有控制台错误。

如有任何帮助，我们将不胜感激!

谢谢。

Answer 1

你的 letterpaint.js脚本在 jquery-1.10.2.min.js 之前被调用和执行，因此自定义脚本中的 jQuery 功能不起作用，因为尚未加载 jQuery。

只需移动<script src="jquery-1.10.2.min.js"></script>以上<script src="letterpaint.js"></script>在标记中。

在 head 中加载 jQuery 可能是个好主意，并在 body 的末尾加载其他脚本就像你现在做的那样(这是我在我构建的大多数严重依赖 jQuery 的网站上所做的)。您还可以将这两个脚本移动到 head 中但您需要将代码包装在 letterpaint.js 中在$(document).ready()像这样的功能:

$(document).ready(function() {
    // your custom letterpaint.js code here
}