html
html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<html>
<head>
<title>
Smart A.I.
</title>
</head>
<body>
<!-- Draw a Canvas -->
<canvas id="gameScreen">
</canvas>
<!-- Controles -->
<div id="moveRight" ontouchstart="moveLeft()" ontouchend="stop()" ><span class="span">Left</span></div>
<div id="moveLeft" ontouchstart="moveRight()" ontouchend="stop()" ><span class="span">Right</span></div>
<div id="moveL" ontouchstart="moveLeft()" ontouchend="stop()" onclick="remove2()">
<div id="setPosition2">
<span class="touch">Touch and Hold to moveRight</span>
</div>
</div>
<div id="moveR" ontouchstart="moveRight()" ontouchend="stop()" onclick="remove()" >
<div id="setPosition" >
<span class="touch">Touch and Hold to moveLeft</span>
</div>
</div>
Enter to Rename, Shift+Enter to Preview
css
css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
*{
padding:0px;
margin:1px;
}
#gameScreen
{
background:linear-gradient( #333333, #bfbfbf);
position:relative;
top:0px;
left:0px;
}
#moveRight
{
left:150px;
margin:10px;
padding-left:40px;
padding-top:5px;
border:1px solid ;
width:30%;
height:40px;
border-radius:10px;
float:left;
display:block;
}
#moveRight:hover
{
Enter to Rename, Shift+Enter to Preview
js
js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
function drawPaddle()
{
ctx.fillStyle="blue";
ctx.fillRect(paddle.positionX ,paddle.positionY,paddle.width,paddle.height);
}
function movePaddle(){
paddle.positionX+=paddle.speedX ;
}
function moveRight(direction='none')
{ if(paddle.positionX+paddle.width<canvas.width||direction=='right')
paddle.speedX=+paddle.speed;
if(paddle.positionX+paddle.width>=canvas.width){
paddle.speedX=0;
canvas.style.boxShadow="0px 0px 12px green";
}
else if(paddle.positionX>0)
{
canvas.style.boxShadow="0px 0px 0px green";
}
}
function moveLeft(direction ='none')
Enter to Rename, Shift+Enter to Preview
BROWSER
Console
Run