javascriptでcanvasを用いて、的となるボールを画面左上から右端まで移動させて、画面外にでるまたは、砲台から発射される球が的にあたった場合に左から再度同じ動きを繰り返すプログラムを作りたい

前提・実現したいこと

砲台から球を発射するプログラムはうまく動作するので、的となるボールを動かすプログラムを作りたいです。
的を描画する関数はdrawpnt, 的を動かすプログラムはdrawpです。initpntは的の位置、速さの初期化, collisiondetectionは衝突判定です。

ここに質問の内容を詳しく書いてください。
setIntervalで、的のオブジェクトを位置をずらしながら繰り返し描画しようとしましたが、的のオブジェクトが現れません。

発生している問題・エラーメッセージ

該当のソースコード

html
1<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
2<html lang = "ja">
3<head>
4<meta charset="utf-8">
5
6<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
7<script type="text/javascript" src="./index.js"></script>
8
9<title>球当てゲーム</title>
10
11</head>
12<body onload=" init()">
13    
14    <div style=" text-align: center">
15        
16        <h1>球当てゲーム</h1>
17
18        <!--キャンバスの設置-->
19     <canvas id="canvas" style="background-color:#eee" width="640" height="480"></canvas>
20    </div> 
21    
22    
23</body>
24</html>
25

javascript
1// 砲台
2var batteryHeight = 12;
3var batteryWidth = 40;
4var batteryHeight2 = 20;
5var batteryWidth2 = 20;
6var batteryX = 0;
7var batteryX2 = 0;
8var batterySpeed = 5;
9// キー入力状態
10var rightPressed = false; // →キー
11var leftPressed = false; // ←キー
12var spacePressed = false; // Spaceキー
13
14// 玉
15var tamaRadius = 10;
16var tamaX = 0;
17var tamaY = 0;
18var tamadx = 2;
19var tamady = -2;
20var tamaMoving = false;
21var tamaSpeed = 10;
22
23//的
24var pntRadius = 30;
25var pntX = 0;
26var pntY = pntRadius;
27var pntdx = 10;
28var pntdy = 0;
29var pntMoving = false;
30var pntSpeed = 10;
31
32
33// 砲台の描写
34function drawbattery() {
35  var cvs = document.getElementById("canvas");
36  var ctx = cvs.getContext('2d');
37  ctx.beginPath();
38  ctx.rect(batteryX, cvs.height-batteryHeight, batteryWidth, batteryHeight);
39  ctx.rect(batteryX2, cvs.height-batteryHeight2, batteryWidth2, batteryHeight2);
40  ctx.fillStyle = "#000000";
41  ctx.fill();
42  ctx.closePath();
43}
44 
45// 玉の描画
46function drawball() {
47  var cvs = document.getElementById("canvas");
48  var ctx = cvs.getContext('2d');
49  ctx.beginPath(); // パスの開始
50  ctx.arc(tamaX, tamaY, tamaRadius, 0, Math.PI*2); // 円
51  ctx.fillStyle = "#0000ff"; // 描画の塗りつぶしの色
52  ctx.fill(); // 塗りつぶし
53  ctx.closePath(); // パスの終了
54}
55
56// 的の描画
57function drawpnt() {
58  var cvs = document.getElementById("canvas");
59  var ctx = cvs.getContext('2d');
60  ctx.beginPath(); // パスの開始
61  ctx.arc(pntX, pntY, pntRadius, 0, Math.PI*2); // 円
62  ctx.fillStyle = "#0000ff"; // 描画の塗りつぶしの色
63  ctx.fill(); // 塗りつぶし
64  ctx.closePath(); // パスの終了
65}
66
67
68
69//起動時処理：起動時にのみ実行される
70function init() {
71  var cvs = document.getElementById("canvas");
72  var ctx = cvs.getContext('2d');
73  batteryX = (cvs.width-batteryWidth) / 2;
74  batteryX2 = (cvs.width-batteryWidth2) / 2;
75  draw();
76}
77
78setInterval(drawp,1);
79
80function drawp() {
81  var random = Math.random();
82  drawpnt();
83  pntX += pntSpeed*random;// 玉の移動
84  collisionDetection();
85  initpnt();
86}
87
88
89
90
91function initpnt(){
92  var cvs = document.getElementById("canvas")
93  if(pntX > cvs.width + pntRadius){
94     pntX = 0;
95     pntSpeed = 10;
96  }
97}
98
99//衝突判定
100function collisionDetection(){
101  if((tamaX-pntX)*(tamaX-pntX)+(tamaY-pntY)*(tamaY-pntY)<=(tamaRadius+pntRadius)*(tamaRadius+pntRadius)){
102    pntX = 0;
103    pntSpeed = 10;
104  }
105}
106
107document.addEventListener('keydown', keyDown, true); 
108document.addEventListener('keyup', keyUp, true); 
109
110function keyDown(e) {
111  if(e.keyCode == 39 ) {
112    rightPressed = true;
113    }
114  else if(e.keyCode == 37 ) {
115    leftPressed = true;
116  }
117  else if(e.keyCode == 32 ) {
118    spacePressed = true;
119  }
120} 
121
122function keyUp(e) {
123  if(e.keyCode == 39 ) {
124    rightPressed = false;
125  }
126  else if(e.keyCode == 37 ) {
127    leftPressed = false;
128  }
129}
130
131function draw() {
132  var cvs = document.getElementById("canvas");
133  var ctx = cvs.getContext('2d');
134  ctx.clearRect(0, 0, cvs.width, cvs.height);
135  drawbattery();
136
137  if(rightPressed && batteryX < cvs.width-batteryWidth) {
138    batteryX += batterySpeed;
139    batteryX2 += batterySpeed;
140  }
141  else if(leftPressed && batteryX > 0) {
142    batteryX -= batterySpeed;
143    batteryX2 -= batterySpeed;
144  }
145
146  // 玉の移動
147  if( tamaMoving ){ 
148    tamaY -= tamaSpeed; //画面上方向へ
149    drawball(); //描画
150    if ( tamaY < 0){ //画面外
151      tamaMoving = false;
152    }
153
154  }else{
155    if( spacePressed ) {
156      ;tamaX = batteryX2 + tamaRadius;
157      ;tamaY = cvs.height - batteryHeight2 - tamaRadius; //座標設定
158      drawball(); //球描画
159      tamaMoving = true; //動いた時の処理に移行
160      spacePressed = false; 
161    }
162  }
163
164  requestAnimationFrame(draw);
165}
166
167