HTML上のボタンを押せば、→キーが入力されるように実装したい。

https://www.youtube.com/watch?v=B1iabPM69vM

こちらの動画を参考にして全く同じゲームを作成しました。
こちらの動画では、キーボードの矢印キーを入力することでプレイヤーを動かしていますが、今のままではスマホで遊べないので、スマホでも遊べるようHTMLで矢印ボタンを作成しました。

こちらのボタンを押すとプレイヤーを操作できるようにしたいです。

知りたいこと

app.jsの
function up(){
ここの中身
}

コード

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="UTF-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6  <title>Project</title>
7  <link rel="stylesheet" href="./css/app.css">
8</head>
9<body>
10  <div class="button">
11  <input class="up" onClick="up()" type="button" value="↑">
12  <input class="down" onClick="down()" type="button" value="↓">
13  <input class="right" onClick="right" type="button" value="→">
14  <input class="left" onClick="left" type="button" value="←">
15</div>
16</body>
17<script type="text/javascript" src="./build/app.js"></script>
18</html>

css
1.button {
2  position: relative;
3  top: 450px;
4  left: 20px;
5}
6
7.up {
8  display: inline-block;
9  padding: 0.5em 1em;
10  text-decoration: none;
11  background: #668ad8;/*ボタン色*/
12  color: #FFF;
13  border-bottom: solid 4px #627295;
14  border-radius: 3px;
15}
16
17.up:active {
18  /*ボタンを押したとき*/
19  -webkit-transform: translateY(4px);
20  transform: translateY(4px);/*下に動く*/
21  border-bottom: none;/*線を消す*/
22}
23
24.down {
25  display: inline-block;
26  padding: 0.5em 1em;
27  text-decoration: none;
28  background: #668ad8;/*ボタン色*/
29  color: #FFF;
30  border-bottom: solid 4px #627295;
31  border-radius: 3px;
32}
33
34.down:active {
35  /*ボタンを押したとき*/
36  -webkit-transform: translateY(4px);
37  transform: translateY(4px);/*下に動く*/
38  border-bottom: none;/*線を消す*/
39}
40
41.right {
42  display: inline-block;
43  padding: 0.5em 1em;
44  text-decoration: none;
45  background: #668ad8;/*ボタン色*/
46  color: #FFF;
47  border-bottom: solid 4px #627295;
48  border-radius: 3px;
49}
50
51.right:active {
52  /*ボタンを押したとき*/
53  -webkit-transform: translateY(4px);
54  transform: translateY(4px);/*下に動く*/
55  border-bottom: none;/*線を消す*/
56}
57
58.left {
59  display: inline-block;
60  padding: 0.5em 1em;
61  text-decoration: none;
62  background: #668ad8;/*ボタン色*/
63  color: #FFF;
64  border-bottom: solid 4px #627295;
65  border-radius: 3px;
66}
67
68.left:active {
69    /*ボタンを押したとき*/
70    -webkit-transform: translateY(4px);
71    transform: translateY(4px);/*下に動く*/
72    border-bottom: none;/*線を消す*/
73}

javascript
1var c = document.createElement("canvas");
2var ctx = c.getContext("2d");
3c.width = 400;
4c.height = 400;
5var size = 30;
6
7document.body.appendChild(c);
8
9// //山の斜面を作成
10var perm = [];
11
12
13
14while (perm.length < 255) {
15  while(perm.includes(val = Math.floor(Math.random() * 255)));
16    perm.push(val);
17}
18
19var lerp = (a, b, t) => a + (b - a) * (1 - Math.cos(t * Math.PI)) / 2; //ベクトル
20
21var noise = x => {
22  x = x * 0.01 % 255; //0.1=ギザギザを拡大
23  return lerp(perm[Math.floor(x)], perm[Math.ceil(x)], x - Math.floor(x)); //線形分離で山の斜面を作成
24}
25
26var player = new function() {
27  this.x = c.width / 2;
28  this.y = 0;
29  this.ySpeed = 0;
30  this.rot = 0; //回転
31  this.rSpeed = 0; //回転スピード
32
33  this.img = new Image();
34  this.img.src = "images/suga.png";
35
36  this.draw = function() {
37    var p1 = c.height - noise(t + this.x) * 0.25;
38    var p2 = c.height - noise(t + 5 + this.x) * 0.25;
39
40    
41
42    var grounded = 0;
43
44    if(p1 - size > this.y) {
45      this.ySpeed += 0.1; 
46    } else {
47      this.ySpeed -= this.y - (p1 - size);
48      this.y = p1 - size; //山の座標と同じになるように
49
50      grounded = 1;
51    }
52
53    //角度反転で地面に接着してればゲームオーバー
54    if(!playing || grounded && Math.abs(this.rot) > Math.PI * 0.5){
55      playing = false;
56      this.rSpeed = 5;
57      k.ArrowUp = 1;
58      this.x -= speed * 5;
59    }
60
61    //x,y座標を元に角度を設定
62    var angle = Math.atan2((p2 - size) - this.y, (this.x + 5) - this.x);
63
64    // this.rot = angle;
65
66    this.y += this.ySpeed;
67
68    //地面に触れたら角度が変わるように
69    if(grounded && playing) {
70      this.rot -= (this.rot - angle) * 0.5;
71      this.rSpeed = this.rSpeed - (angle - this.rot);
72    }
73
74    this.rSpeed += (k.ArrowLeft - k.ArrowRight) * 0.5;
75    this.rot -= this.rSpeed * 0.1;
76
77
78    //回転しすぎないように
79    if(this.rot > Math.PI) this.rot = -Math.PI;
80    if(this.rot < -Math.PI) this.rot = Math.PI;
81
82    ctx.save();
83    ctx.translate(this.x, this.y);
84    ctx.rotate(this.rot);
85    ctx.drawImage(this.img, -size, -size, 80, 80); //プレイヤーの画像を書き出し
86
87    ctx.restore();
88  }
89}
90
91var t = 0; //徐々に斜面が動く
92var speed = 0;
93var playing = true;
94var k = {ArrowUp: 0, ArrowDown: 0, ArrowLeft: 0, ArrowRight: 0}; //矢印キーで動くように 
95
96function loop() {
97  speed -= (speed - (k.ArrowUp - k.ArrowDown)) * 0.1;
98  t += 10 * speed;
99  ctx.fillStyle = "#19f";
100  ctx.fillRect(0, 0, c.width, c.height); //画面を作成
101
102  ctx.fillStyle = "black";
103
104  ctx.beginPath();
105  ctx.moveTo(0, c.height);
106
107  //斜面の描画
108  for (var i = 0; i < c.width; i++) {
109    ctx.lineTo(i, c.height - noise(t + i) * 0.25); //始点と終点を定義して線を引く
110  }
111
112  ctx.lineTo(c.height, c.height);
113
114  ctx.fill();
115
116  player.draw();
117  requestAnimationFrame(loop);
118}
119
120onkeydown = d => k[d.key] = 1; //キーを押してる
121onkeyup = d => k[d.key] = 0; //キーを押してない
122
123function up() {
124
125}
126
127function down(){
128
129}
130
131function left(){
132
133}
134
135function right(){
136  
137}
138
139loop();