问题遇到的现象
如图，敲完代码后js引入的图片不显示，而且发现所有js代码都无效
我的解答思路和尝试过的方法 ——搜索得知
（1）javascript里面，有直接操作页面元素的代码，所以不能在head里面引用 ，而应该放到body内引用——测试页面
无效
（2）直接将外部引入的script标签放在body的末尾（或者body标签后面）
均无效
（3）将JavaScript代码内嵌进HTML页面
无效
（4）将所有代码注释后粘贴js测试页面代码
测试页面效果如下：
点击按钮后触发
拼图游戏html页面点击无效
还是不管用
问题相关代码，请勿粘贴截图
HTML页面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>拼图游戏</title>
<link rel="stylesheet" type="text/css" href="css/pintu.css"/>
<script src="js/pintu.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="container">
<h3>HTML画布-拼图游戏</h3>
<hr >
<div id="timeBox">
共计时间：<span id="time">00:00:00</span>
</div>
<canvas id="myCanvas" width="300" height="300" style="border: 1px solid">
对不起，您的浏览器不支持HTML画布API
</canvas>
<div>
<button onclick="restartGame()" type="button">
重新开始
</button>
</div>
</div>
</body>
</html>
JS部分
var c=document.getElementById('myCanvas');
var ctx=c.getContext('2d');
var w=100;
var num=[[00,01,02],[10,11,12],[20,21,22]];
var img=new Image();
img.src="image/ddyimg.jpg";
img.onload=function(){
generateNum();
drawCanvas();
}
//打乱拼图的位置
function generateNum(){
for(var i=0;i<50;i++){
var i1=Math.round(Math.random()*2);
var j1=Math.round(Math.random()*2);
var i2=Math.round(Math.random()*2);
var j2=Math.round(Math.random()*2);
var temp=num[i1][j1];
num[i1][j1]=num[i2][j2];
num[i2][j2]=temp;
}
}
//绘制拼图
function drawCanvas(){
ctx.clearRect(0,0,300,300);
for (var i=0;i<3;i++){
for (var j=0;j<3;j++){
for (num[i][j]!=22){
var row=parseInt(num[i][j]/10);
var col=num[i][j]%10;
ctx.drawImage(img,col*w,row*w,w,w,j*w,i*w,w,w);
}
}
}
}
//监听鼠标单机事件
c.onmousedown=function(e){
var bound=c.getBoundingClientRect();
var x=e.pageX-bound.left;
var y=e.pageY-bound.top;
var row=parseInt(y/100);
var col=parseInt(x/100);
if (num[row][col]!=22){
detectBox(row,col);
drawCanvas();
var isWin=checkWin();
if(isWin){
clearInterval(timer);
ctx.drawImage(img,0,0);
ctx.font='bold 68px serif';
ctx.fillStyle='red';
ctx.fillText('游戏成功',20,150);
}
}
}
//移动单机的方块
function detectBox(i,j){
if(i>0){
if(num[i-1][j]==22){
num[i-1][j]=num[i][j];
num[i][j]=22;
return;
}
}
//如果单机的方块不在最下面一行
if(i<2){
if(num[i+1][j]==22){
num[i+1][j]=num[i][j];
num[i][j]=22;
return;
}
}
//左
if(j>0){
if(num[i][j-1]==22){
num[i][j-1]=num[i][j];
num[i][j]=22;
return;
}
}
//右
if(j<2){
if(num[i][j+1]==22){
num[i][j+1]=num[i][j];
num[i][j]=22;
return;
}
}
}
//胜利的判断
function checkWin(){
for(var i=0;i<3;i++){
for(var j=0;j<3;j++){
if(num[i][j] !=i*10+j){
return false;
}
}
}
return true;
}
var time=document.getElementById('time');
var h=0;
m=0;
s=0;
function getCurrentTime(){
s=parseInt(s);
m=parseInt(m);
h=parseInt(h);
s++;
if(s==60){
s=0;
m++;
}
if(m==60){
m=0;
h++;
}
if(s<10)
s='0'+s;
if(m<10)
m='0'+m;
if(h<10)
h='0'+h;
time.innerHTML=h+':'+m+':'+s;
}
//重新开始游戏
function restartGame(){
clearInterval(timer);
s=0;
m=0;
h=0;
getCurrentTime();
timer=setInterval('getCurrentTime()',1000);
generateNum();
drawCanvas();
}
var timer=setInterval('getCurrentTime()',1000);
CSS部分
body{
background-color: silver;
}
#container{
text-align: center;
margin: auto;
padding: 0;
background-color: white;
width: 600px;
padding: 20px;
box-shadow: 10px 10px 15px black;
}
#timeBox{
margin: 10px 0;
font-size: 18px;
}
button{
width: 200px;
height: 50px;
margin: 10px 0;
border: 0;
font-size: 25px;
font-weight: bold;
color: white;
outline: none;
background-color: lightcoral;
}
button:hover{
background-color: coral;
}
如图是目录部分
